<!doctype html>
<html>
    <head>
        <style>
            .region {
                -webkit-flow-from: content-flow;
                height: 60px;
                width: 120px;
                border: 2px solid black;
            }

            .float {
                float: left;
                -webkit-flow-into: content-flow;
                height: 60px;
                width: 40px;
            }

            #red {
                background-color: red;
            }

            #green {
                background-color: green;
            }

            #blue {
                background-color: blue;
            }
        </style>
    </head>
    <body onload="shuffle()">
        <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=103501">Fix content node renderers ordering inside the named flow thread</a>.</p>
        <p>The test adds three colored content nodes (blocks) to a flow and then modifies the flow-into properties to force renderers to shuffle.</p>
        <p>On success, you should see the blocks ordered: red, green, blue.</p>

        <div id="red" class="float">1</div>
        <div id="green"class="float">2</div>
        <div id="blue" class="float">3</div>
        <div class="region"></div>

        <script>
        function readd(content) {
            content.style.webkitFlowInto = "none";
            document.body.offsetTop;
            content.style.webkitFlowInto = "content-flow";
            document.body.offsetTop;
        }
        function shuffle() {
            var greenElement = document.getElementById("green");
            readd(greenElement);
            var redElement = document.getElementById("red");
            readd(redElement);
        }
        </script>
    </body>
</html>