<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function changeElementDisplayValue(id, value)
{
    document.getElementById(id).style.display = value;
}

function test()
{
    let documentNode;

    let suite = InspectorTest.createAsyncSuite("CSS.nodeLayoutContextTypeChanged");

    function addTestCase({name, description, selector, domNodeHandler})
    {
        suite.addTestCase({
            name,
            description,
            async test() {
                let nodeId = await documentNode.querySelector(selector);
                let domNode = WI.domManager.nodeForId(nodeId);
                InspectorTest.assert(domNode, `Should find DOM Node for selector '${selector}'.`);
                await domNodeHandler(domNode);
            },
        });
    }

    async function changeElementDisplayValue(id, value)
    {
        await InspectorTest.evaluateInPage(`changeElementDisplayValue("${id}", "${value}")`);
    }

    addTestCase({
        name: "CSS.nodeLayoutContextTypeChanged.GridToNonGrid",
        description: "Change a `grid` to a non-grid.",
        selector: "#gridToNonGrid",
        async domNodeHandler(domNode) {
            InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Grid, "Layout context should be `grid`.");

            await Promise.all([
                domNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged),
                changeElementDisplayValue("gridToNonGrid", "block"),
            ]);

            InspectorTest.expectEqual(domNode.layoutContextType, null, "Layout context should now be `null`.");
        }
    });

    addTestCase({
        name: "CSS.nodeLayoutContextTypeChanged.NonGridToGrid",
        description: "Change a non-grid to a grid.",
        selector: "#nonGridToGrid",
        async domNodeHandler(domNode) {
            InspectorTest.expectEqual(domNode.layoutContextType, null, "Layout context should be `null`.");

            await Promise.all([
                domNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged),
                changeElementDisplayValue("nonGridToGrid", "grid"),
            ]);

            InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Grid, "Layout context should now be `grid`.");
        }
    });

    addTestCase({
        name: "CSS.nodeLayoutContextTypeChanged.FlexToNonFlex",
        description: "Change a flex container to a non-flex container.",
        selector: "#flexToNonFlex",
        async domNodeHandler(domNode) {
            InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Flex, "Layout context should be `flex`.");

            await Promise.all([
                domNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged),
                changeElementDisplayValue("flexToNonFlex", "block"),
            ]);

            InspectorTest.expectEqual(domNode.layoutContextType, null, "Layout context should now be `null`.");
        }
    });

    addTestCase({
        name: "CSS.nodeLayoutContextTypeChanged.NonFlexToFlex",
        description: "Change a non-flex container to a flex container.",
        selector: "#nonFlexToFlex",
        async domNodeHandler(domNode) {
            InspectorTest.expectEqual(domNode.layoutContextType, null, "Layout context should be `null`.");

            await Promise.all([
                domNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged),
                changeElementDisplayValue("nonFlexToFlex", "flex"),
            ]);

            InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Flex, "Layout context should now be `flex`.");
        }
    });

    addTestCase({
        name: "CSS.nodeLayoutContextTypeChanged.GridToFlex",
        description: "Change a non-flex container to a flex container.",
        selector: "#gridToFlex",
        async domNodeHandler(domNode) {
            InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Grid, "Layout context should now be `grid`.");

            await Promise.all([
                domNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged),
                changeElementDisplayValue("gridToFlex", "flex"),
            ]);

            InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Flex, "Layout context should now be `flex`.");
        }
    });

    WI.domManager.requestDocument().then((doc) => {
        documentNode = doc;
        suite.runTestCasesAndFinish();
    });
}
</script>
<style>
    .grid-container {
        display: grid;
    }

    .flex-container {
        display: flex;
    }
</style>
</head>
<body onload="runTest()">
    <p>Tests for the CSS.nodeLayoutContextTypeChanged event.</p>
    <div id="gridToNonGrid" class="grid-container">
        <div></div>
        <div></div>
    </div>

    <div id="nonGridToGrid">
        <div></div>
        <div></div>
    </div>

    <div id="flexToNonFlex" class="flex-container">
        <div></div>
        <div></div>
    </div>

    <div id="nonFlexToFlex">
        <div></div>
        <div></div>
    </div>

    <div id="gridToFlex" class="grid-container">
        <div></div>
        <div></div>
    </div>
</body>
</html>