third_party/WebKit/LayoutTests/fast/dom/Element/offsetLeft-offsetTop-body-quirk.html

   1 <html>
   2 <head>
   3     <script>
   4         function log(message)
   5         {
   6             var console = document.getElementById("console");
   7             console.appendChild(document.createTextNode(message + "\n"));
   8         }
   9         function testFrame(name)
  10         {
  11             frame = frames[name];
  12             var doc = frame.document;
  13             var target = doc.getElementById("target");
  14             log(name + ": body: (" + doc.body.offsetLeft + ", " + doc.body.offsetTop + ")" +
  15                 " child: (" + target.offsetLeft + ", " + target.offsetTop + ")");
  16         }
  17         function test()
  18         {
  19             if (window.testRunner)
  20                 testRunner.dumpAsText();
  21
  22             testFrame("static");
  23             testFrame("relative");
  24             testFrame("fixed");
  25             testFrame("absolute");
  26         }
  27     </script>
  28     <style>
  29         iframe { border: thin solid; height: 100px; }
  30     </style>
  31 </head>
  32 <body style="padding: 9px; margin: 10px" onload="test()">
  33     <pre id="console"></pre>
  34
  35     <iframe name="static" src='data:text/html,
  36         <body style="padding: 9px; margin: 10px; outline: thin solid blue;">
  37             <div id="target" style="padding: 6px; margin: 8px; outline: thin solid green;"></div>
  38         </body>
  39     '>
  40     </iframe>
  41
  42     <br>
  43
  44     <iframe name="relative" src='data:text/html,
  45         <body style="position: relative; left: 12px; width: 150px; padding: 9px; margin: 10px; outline: thin solid blue;">
  46             <div id="target" style="padding: 6px; margin: 8px; outline: thin solid green;"></div>
  47         </body>
  48     '>
  49     </iframe>
  50
  51     <br>
  52
  53     <iframe name="fixed" src='data:text/html,
  54         <body style="position: fixed; left: 12px; padding: 9px; margin: 10px; outline: thin solid blue;">
  55             <div id="target" style="padding: 6px; margin: 8px; outline: thin solid green;"></div>
  56         </body>
  57     '>
  58     </iframe>
  59
  60     <br>
  61
  62     <iframe name="absolute" src='data:text/html,
  63         <body style="position: absolute; left: 12px; padding: 9px; margin: 10px; outline: thin solid blue;">
  64             <div id="target" style="padding: 6px; margin: 8px; outline: thin solid green;"></div>
  65         </body>
  66     '>
  67     </iframe>
  68 </body>
  69 </html>