<!doctype html>
<html>
    <!--
    Test that the content is properly flowed into dynamically added regions.
    On success you should see that the colored boxes are displayed inside the 3 regions with black borders.
    The green box should be displayed in left region.
    The blue box should be displayed in middle region.
    The orange box should be displayed in right region.
    -->
    <head>
        <link rel="stylesheet" href="resources/region-style.css">
    </head>
    <body>
        <div class="flowArticle">
            <div class="greenBox"></div>
            <div class="blueBox"></div>
            <div class="orangeBox"></div>
        </div>
        <div class="regionArticle borderBox"></div>
        <div class="regionArticle borderBox"></div>
        <div id="region"></div>
        <script>
            var region = document.getElementById("region");
            region.className = "regionArticle borderBox";
        </script>
    </body>
</html>