third_party/WebKit/LayoutTests/fast/css/relative-positioned-block-nested-with-inline-parent-multiple-descendant-blocks-dynamic.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3     <!-- This tests that multiple sibling anonymous blocks with the same de-facto inline parent all respect its relative positioning. -->
   4     <head>
   5         <title>CSS Test: Block boxes within inline boxes are affected by positioning</title>
   6         <style type="text/css">
   7             #div1
   8             {
   9                 background: yellow;
  10                 height: 2in;
  11                 position: relative;
  12                 width: 2in;
  13             }
  14             #div2
  15             {
  16                 background: blue;
  17                 display: inline;
  18                 top: 2in;
  19             }
  20             #div3
  21             {
  22                 background: orange;
  23                 width: 2in;
  24             }
  25             #div4
  26             {
  27                 background: blue;
  28                 display: inline;
  29                 top: 2in;
  30             }
  31         </style>
  32         <script type="text/javascript">
  33             if (window.testRunner) {
  34                 testRunner.waitUntilDone();
  35             }
  36
  37             function run() {
  38                 document.getElementById("div2").style.position = "relative";
  39                 document.body.offsetTop;
  40                 if (window.testRunner)
  41                     testRunner.notifyDone();
  42            }
  43         </script>
  44     </head>
  45     <body onload="setTimeout('run()', 10);">
  46         <p>Test passes if each of the orange boxes is sandwiched between two blue boxes and all blue and orange boxes are below the big yellow box.</p>
  47         <div id="div1">
  48             <div id="div2">
  49                  Filler Text
  50                 <div id="div3">Filler Text</div>
  51                  Filler Text
  52                 <div id="div3">Filler Text</div>
  53                  Filler Text
  54                 <div id="div3">Filler Text</div>
  55                  Filler Text
  56             </div>
  57         </div>
  58     </body>
  59 </html>