absolute-layout-after-image-load-2.html

<html>
<head>
<style type="text/css">
  body { margin-left: 10%; margin-right: 10%;}
  h1,h2,h3,h4,h5,h6 { text-align: center; clear: both;}
  h1 span { display: block; padding-bottom: 0.5em; }
  .figcenter   { margin: auto; text-align: center;}
  .footnotes        {border: dashed 1px;}
  .footnote         {margin-left: 10%; margin-right: 10%; font-size: 0.9em;}
  .footnote .label  {position: absolute; right: 84%; text-align: right;}
</style>

<script>
    //   https://bugs.webkit.org/show_bug.cgi?id=54611
    //   When navigating to the anchor directly, the anchor should be positioned below 
    //   the image on first load.

    function test(){
        var bottomOfImage = document.getElementById("image").offsetTop + document.getElementById("image").offsetHeight;
        var footnotePosition = document.getElementById("spantext").offsetTop;
        if (footnotePosition >= bottomOfImage)
          document.getElementById("console").innerHTML = "SUCCESS";
        testRunner.notifyDone();
    }
</script>

</head>
<body onload="test();">
<div class="figcenter">
  <img id="image" src="icon-gold.png" alt="Book cover." title="">
</div>

<div class="footnote"><a id="anchor1"></a><a href="http://www.gutenberg.org/files/33439/33439-h/33439-h.htm#FNanchor_1"><span id="spantext" class="label">[1]</span></a></div>

<div id="console">FAILURE</div>
</body></html>
chromium/third_party/blink/web_tests/fast/block/positioning/resources/absolute-layout-after-image-load-2.html
