52 lines
1.5 KiB
HTML
52 lines
1.5 KiB
HTML
<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>
|
|
|