<html>
<head>
<title>Test for Buzilla Bug 15359: JPEG image not shown when height is specified as percentage inside a table</title>
<script src="../../resources/js-test.js"></script>
<script>
if (window.testRunner) {
testRunner.waitUntilDone();
testRunner.dumpAsText();
}
function getComputedStyleForElement(element, cssPropertyName)
{
if (!element) {
return null;
}
if (window.getComputedStyle) {
return window.getComputedStyle(element, '').getPropertyValue(cssPropertyName.replace(/([A-Z])/g, "-$1").toLowerCase());
}
if (element.currentStyle) {
return element.currentStyle[cssPropertyName];
}
return null;
}
function getWidth(id)
{
return getComputedStyleForElement(document.getElementById(id), 'width');
}
function getHeight(id)
{
return getComputedStyleForElement(document.getElementById(id), 'height');
}
function parsePixelValue(str)
{
if (typeof str != "string" || str.length < 3 || str.substr(str.length - 2) != "px") {
testFailed(str + " is unparsable.");
return -1;
}
return parseFloat(str);
}
function test()
{
description("This test checks that replaced elements with percentage heights within table cells have the correct height.<br>Note, some of the button height tests fail on the Windows ports. See bug #34071.");
shouldBe("getWidth('canvas-75')", "'300px'");
shouldBe("getHeight('canvas-75')", "'150px'");
shouldBe("getWidth('canvas-100')", "'300px'");
shouldBe("getHeight('canvas-100')", "'150px'");
shouldBe("getWidth('embed-75')", "'300px'");
shouldBe("getHeight('embed-75')", "'150px'");
shouldBe("getWidth('embed-100')", "'300px'");
shouldBe("getHeight('embed-100')", "'150px'");
shouldBe("getWidth('img-75')", "'100px'");
shouldBe("getHeight('img-75')", "'100px'");
shouldBe("getWidth('img-100')", "'100px'");
shouldBe("getHeight('img-100')", "'100px'");
shouldBe("getWidth('img-75-nested')", "'100px'");
shouldBe("getHeight('img-75-nested')", "'100px'");
shouldBe("getWidth('img-100-nested')", "'100px'");
shouldBe("getHeight('img-100-nested')", "'100px'");
shouldBe("getWidth('object-75')", "'300px'");
shouldBe("getHeight('object-75')", "'150px'");
shouldBe("getWidth('object-100')", "'300px'");
shouldBe("getHeight('object-100')", "'150px'");
shouldBe("getWidth('button-75')", "getWidth('button-100')");
shouldBeTrue("getHeight('button-75') != '0px'");
shouldBe("getHeight('button-75')", "getHeight('button-100')");
shouldBe("getWidth('input-button-75')", "getWidth('input-button-100')");
shouldBeTrue("getHeight('input-button-75') != '0px'");
shouldBe("getHeight('input-button-75')", "getHeight('input-button-100')");
shouldBe("getWidth('input-checkbox-75')", "getWidth('input-checkbox-100')");
shouldBeTrue("getHeight('input-checkbox-75') != '0px'");
shouldBe("getHeight('input-checkbox-75')", "getHeight('input-checkbox-100')");
shouldBe("getWidth('input-file-75')", "getWidth('input-file-100')");
shouldBeTrue("getHeight('input-file-75') != '0px'");
shouldBe("getHeight('input-file-75')", "getHeight('input-file-100')");
shouldBe("getWidth('input-image-75')", "'100px'");
shouldBe("getHeight('input-image-75')", "'100px'");
shouldBe("getWidth('input-image-100')", "'100px'");
shouldBe("getHeight('input-image-100')", "'100px'");
shouldBe("getWidth('input-radio-75')", "getWidth('input-radio-100')");
shouldBeTrue("getHeight('input-radio-75') != '0px'");
shouldBe("getHeight('input-radio-75')", "getHeight('input-radio-100')");
shouldBe("getWidth('input-reset-75')", "getWidth('input-reset-100')");
shouldBeTrue("getHeight('input-reset-75') != '0px'");
shouldBe("getHeight('input-reset-75')", "getHeight('input-reset-100')");
shouldBe("getWidth('input-submit-75')", "getWidth('input-submit-100')");
shouldBeTrue("getHeight('input-submit-75') != '0px'");
shouldBe("getHeight('input-submit-75')", "getHeight('input-submit-100')");
shouldBe("getWidth('select-75')", "getWidth('select-100')");
shouldBeTrue("getHeight('select-75') != '0px'");
shouldBe("getHeight('select-75')", "getHeight('select-100')");
isSuccessfullyParsed();
if (window.testRunner) {
testRunner.notifyDone();
}
}
</script>
</head>
<body onload="test()">
<table><tr><td><canvas id="canvas-75" style="background-color: #00ff00; height: 75%;"></canvas></td></tr></table>
<table><tr><td><canvas id="canvas-100" style="background-color: #00ff00; height: 100%;"></canvas></td></tr></table>
<table><tr><td><embed id="embed-75" style="background-color: #00ff00; height: 75%;" type="image/foo"></embed></td></tr></table>
<table><tr><td><embed id="embed-100" style="background-color: #00ff00; height: 100%;" type="image/bar"></embed></td></tr></table>
<table><tr><td><img id="img-75" src="resources/square-blue-100x100.png" style="height: 75%;"></td></tr></table>
<table><tr><td><img id="img-100" src="resources/square-blue-100x100.png" style="height: 100%;"></td></tr></table>
<table><tr><td><div><img id="img-75-nested" src="resources/square-blue-100x100.png" style="height: 75%;"></div></td></tr></table>
<table><tr><td><div><img id="img-100-nested" src="resources/square-blue-100x100.png" style="height: 100%;"></div></td></tr></table>
<table><tr><td><object id="object-75" style="background-color: #00ff00; height: 75%;"></object></td></tr></table>
<table><tr><td><object id="object-100" style="background-color: #00ff00; height: 100%;"></object></td></tr></table>
<table><tr><td><button id="button-75" style="height: 75%;">Button</button></td></tr></table>
<table><tr><td><button id="button-100" style="height: 100%;">Button</button></td></tr></table>
<table><tr><td><input type="button" id="input-button-75" style="height: 75%;" value="Input"></td></tr></table>
<table><tr><td><input type="button" id="input-button-100" style="height: 100%;" value="Input"></td></tr></table>
<table><tr><td><input type="checkbox" id="input-checkbox-75" style="height: 75%;"></td></tr></table>
<table><tr><td><input type="checkbox" id="input-checkbox-100" style="height: 100%;"></td></tr></table>
<table><tr><td><input type="file" id="input-file-75" style="height: 75%;"></td></tr></table>
<table><tr><td><input type="file" id="input-file-100" style="height: 100%;"></td></tr></table>
<table><tr><td><input type="image" src="resources/square-blue-100x100.png" id="input-image-75" style="height: 75%;"></td></tr></table>
<table><tr><td><input type="image" src="resources/square-blue-100x100.png" id="input-image-100" style="height: 100%;"></td></tr></table>
<table><tr><td><input type="radio" id="input-radio-75" style="height: 75%;"></td></tr></table>
<table><tr><td><input type="radio" id="input-radio-100" style="height: 100%;"></td></tr></table>
<table><tr><td><input type="reset" id="input-reset-75" style="height: 75%;"></td></tr></table>
<table><tr><td><input type="reset" id="input-reset-100" style="height: 100%;"></td></tr></table>
<table><tr><td><input type="submit" id="input-submit-75" style="height: 75%;"></td></tr></table>
<table><tr><td><input type="submit" id="input-submit-100" style="height: 100%;"></td></tr></table>
<table><tr><td><select id="select-75" style="height: 75%;"><option>Option</option></select></td></tr></table>
<table><tr><td><select id="select-100" style="height: 100%;"><option>Option</option></select></td></tr></table>
<p id="description"></p>
<div id="console"></div>
</body>
</html>
Codebase Browser
chromium