<html>
<head>
<title>Layout test for WebKit bug 85581</title>

<script>
if (window.testRunner)
    testRunner.dumpAsText();

function log(message)
{
    var console = document.getElementById('console');
    console.appendChild(document.createTextNode(message));
    console.appendChild(document.createElement('br'));
}

function runTest()
{
    var tableHeight = document.getElementById('table').offsetHeight;
    var div1Height = parseInt(document.getElementById('div1').style.height);
    var div2Height = parseInt(document.getElementById('div2').style.height);
    var imageHeight = document.getElementById('image').height;
    var contentsHeight = div1Height + div2Height + imageHeight;

    log("Height of table: " + tableHeight);
    log("Height of table contents: " + contentsHeight);
    if (contentsHeight < tableHeight)
        log("PASS: Table contents do not overflow outside of table border.");
    else
        log("FAIL: Table contents overflow outside of table border.");

}
</script>

</head>
<body onload="runTest()">

<table id="table" style="width: 100%;" border="1">
  <tr>
    <td style="vertical-align: top;">
      <div>
        <p>
          <div id="div1" style="height: 200px; width: 100%;"></div>
          <img id="image" src="resources/square-blue-100x100.png" style="height: 60%;">
          <div id="div2" style="height: 20px; width: 100%;"></div>
        </p>
      </div>
    </td>
  </tr>
</table>

<p> Layout test for <a href="https://bugs.webkit.org/show_bug.cgi?id=85581">WebKit bug 85581</a>.  </p>
<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>
<p id="console"></p>

</body>
</html>
