third_party/WebKit/LayoutTests/fast/dom/Element/fixed-position-offset-parent.html

   1 <html>
   2 <head>
   3     <script>
   4     function print(message)
   5     {
   6         var paragraph = document.createElement("p");
   7         paragraph.appendChild(document.createTextNode(message));
   8         document.getElementById("console").appendChild(paragraph);
   9     }
  10     function test()
  11     {
  12         if (window.testRunner)
  13             testRunner.dumpAsText();
  14
  15         var statik = document.getElementById('static');
  16         var relative = document.getElementById('relative');
  17         var firstFixed = document.getElementById('fixed1');
  18         var secondFixed = document.getElementById('fixed2');
  19         var body = document.body;
  20         print("First Fixed offsetParent (null): "+firstFixed.offsetParent);
  21         print("First Fixed offsetTop (10): "+firstFixed.offsetTop);
  22         print("First Fixed offsetLeft (20): "+firstFixed.offsetLeft);
  23         print("Second Fixed offsetParent (null): "+secondFixed.offsetParent);
  24         print("Second Fixed offsetTop (15): "+secondFixed.offsetTop);
  25         print("Second Fixed offsetLeft (30): "+secondFixed.offsetLeft);
  26         print("Body offsetParent (null): "+body.offsetParent);
  27         print("Body offsetTop (0): "+body.offsetTop);
  28         print("Body offsetLeft (0): "+body.offsetLeft);
  29         print("Static offsetParent ([object HTMLBodyElement]): "+statik.offsetParent);
  30         print("Static offsetTop (15): "+statik.offsetTop);
  31         print("Static offsetLeft (15): "+statik.offsetLeft);
  32         print("Relative offsetParent ([object HTMLBodyElement]): "+relative.offsetParent);
  33         print("Relative offsetTop (13): "+relative.offsetTop);
  34         print("Relative offsetLeft (19): "+relative.offsetLeft);
  35     }
  36     </script>
  37 </head>
  38 <body onload="test()" style="margin:10px;border:5px solid white">
  39     <div id="static" style="border:1px solid green"></div>
  40     <div id="relative" style="position:relative;top:-4px;left:4px;border:1px solid blue"></div>
  41     <div id="fixed1" style="position:fixed;top:10px;left:20px;border:1px solid red"></div>
  42     <div id="absolute" style="position:absolute"><div id="fixed2" style="position:fixed;top:15px;left:30px"></div></div>
  43     <p>This test checks if <code>offsetParent</code> is always <code>null</code> when accessed from the HTML <code>&lt;body&gt;</code> and from elements with CSS property <code>position:fixed</code>. To ensure values match layout, this test also checks <code>offsetTop</code> and <code>offsetLeft</code>.</p>
  44     <p>In addition to the HTML <code>&lt;body&gt;</code>, two elements with CSS property <code>position:fixed</code> are tested: One within the body, and one within an element with CSS property <code>position:absolute</code>.</p>
  45     <p>Finally, a static- and relative-positioned element are tested for sanity and spec adherence.</p>
  46     <p>Expected values are parenthesized. Test has passed if all values match.</p>
  47     <hr>
  48     <div id="console"></div>
  49 </body>
  50 </html>