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