third_party/WebKit/LayoutTests/fast/block/abspos-child-container-changes-from-relative-to-static.html

   1 <!DOCTYPE html>
   2 <head>
   3 <style>
   4   body {
   5       margin-left: 100px;
   6       width: 400px;
   7   }
   8
   9   #container {
  10       position: relative;
  11       top: 200px;
  12       left: 100px;
  13       height: 100px;
  14       border: 1px solid black;
  15   }
  16
  17   #inner, #marker {
  18       position: absolute;
  19       top: 0;
  20       right: 0;
  21       width: 100px;
  22       height: 100px;
  23       background-color: green;
  24   }
  25
  26   #marker {
  27       background-color: red;
  28   }
  29 </style>
  30 </head>
  31
  32 <body>
  33     <p><a href="https://bugs.webkit.org/show_bug.cgi?id=26397">https://bugs.webkit.org/show_bug.cgi?id=26397</a></p>
  34     <p>Changing position: relative to position: static results in mis-positioned descendant.</p>
  35     <p>You should see no red on this page. There should be a green box in the top right-hand corner</p>
  36     <div id="marker"></div>
  37     <div id="container">
  38         <div id="inner"></div>
  39     </div>
  40     <script>
  41         var testEl = document.getElementById('container');
  42         testEl.offsetHeight;
  43         testEl.style.position = 'static';
  44     </script>
  45     </body>
  46 </html>