| <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-pre.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, 'border-top-width')); |
| h += parseFloat(getComputedStyleForElement(element, 'padding-top')); |
| h += parseFloat(getComputedStyleForElement(element, 'height')); |
| h += parseFloat(getComputedStyleForElement(element, 'padding-bottom')); |
| h += parseFloat(getComputedStyleForElement(element, 'border-bottom-width')); |
| 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 isEqual(expression75, expression100) |
| { |
| var str75 = eval(expression75); |
| var str100 = eval(expression100); |
| var num75 = parsePixelValue(str75); |
| var num100 = parsePixelValue(str100); |
| if (num75 < 0 || num100 < 0) |
| return; |
| if (num75 == num100) |
| testPassed(expression75 + " is equal to " + expression100 + "."); |
| else |
| testFailed(expression75 + " [" + str75 + "] is not equal to " + expression100 + " [" + str100 + "]."); |
| } |
| |
| 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."); |
| |
| shouldBe("getWidth('input-password-75')", "getWidth('input-password-100')"); |
| shouldBeTrue("getFullHeight('input-password-75') != '0px'"); |
| isEqual("getFullHeight('input-password-75')", "getFullHeight('input-password-100')"); |
| |
| shouldBe("getWidth('input-text-75')", "getWidth('input-text-100')"); |
| shouldBeTrue("getFullHeight('input-text-75') != '0px'"); |
| isEqual("getFullHeight('input-text-75')", "getFullHeight('input-text-100')"); |
| |
| shouldBe("getWidth('isindex-75')", "getWidth('isindex-100')"); |
| shouldBeTrue("getFullHeight('isindex-75') != '0px'"); |
| shouldBe("getFullHeight('isindex-75')", "getFullHeight('isindex-100')"); |
| |
| shouldBe("getWidth('textarea-75')", "getWidth('textarea-100')"); |
| shouldBeTrue("getFullHeight('textarea-75') != '0px'"); |
| isEqual("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><isindex id="isindex-75" style="height: 75%;"></td></tr></table> |
| <table><tr><td><isindex id="isindex-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> |
