<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>