<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../../resources/js-test-pre.js"></script>
<script src="../resources/helper.js"></script>
<style>
    #article {
        -webkit-flow-into: article;
        border: 10px solid black;
    }
    #region_1, #region_2 {
        -webkit-flow-from: no_article;
        overflow:hidden;
        display:inline-block;
        vertical-align:top;
        margin:10px;
        height:auto;
        width:200px;
        border: 1px solid red;
        padding: 5px;
        -webkit-flex-grow: 1;
        -webkit-flex-basis: 100%;
    }
    #region_2 {
        -webkit-flex-basis: 70%;
    }
    .content {
        background-color: green;
        border: 3px dashed blue;
        margin: 5px;
    }
    #part1 {
        height: 70px;
    }
    #part2 {
        height: 80px;
    }
    #flexbox {
        border: 2px solid green;
        margin: 5px;
        width: 240px;
        height: 300px;
        -webkit-flex-direction: column;
    }
</style>
</head>
<body>
    <div id="article">
        <div>
            <div id="part1" class="content"></div>
            <div id="part2" class="content"></div>
        </div>
    </div>

    <div id="flexbox">
        <div id="region_1"></div>
        <div id="region_2"></div>
    </div>

    <script>

        description("Tests the regionOversetChange event for regions inside flexboxes");

        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }
        window.jsTestIsAsync = true;
        function flowContent(flowName) {
            var region = document.getElementById("region_1");
            region.style.webkitFlowFrom = flowName;
            region = document.getElementById("region_2");
            region.style.webkitFlowFrom = flowName;
        }

        var eventFiredCount = 0;
        function finishTest() {
            shouldBe("eventFiredCount", "2");
            finishJSTest();
        }

        function EnableFlexbox() {
            debug("Engaging flexbox...")
            document.getElementById("flexbox").style.display = "-webkit-flex";
        }

        function regionOversetChanged(event) {
        	++eventFiredCount;
            shouldBeEqualToString("event.target.name", "article");

            // activate the flexbox
            if (eventFiredCount == 1) {
                if (window.testRunner)
                    EnableFlexbox();
                else
                    setTimeout("EnableFlexbox()", 1000);

                return;
            }

            else 
                setTimeout("finishTest()", 200);
        }

        function startTest() {    
            var flowThread = getFlowByName("article");
            flowThread.addEventListener("webkitregionoversetchange", regionOversetChanged);
            
            debug("Flowing content into regions...");
            flowContent("article");
        }

        window.addEventListener("load", startTest);
    </script>
    <script src="../../../resources/js-test-post.js"></script>
</body>
</html>