| <html> |
| <head> |
| <title>Complex positioned movement test</title> |
| <style> |
| .block { |
| position: absolute; |
| left:0; |
| top:0; |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| } |
| </style> |
| </head> |
| <div style="position:relative"> |
| <div class="block" id="outer"> |
| <div class="block" id="inner"> |
| </div> |
| </div> |
| </div> |
| <!--PASS if you don't crash<br> |
| and green block is shifted. |
| --> |
| <script> |
| // Update layout. |
| document.body.offsetLeft; |
| |
| // First do something to dirty the outer block indirectly. Adding a child will result |
| // in the following flag states: |
| // inner - posChildNeedsLayout, normalChildNeedsLayout |
| // outer - simplifiedNormalFlowLayout |
| document.getElementById('inner').innerHTML = "<div class='block' id='problem' style='overflow:hidden'></div>"; |
| |
| // Next, move the outer block. This will set the needsPositionedMovementLayout flag along with the |
| // other two flags that got set. |
| document.getElementById('outer').style.left = '300px'; |
| |
| // Now update layout. If we incorrectly try to do only a positioned movement layout, then the |
| // inner block is now left with its two flags set. |
| document.body.offsetLeft; |
| |
| // Now let's do something to make inner's child the layout root. |
| document.getElementById('problem').innerHTML = "Some text."; |
| |
| // Now that the problem child has become the layout root, let's destroy it and watch things go horribly wrong. |
| document.getElementById('problem').style.display = 'none'; |
| |
| // Final layout to trigger the crash |
| document.body.offsetLeft; |
| </script> |
| |
