third_party/WebKit/LayoutTests/fast/replaced/table-replaced-element.html

   1 <html>
   2 <head>
   3 <title>Layout test for WebKit bug 85581</title>
   4
   5 <script>
   6 if (window.testRunner)
   7     testRunner.dumpAsText();
   8
   9 function log(message)
  10 {
  11     var console = document.getElementById('console');
  12     console.appendChild(document.createTextNode(message));
  13     console.appendChild(document.createElement('br'));
  14 }
  15
  16 function runTest()
  17 {
  18     var tableHeight = document.getElementById('table').offsetHeight;
  19     var div1Height = parseInt(document.getElementById('div1').style.height);
  20     var div2Height = parseInt(document.getElementById('div2').style.height);
  21     var imageHeight = document.getElementById('image').height;
  22     var contentsHeight = div1Height + div2Height + imageHeight;
  23
  24     log("Height of table: " + tableHeight);
  25     log("Height of table contents: " + contentsHeight);
  26     if (contentsHeight < tableHeight)
  27         log("PASS: Table contents do not overflow outside of table border.");
  28     else
  29         log("FAIL: Table contents overflow outside of table border.");
  30
  31 }
  32 </script>
  33
  34 </head>
  35 <body onload="runTest()">
  36
  37 <table id="table" style="width: 100%;" border="1">
  38   <tr>
  39     <td style="vertical-align: top;">
  40       <div>
  41         <p>
  42           <div id="div1" style="height: 200px; width: 100%;"></div>
  43           <img id="image" src="resources/square-blue-100x100.png" style="height: 60%;">
  44           <div id="div2" style="height: 20px; width: 100%;"></div>
  45         </p>
  46       </div>
  47     </td>
  48   </tr>
  49 </table>
  50
  51 <p> Layout test for <a href="https://bugs.webkit.org/show_bug.cgi?id=85581">WebKit bug 85581</a>.  </p>
  52 <p> This tests that the contents of a table do not overflow when the table contains an image with percentage height. For this test to pass, the blue rectangle should be entirely within the table border and/or you should see a 'PASS' message below. </p>
  53 <p id="console"></p>
  54
  55 </body>
  56 </html>