LayoutTests/fast/replaced/table-percent-width.html

   1 <html>
   2 <head>
   3 <title> webkit.org/b/29447: Replaced elements squeezed when width is specified as percentage inside a table with Auto layout</title>
   4 <script src="../js/resources/js-test-pre.js"></script>
   5 <script>
   6 if (window.layoutTestController) {
   7     layoutTestController.waitUntilDone();
   8     layoutTestController.dumpAsText();
   9 }
  10
  11 function getComputedStyleForElement(element, cssPropertyName)
  12 {
  13     if (!element) {
  14         return null;
  15     }
  16     if (window.getComputedStyle) {
  17         return window.getComputedStyle(element, '').getPropertyValue(cssPropertyName.replace(/([A-Z])/g, "-$1").toLowerCase());
  18     }
  19     if (element.currentStyle) {
  20         return element.currentStyle[cssPropertyName];
  21     }
  22     return null;
  23 }
  24
  25 function getWidth(id)
  26 {
  27     return getComputedStyleForElement(document.getElementById(id), 'width');
  28 }
  29
  30 function getHeight(id)
  31 {
  32     return getComputedStyleForElement(document.getElementById(id), 'height');
  33 }
  34
  35 function parsePixelValue(str)
  36 {
  37     if (typeof str != "string" || str.length < 3 || str.substr(str.length - 2) != "px") {
  38         testFailed(str + " is unparsable.");
  39         return -1;
  40     }
  41     return parseFloat(str);
  42 }
  43
  44 function test()
  45 {
  46     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.");
  47
  48     shouldBe("getWidth('img-1')", "'105px'");
  49     shouldBe("getHeight('img-1')", "'105px'");
  50     shouldBe("getWidth('img-2')", "'98px'");
  51     shouldBe("getHeight('img-2')", "'98px'");
  52     shouldBe("getWidth('img-3')", "'40px'");
  53     shouldBe("getHeight('img-3')", "'40px'");
  54     shouldBe("getWidth('img-4')", "'36px'");
  55     shouldBe("getHeight('img-4')", "'36px'");
  56     shouldBe("getWidth('img-5')", "'40px'");
  57     shouldBe("getHeight('img-5')", "'36px'");
  58
  59     isSuccessfullyParsed();
  60
  61     if (window.layoutTestController) {
  62         layoutTestController.notifyDone();
  63     }
  64 }
  65 </script>
  66 </head>
  67 <body onload="test()">
  68    <table>
  69     <tr>
  70     <td>
  71       <img id="img-1" src="resources/square-blue-100x100.png" width="100%" align="LEFT" border="1">
  72     </td>
  73     </tr>
  74    </table>
  75
  76    <table>
  77     <tr>
  78     <td>
  79       <img id="img-2" src="resources/square-blue-100x100.png" height="100%" align="LEFT" border="1">
  80     </td>
  81     </tr>
  82    </table>
  83
  84    <table height="50" width="50" border="1">
  85     <tr>
  86     <td>
  87       <img id="img-3" src="resources/square-blue-100x100.png" width="100%" align="LEFT" border="1">
  88     </td>
  89     </tr>
  90    </table>
  91
  92    <table height="50" width="50" border="1">
  93     <tr>
  94     <td>
  95       <img id="img-4" src="resources/square-blue-100x100.png" height="100%" align="LEFT" border="1">
  96     </td>
  97     </tr>
  98    </table>
  99
 100    <table height="50" width="50" border="1">
 101     <tr>
 102     <td>
 103       <img id="img-5" src="resources/square-blue-100x100.png" width="100%" height="100%" align="LEFT" border="1">
 104     </td>
 105     </tr>
 106    </table>
 107
 108 <p id="description"></p>
 109 <div id="console"></div>
 110 </body>
 111 </html>