third_party/WebKit/LayoutTests/fast/css/relative-positioned-block-nested-with-inline-parent-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 a block inside nested inlines respects the positioning of a parent when it gets relatively positioned. -->
   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                 position: relative;
  19                 top: 2in;
  20             }
  21             #div3
  22             {
  23                 background: orange;
  24                 width: 2in;
  25             }
  26             #div4
  27             {
  28                 background: blue;
  29                 display: inline;
  30                 top: 2in;
  31             }
  32         </style>
  33         <script type="text/javascript">
  34             if (window.testRunner) {
  35                 testRunner.waitUntilDone();
  36             }
  37
  38             function run() {
  39                 document.getElementById("div4").style.position = "relative";
  40                 document.body.offsetTop;
  41                 if (window.testRunner)
  42                     testRunner.notifyDone();
  43            }
  44         </script>
  45     </head>
  46     <body onload="setTimeout('run()', 10);">
  47         <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>
  48         <div id="div1">
  49             <div id="div2">
  50                  Filler Text
  51                 <div id="div3">Filler Text</div>
  52                 <div id="div4">
  53                     Filler Text
  54                     <div id="div3">Filler Text</div>
  55                     Filler Text
  56                 </div>
  57                 <div id="div3">Filler Text</div>
  58                  Filler Text
  59             </div>
  60         </div>
  61     </body>
  62 </html>