third_party/WebKit/LayoutTests/fast/block/positioning/complex-positioned-movement.html

   1 <html>
   2 <head>
   3 <title>Complex positioned movement test</title>
   4 <style>
   5 .block {
   6     position: absolute;
   7     left:0;
   8     top:0;
   9     width: 100px;
  10     height: 100px;
  11     background-color: green;
  12 }
  13 </style>
  14 </head>
  15 <div style="position:relative">
  16 <div class="block" id="outer">
  17 <div class="block" id="inner">
  18 </div>
  19 </div>
  20 </div>
  21 <!--PASS if you don't crash<br>
  22 and green block is shifted.
  23 -->
  24 <script>
  25 // Update layout.
  26 document.body.offsetLeft;
  27
  28 // First do something to dirty the outer block indirectly.  Adding a child will result
  29 // in the following flag states:
  30 // inner - posChildNeedsLayout, normalChildNeedsLayout
  31 // outer - simplifiedNormalFlowLayout
  32 document.getElementById('inner').innerHTML = "<div class='block' id='problem' style='overflow:hidden'></div>";
  33
  34 // Next, move the outer block. This will set the needsPositionedMovementLayout flag along with the
  35 // other two flags that got set.
  36 document.getElementById('outer').style.left = '300px';
  37
  38 // Now update layout. If we incorrectly try to do only a positioned movement layout, then the
  39 // inner block is now left with its two flags set.
  40 document.body.offsetLeft;
  41
  42 // Now let's do something to make inner's child the layout root.
  43 document.getElementById('problem').innerHTML = "Some text.";
  44
  45 // Now that the problem child has become the layout root, let's destroy it and watch things go horribly wrong.
  46 document.getElementById('problem').style.display = 'none';
  47
  48 // Final layout to trigger the crash
  49 document.body.offsetLeft;
  50 </script>
  51