<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--     This tests that a block inside nested inlines still respects the positioning of a parent when a relatively positioned ancestor
         gets toggled to static. -->
    <head>
        <title>CSS Test: Block boxes within inline boxes are affected by positioning</title>
        <style type="text/css">
            #div1
            {
                background: yellow;
                height: 2in;
                position: relative;
                width: 2in;
            }
            #div2
            {
                background: blue;
                display: inline;
                position: relative;
                top: 2in;
            }
            #div3
            {
                background: orange;
                width: 2in;
            }
            #div4
            {
                background: blue;
                display: inline;
                position: relative;
                top: 2in;
            }
        </style>
        <script type="text/javascript">
            if (window.testRunner) {
                testRunner.waitUntilDone();
            }

            function run() {
                document.getElementById("div2").style.position = "static";
                document.body.offsetTop;
                if (window.testRunner)
                    testRunner.notifyDone();
           }
        </script>
    </head>
    <body onload="setTimeout('run()', 10);">
        <p>Test passes if each of the orange boxes is sandwiched between two blue boxes and two groups of blue and orange boxes are inside the big yellow box
           and the remaining group is below it.</p>
        <div id="div1">
            <div id="div2"> 
                 Filler Text
                <div id="div3">Filler Text</div>
                <div id="div4">
                    Filler Text
                    <div id="div3">Filler Text</div>
                    Filler Text
                </div>
                <div id="div3">Filler Text</div>
                 Filler Text
            </div>
        </div>
    </body>
</html>