| <html> |
| <head> |
| <title> webkit.org/b/29447: Replaced elements squeezed when width is specified as percentage inside a table with Auto layout</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 Math.round(parsePixelValue(getComputedStyleForElement(document.getElementById(id), 'width'))) + "px"; |
| } |
| |
| 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 a replaced element with percentage width (and no height specified) within a table cell is squeezed to the dimensions of the table cell.<br>See bug #29447."); |
| |
| shouldBe("getWidth('img-1')", "'105px'"); |
| shouldBe("getHeight('img-1')", "'105px'"); |
| shouldBe("getWidth('img-2')", "'98px'"); |
| shouldBe("getHeight('img-2')", "'98px'"); |
| shouldBe("getWidth('img-3')", "'40px'"); |
| shouldBe("getHeight('img-3')", "'40px'"); |
| shouldBe("getWidth('img-4')", "'36px'"); |
| shouldBe("getHeight('img-4')", "'36px'"); |
| shouldBe("getWidth('img-5')", "'40px'"); |
| shouldBe("getHeight('img-5')", "'36px'"); |
| |
| isSuccessfullyParsed(); |
| |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| } |
| </script> |
| </head> |
| <body onload="test()"> |
| <table> |
| <tr> |
| <td> |
| <img id="img-1" src="resources/square-blue-100x100.png" width="100%" align="LEFT" border="1"> |
| </td> |
| </tr> |
| </table> |
| |
| <table> |
| <tr> |
| <td> |
| <img id="img-2" src="resources/square-blue-100x100.png" height="100%" align="LEFT" border="1"> |
| </td> |
| </tr> |
| </table> |
| |
| <table height="50" width="50" border="1"> |
| <tr> |
| <td> |
| <img id="img-3" src="resources/square-blue-100x100.png" width="100%" align="LEFT" border="1"> |
| </td> |
| </tr> |
| </table> |
| |
| <table height="50" width="50" border="1"> |
| <tr> |
| <td> |
| <img id="img-4" src="resources/square-blue-100x100.png" height="100%" align="LEFT" border="1"> |
| </td> |
| </tr> |
| </table> |
| |
| <table height="50" width="50" border="1"> |
| <tr> |
| <td> |
| <img id="img-5" src="resources/square-blue-100x100.png" width="100%" height="100%" align="LEFT" border="1"> |
| </td> |
| </tr> |
| </table> |
| |
| <p id="description"></p> |
| <div id="console"></div> |
| </body> |
| </html> |
