| <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 getFullHeight(id) |
| { |
| var element = document.getElementById(id); |
| var h = parseFloat(getComputedStyleForElement(element, 'height')); |
| return h + 'px'; |
| } |
| |
| 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 text controls with percentage heights within table cells have the correct height." + |
| "Text controls are in a different test than other replaced elements because their metrics are platform-specific." + |
| "The reason a 75% control is the same height as a 100% control is because a replaced element that depends on the" + |
| "height of its parent cell is treated as auto. So by itself it will set the height of the row. See https://drafts.csswg.org/css-tables-3/#row-layout"); |
| |
| shouldBe("getWidth('input-password-75')", "getWidth('input-password-100')"); |
| shouldBeTrue("getFullHeight('input-password-75') != '0px'"); |
| shouldBe("getFullHeight('input-password-75')", "getFullHeight('input-password-100')"); |
| |
| shouldBe("getWidth('input-text-75')", "getWidth('input-text-100')"); |
| shouldBeTrue("getFullHeight('input-text-75') != '0px'"); |
| shouldBe("getFullHeight('input-text-75')", "getFullHeight('input-text-100')"); |
| |
| shouldBe("getWidth('textarea-75')", "getWidth('textarea-100')"); |
| shouldBeTrue("getFullHeight('textarea-75') != '0px'"); |
| shouldBe("getFullHeight('textarea-75')", "getFullHeight('textarea-100')"); |
| |
| isSuccessfullyParsed(); |
| |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| } |
| </script> |
| </head> |
| <body onload="test()"> |
| |
| <table><tr><td><input type="password" id="input-password-75" style="height: 75%;"></td></tr></table> |
| <table><tr><td><input type="password" id="input-password-100" style="height: 100%;"></td></tr></table> |
| |
| <table><tr><td><input type="text" id="input-text-75" style="height: 75%;"></td></tr></table> |
| <table><tr><td><input type="text" id="input-text-100" style="height: 100%;"></td></tr></table> |
| |
| <table><tr><td><textarea id="textarea-75" style="height: 75%;"></textarea></td></tr></table> |
| <table><tr><td><textarea id="textarea-100" style="height: 100%;"></textarea></td></tr></table> |
| |
| <p id="description"></p> |
| <div id="console"></div> |
| </body> |
| </html> |
