fast/block/float/overhanging-after-height-decrease.html

<html>
<head>
    <script>
        function test()
        {
            var float = document.getElementById("float");
            var float2 = document.getElementById("float2");
            document.body.offsetHeight;
            float.parentNode.style.height = "40px";
            document.body.offsetTop;
            float.parentNode.removeChild(float);
            document.body.offsetLeft;
            float2.parentNode.style.height = "40px";
            document.body.offsetTop;
            float2.parentNode.removeChild(float2);
            document.body.offsetLeft;
        }
    </script>
</head>
<body onload="test()">        
    <div style="height: 20px;">
        <div style="background-color: gray;">
            <div id="float" style="float: left; height: 30px; background-color: blue; width: 100px;"></div>
        </div>
    </div>
    <div style="background-color: silver; height: 80px;">
        <div></div>
    </div>
    <div style="height: 20px;">
        <div style="background-color: gray;">
            <div id="float2" style="float: left; height: 30px; background-color: blue; width: 100px;"></div>
        </div>
    </div>
    <div style="background-color: silver; height: 80px;">
        <div>This line should start at the left margin.</div>
    </div>
    <div style="height: 20px;">
        <div style="background-color: gray; height: 40px;">
            <div style="float: left; height: 30px; background-color: blue; width: 100px;"></div>
        </div>
    </div>
    <div style="background-color: silver; height: 80px;">
        This line should not overlap the blue box.
    </div>
</body>
</html>