third_party/WebKit/LayoutTests/fast/css/relative-positioned-block-nested-with-inline-parent-dynamic-removed.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 still respects the positioning of a parent when a relatively positioned ancestor
   4          gets toggled to static. -->
   5     <head>
   6         <title>CSS Test: Block boxes within inline boxes are affected by positioning</title>
   7         <style type="text/css">
   8             #div1
   9             {
  10                 background: yellow;
  11                 height: 2in;
  12                 position: relative;
  13                 width: 2in;
  14             }
  15             #div2
  16             {
  17                 background: blue;
  18                 display: inline;
  19                 position: relative;
  20                 top: 2in;
  21             }
  22             #div3
  23             {
  24                 background: orange;
  25                 width: 2in;
  26             }
  27             #div4
  28             {
  29                 background: blue;
  30                 display: inline;
  31                 position: relative;
  32                 top: 2in;
  33             }
  34         </style>
  35         <script type="text/javascript">
  36             if (window.testRunner) {
  37                 testRunner.waitUntilDone();
  38             }
  39
  40             function run() {
  41                 document.getElementById("div2").style.position = "static";
  42                 document.body.offsetTop;
  43                 if (window.testRunner)
  44                     testRunner.notifyDone();
  45            }
  46         </script>
  47     </head>
  48     <body onload="setTimeout('run()', 10);">
  49         <p>Test passes if each of the orange boxes is sandwiched between two blue boxes and two groups of blue and orange boxes are inside the big yellow box
  50            and the remaining group is below it.</p>
  51         <div id="div1">
  52             <div id="div2">
  53                  Filler Text
  54                 <div id="div3">Filler Text</div>
  55                 <div id="div4">
  56                     Filler Text
  57                     <div id="div3">Filler Text</div>
  58                     Filler Text
  59                 </div>
  60                 <div id="div3">Filler Text</div>
  61                  Filler Text
  62             </div>
  63         </div>
  64     </body>
  65 </html>