third_party/WebKit/LayoutTests/fast/block/positioning/resources/absolute-layout-after-image-load-2.html

   1 <html>
   2 <head>
   3 <style type="text/css">
   4   body { margin-left: 10%; margin-right: 10%;}
   5   h1,h2,h3,h4,h5,h6 { text-align: center; clear: both;}
   6   h1 span { display: block; padding-bottom: 0.5em; }
   7   .figcenter   { margin: auto; text-align: center;}
   8   .footnotes        {border: dashed 1px;}
   9   .footnote         {margin-left: 10%; margin-right: 10%; font-size: 0.9em;}
  10   .footnote .label  {position: absolute; right: 84%; text-align: right;}
  11 </style>
  12
  13 <script>
  14     //   https://bugs.webkit.org/show_bug.cgi?id=54611
  15     //   When navigating to the anchor directly, the anchor should be positioned below
  16     //   the image on first load.
  17
  18     function test(){
  19         var bottomOfImage = document.getElementById("image").offsetTop + document.getElementById("image").offsetHeight;
  20         var footnotePosition = document.getElementById("spantext").offsetTop;
  21         if (footnotePosition >= bottomOfImage)
  22           document.getElementById("console").innerHTML = "SUCCESS";
  23         testRunner.notifyDone();
  24     }
  25 </script>
  26
  27 </head>
  28 <body onload="test();">
  29 <div class="figcenter">
  30   <img id="image" src="icon-gold.png" alt="Book cover." title="">
  31 </div>
  32
  33 <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>
  34
  35 <div id="console">FAILURE</div>
  36 </body></html>
  37