112 lines
2.9 KiB
HTML
112 lines
2.9 KiB
HTML
<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>
|