<html>
<head>
<script src="../../http/tests/inspector/inspector-test.js"></script>
<script>

function createDynamicElements()
{
    var frameDoc = window.frames[0].document;

    var el = frameDoc.createElement("article");
    el.style.webkitFlowInto = "flow4";
    frameDoc.body.appendChild(el);

    el = frameDoc.createElement("div");
    el.style.webkitFlowFrom = "flow4";
    frameDoc.body.appendChild(el);

    runTest();
}

function createNamedFlow()
{
    var article = document.createElement("article");
    var div = document.createElement("div");

    article.id = "tmpArticle";
    article.style["-webkit-flow-into"] = "tmpNamedFlow";
    article.textContent = "This text is from CSS Named Flow \"tmpNamedFlow\"";

    div.id = "tmpDiv";
    div.style["-webkit-flow-from"] = "tmpNamedFlow";
    div.style["height"] = "5px";
    div.style["width"] = "20px";

    document.body.appendChild(article);
    document.body.appendChild(div);
}

function removeNamedFlow()
{
    document.body.removeChild(document.getElementById("tmpArticle"));
    document.body.removeChild(document.getElementById("tmpDiv"));
}

function test()
{
    WebInspector.showPanel("elements");
    InspectorTest.runTestSuite([
        function testGetNamedFlowCollection(next)
        {
            WebInspector.domAgent.requestDocument(documentCallback);

            function documentCallback(document)
            {
                WebInspector.cssModel.getNamedFlowCollectionAsync(document.id, namedFlowCallback);
            }

            function namedFlowCallback(namedFlowCollection)
            {
                InspectorTest.addResult("=== CSS Named Flows in main document ===");

                if (!namedFlowCollection) {
                    InspectorTest.addResult("[!] Failed to get Named Flows");
                    InspectorTest.completeTest();
                    return;
                }

                var namedFlowMap = namedFlowCollection.namedFlowMap;
                var namedFlows = [];
                for (var flowName in namedFlowMap)
                    namedFlows.push(namedFlowMap[flowName]);

                namedFlows.sort(function (nf1, nf2) {
                    return ((nf1.name == nf2.name) ? 0 : ((nf1.name > nf2.name) ? 1 : -1));
                });

                for (var i = 0; i < namedFlows.length; ++i)
                    printNamedFlow(namedFlows[i]);

                next();
            }
        },

        function testGetNamedFlowCollectionWithInvalidDocument(next)
        {
            WebInspector.domAgent.requestDocument(documentCallback);

            function documentCallback(document)
            {
                WebInspector.domAgent.querySelector(document.id, "#fake-document", querySelectorCallback);
            }

            function querySelectorCallback(nodeId)
            {
                WebInspector.cssModel.getNamedFlowCollectionAsync(nodeId, namedFlowCallback);
            }

            function namedFlowCallback(namedFlowCollection)
            {
                InspectorTest.addResult("=== CSS Named Flows in #fake-document ===");

                if (namedFlowCollection) {
                    InspectorTest.addResult("[!] Failed");
                    InspectorTest.completeTest();
                    return;
                }

                InspectorTest.addResult("#fake-document is not a document")
                next();
            }
        },

        function testGetFlowByName(next)
        {
            WebInspector.domAgent.requestDocument(documentCallback);

            function documentCallback(document)
            {
                WebInspector.cssModel.getFlowByNameAsync(document.id, "flow2", namedFlowCallback);
            }

            function namedFlowCallback(namedFlow)
            {
                InspectorTest.addResult("=== Named Flow \"flow2\" from main document ===");

                if (!namedFlow) {
                    InspectorTest.addResult("[!] Failed to get Named Flow");
                    InspectorTest.completeTest();
                    return;
                }

                printNamedFlow(namedFlow);

                next();
            }
        },

        function testGetFlowByNameWithInvalidName(next)
        {
            WebInspector.domAgent.requestDocument(documentCallback);

            function documentCallback(document)
            {
                WebInspector.cssModel.getFlowByNameAsync(document.id, "flow4", namedFlowCallback);
            }

            function namedFlowCallback(namedFlow)
            {
                InspectorTest.addResult("=== Name Flow \"flow4\" from main document ===");

                if (namedFlow) {
                    InspectorTest.addResult("[!] Failed")
                    InspectorTest.completeTest();
                    return;
                }

                InspectorTest.addResult("There is no Named Flow \"flow4\" in the main document");
                next();
            }
        },

        function testNamedFlowCreated(next)
        {
            WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, callback, this);
            InspectorTest.evaluateInPage("createNamedFlow()");

            function callback(event)
            {
                if (event.data.name !== "tmpNamedFlow")
                    return;

                WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, callback, this);

                InspectorTest.addResult("NamedFlowCreated: \"tmpNamedFlow\"");
                next();
            }
        },

        function testRegionOversetChanged(next)
        {
            WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.RegionOversetChanged, callback, this);
            InspectorTest.evaluateInPage("window.document.getElementById(\"region3\").style.webkitFlowFrom=\"flow3\"");

            function callback(event)
            {
                if (event.data.name !== "flow3")
                    return;

                WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.RegionOversetChanged, callback, this);

                InspectorTest.addResult("RegionOversetChanged: \"flow3\"");
                next();
            }
        },

        function testNamedFlowRemoved(next)
        {
            WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, callback, this);
            InspectorTest.evaluateInPage("removeNamedFlow()");

            function callback(event)
            {
                if (event.data.flowName !== "tmpNamedFlow")
                    return;

                WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, callback, this);

                InspectorTest.addResult("NamedFlowRemoved: \"tmpNamedFlow\"");
                next();
            }
        }
    ]);

    function printNamedFlow(namedFlow)
    {
        InspectorTest.addResult("* Named Flow \"" + namedFlow.name + "\"");
        InspectorTest.addResult("Content Elements: " + namedFlow.content.length);
        InspectorTest.addResult("Regions: " + namedFlow.regions.length);
    }
}
</script>
</head>

<body onload="createDynamicElements()">
<p>
Tests the following commands and events:
<ul>
    <li>getNamedFlowCollection <a href="https://bugs.webkit.org/show_bug.cgi?id=91607">Bug 91607</a></li>
    <li>getFlowByName <a href="https://bugs.webkit.org/show_bug.cgi?id=91855">Bug 91855</a></li>
    <li>namedFlowCreated <a href="https://bugs.webkit.org/show_bug.cgi?id=92739">Bug 92739</a></li>
    <li>namedFlowRemoved <a href="https://bugs.webkit.org/show_bug.cgi?id=92739">Bug 92739</a></li>
    <li>regionOversetChanged <a href="https://bugs.webkit.org/show_bug.cgi?id=117833">Bug 117833</a></li>
</ul>
</p>

<article style="-webkit-flow-into: flow1"></article>
<div style="-webkit-flow-from: flow1"></div>
<div style="-webkit-flow-from: flow1"></div>
<div style="-webkit-flow-from: flow1"></div>

<article style="-webkit-flow-into: flow2"></article>
<div style="-webkit-flow-from: flow2"></div>
<div style="-webkit-flow-from: flow2"></div>

<article style="-webkit-flow-into: flow3">
    This text is from CSS Named Flow "flow3".
</article>
<div id="region3" style="-webkit-flow-from: none; height: 20px; width: 5px"></div>

<div id="fake-document"></div>

<iframe></iframe>

</body>
</html>