<!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 appendElementToBody(tag, id)
{
    let element = document.createElement(tag);
    element.id = id;
    document.body.appendChild(element);
}

function test()
{
    let documentNode;

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

    function addTestCase({name, description, selector, setup, domNodeHandler})
    {
        suite.addTestCase({
            name,
            description,
            setup,
            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}")`);
    }

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

    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`.");
        }
    });

    function addEnsureLayoutContextTypeTestCase({name, description, selector, expectedLayoutContextType, setup})
    {
        addTestCase({name, description, selector, setup, async domNodeHandler(domNode) {
                InspectorTest.expectEqual(domNode.layoutContextType, expectedLayoutContextType, `Layout context should be \`${expectedLayoutContextType}\`.`);
            }
        });
    }

    addEnsureLayoutContextTypeTestCase({
        name: "CSS.nodeLayoutContextTypeChanged.NotFlex.SubmitInput",
        description: "Make sure an `input` element of type `submit` is not considered a flex container.",
        selector: "#flexSubmitInput",
        expectedLayoutContextType: null,
    });

    addEnsureLayoutContextTypeTestCase({
        name: "CSS.nodeLayoutContextTypeChanged.NotFlex.Select",
        description: "Make sure a `select` element is not considered a flex container.",
        selector: "#flexSelect",
        expectedLayoutContextType: null,
    });

    addEnsureLayoutContextTypeTestCase({
        name: "CSS.nodeLayoutContextTypeChanged.NotFlex.Button",
        description: "Make sure a `button` is not considered a flex container.",
        selector: "#flexButton",
        expectedLayoutContextType: null,
    });

    addEnsureLayoutContextTypeTestCase({
        name: "CSS.nodeLayoutContextTypeChanged.NotFlex.DynamicallyAddedButton",
        description: "Make sure a `button` that is added dynamically is not considered a flex container.",
        selector: "#dynamicallyAddedFlexButton",
        expectedLayoutContextType: null,
        async setup() {
            await appendElementToBody("button", "dynamicallyAddedFlexButton");
        }
    });

    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>
    
    <input type="submit" id="flexSubmitInput" />
    <select id="flexSelect"></select>
    <button id="flexButton"></button>
</body>
</html>