<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>
Codebase Browser
chromium