third_party/WebKit/LayoutTests/fast/css/relative-positioned-block-with-inline-ancestor-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 respects the positioning of a relative positioned inline parent when a relative
   4          positioned inline ancestor 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             body { overflow: hidden; }
   9             #span1
  10             {
  11                 background: yellow;
  12                 height: 2in;
  13                 display: inline;
  14                 width: 2in;
  15                 left: 2in;
  16                 top: 2in;
  17                 position: relative;
  18             }
  19             #span2
  20             {
  21                 left: 2in;
  22                 top: 2in;
  23                 background: blue;
  24                 display: inline;
  25                 position: relative;
  26             }
  27             #div3
  28             {
  29                 background: orange;
  30                 width: 2in;
  31             }
  32         </style>
  33         <script type="text/javascript">
  34             if (window.testRunner) {
  35                 testRunner.waitUntilDone();
  36             }
  37
  38             function run() {
  39                 document.getElementById("span1").style.position = "static";
  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 the orange box sits atop the blue box and both are in the center of the view.</p>
  48         <span id="span1">
  49             <span id="span2">
  50                 <i>
  51                 <div id="div3">Filler Text</div>
  52                 Filler Text
  53                 </i>
  54             </span>
  55         </span>
  56     </body>
  57 </html>