<!DOCTYPE HTML>
<html>
<head>
    <title>Test for http://bugs.webkit.org/show_bug.cgi?id=10983</title>
    <style type="text/css">
       div.test { position: relative; height: 100px; margin-bottom: 25px; }
       div.demo { position: absolute; width: 100px; height: 50px; }
       div.red { background-color: red; }
       div.green { background-color: green; }
    </style>
</head>
<body>
    <div class="test" style="top: -51px;">
        <div class="demo red" style="top: 51px;"></div>
        <div class="demo green" style="top: 101px;"></div>
        <div style="margin-bottom: 50px; height: 1px;"></div>
        <div class="demo green" id="target2"></div>
    </div>
    
    <div class="test">
        <div style="height: 100px;">
            <div class="demo green" style="top: 0;"></div>
            <div class="demo red" style="top: 50px;"></div>
            <div id="target3" style="height: 0;"></div>
            <div class="demo green"></div>
        </div>
    </div>
    
    <div class="test">
        <div style="position: relative; height: 50px;">
            <div class="demo green" style="top: 0;"></div>
            <div class="demo red" style="top: 50px;"></div>
            <div id="target4" style="height: 0;"></div>
            <div class="demo green"></div>
        </div>
    </div>
    
    <div class="test">
        <div style="position: relative; height: 100px;">
            <div class="demo green" style="top: 0;"></div>
            <div class="demo red" style="top: 50px;"></div>
            <div id="target5" style="height: 0;"></div>
            <div class="demo green"></div>
        </div>
    </div>

    <script>
        var t2 = document.getElementById("target2");
        var t3 = document.getElementById("target3");
        var t4 = document.getElementById("target4");
        var t5 = document.getElementById("target5");
    
        document.body.offsetTop;
    
        t3.style.height = "50px";
        t4.style.height = "50px";
        t5.style.height = "50px";
    </script>
</body>
</html>
