third_party/WebKit/LayoutTests/fast/css/relative-positioned-block-with-inline-parent-keeps-style.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 changing the style of a parent block does not clobber the positioning of any anonymous block
   4          children that hold the descendants of a relative positioned inline. -->
   5     <head>
   6         <title>CSS Test: Block boxes within inline boxes are affected by positioning</title>
   7         <style type="text/css">
   8             #span2
   9             {
  10                 background: blue;
  11                 display: inline;
  12                 width: 2in;
  13                 left: 2in;
  14                 top: 2in;
  15                 position: relative;
  16             }
  17             #div3
  18             {
  19                 background: orange;
  20                 width: 2in;
  21             }
  22             #div4
  23             {
  24                 background: orange;
  25                 width: 2in;
  26             }
  27         </style>
  28         <script type="text/javascript">
  29             if (window.testRunner) {
  30                 testRunner.waitUntilDone();
  31             }
  32
  33             function run() {
  34                 document.getElementById("div3").style.background = "red";
  35                 document.body.offsetTop;
  36                 if (window.testRunner)
  37                     testRunner.notifyDone();
  38            }
  39         </script>
  40     </head>
  41     <body onload="setTimeout('run()', 10);">
  42         <p>Test passes if the blue box sits atop the orange box and both are in the center of the view.</p>
  43          <div id="div3">
  44             <span id="span2">
  45                 Filler Text1
  46                 <div id="div4">Filler Text</div>
  47             </span>
  48         </div>
  49     </body>
  50 </html>