blob: bfbaa7bf08c0b26d301cf9fe0a5c6e51d85b030c [file] [log] [blame]
<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>