<!doctype html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test()
{
    let suite = InspectorTest.createAsyncSuite("DOM.showFlexOverlay");

    async function getFlexContainerNode() {
        let doc = await WI.domManager.requestDocument();
        let nodeId = await doc.querySelector(".flex-container");
        return WI.domManager.nodeForId(nodeId);
    }

    async function getAllFlexContainerNodes() {
        let doc = await WI.domManager.requestDocument();
        let nodeIds = await doc.querySelectorAll(".flex-container");
        return nodeIds.map((nodeId) => WI.domManager.nodeForId(nodeId));
    }

    async function FlexOverlayCount() {
        return InspectorTest.evaluateInPage("window.internals.inspectorFlexOverlayCount()");
    }

    async function checkFlexOverlayCount(expected) {
        let actual = await FlexOverlayCount();
        let message;
        switch (expected) {
        case 1:
            message = "Should have 1 flex overlay displayed.";
            break;
        default:
            message = `Should have ${expected} flex overlays displayed.`;
            break;
        }

        InspectorTest.expectEqual(actual, expected, message);
    }

    suite.addTestCase({
        name: "DOM.showFlexOverlay.ShowOneOverlay",
        description: "No error occurs when requesting to show a flex overlay.",
        async test() {
            await checkFlexOverlayCount(0);
            let container = await getFlexContainerNode();

            InspectorTest.log("Requesting to show flex overlay for first .flex-container");
            await container.showLayoutOverlay({color: WI.Color.fromString("magenta")});
            await checkFlexOverlayCount(1);

            // No error should occur if showing flex overlay for a node that already has one.
            InspectorTest.log("Requesting to show a different flex overlay for first .flex-container");
            await container.showLayoutOverlay({color: WI.Color.fromString("green")});
            await checkFlexOverlayCount(1);

            // No error should occur when hiding the flex overlay.
            InspectorTest.log("Requesting to hide flex overlay");
            await container.hideLayoutOverlay();
            await checkFlexOverlayCount(0);
        }
    });

    suite.addTestCase({
        name: "DOM.showFlexOverlay.ShowTwoOverlays",
        description: "No error occurs when requesting to show multiple flex overlays.",
        async test() {
            await checkFlexOverlayCount(0);
            let [first, second] = await getAllFlexContainerNodes();

            InspectorTest.log("Requesting to show first flex overlay");
            await first.showLayoutOverlay({color: WI.Color.fromString("magenta")});
            await checkFlexOverlayCount(1);

            InspectorTest.log("Requesting to show second flex overlay");
            await second.showLayoutOverlay({color: WI.Color.fromString("green")});
            await checkFlexOverlayCount(2);

            // No error should occur when hiding the first flex overlay.
            InspectorTest.log("Requesting to hide first flex overlay");
            await first.hideLayoutOverlay();
            await checkFlexOverlayCount(1);

            // No error should occur when hiding the second flex overlay.
            InspectorTest.log("Requesting to hide second flex overlay");
            await second.hideLayoutOverlay();
            await checkFlexOverlayCount(0);
        }
    });

    suite.addTestCase({
        name: "DOM.showFlexOverlay.HideAllOverlays",
        description: "No error occurs when repeatedly requesting to hide all flex overlays.",
        async test() {
            await checkFlexOverlayCount(0);
            let [first, second] = await getAllFlexContainerNodes();

            InspectorTest.log("Requesting to show first flex overlay");
            await first.showLayoutOverlay({color: WI.Color.fromString("magenta")});
            await checkFlexOverlayCount(1);

            InspectorTest.log("Requesting to show second flex overlay");
            await second.showLayoutOverlay({color: WI.Color.fromString("green")});
            await checkFlexOverlayCount(2);

            // No error should occur when hiding all flex overlays.
            InspectorTest.log("Requesting to hide all flex overlays.");
            await DOMAgent.hideFlexOverlay();
            await checkFlexOverlayCount(0);

            // No error should occur when hiding all flex overlays.
            InspectorTest.log("Requesting to hide all flex overlays again, expecting none to be cleared. Hiding all flex overlays is idempotent and should not throw an error.");
            await DOMAgent.hideFlexOverlay();
            await checkFlexOverlayCount(0);
        }
    });

    suite.addTestCase({
        name: "DOM.showFlexOverlay.HideBeforeShowShouldError",
        description: "Return an error when requesting to hide a flex overlay when none is active for the node.",
        async test() {
            let container = await getFlexContainerNode();

            await checkFlexOverlayCount(0);

            InspectorTest.log("Requesting to hide flex overlay for .flex-container");
            await InspectorTest.expectException(async () => {
                await DOMAgent.hideFlexOverlay(container.id);
            });

            InspectorTest.log("Requesting to hide all flex overlays. Hiding all flex overlays is idempotent and should not throw an error.");
            await DOMAgent.hideFlexOverlay();
            await checkFlexOverlayCount(0);
        }
    });

    suite.addTestCase({
        name: "DOM.showFlexOverlay.ForNonexistentNodeShouldError",
        description: "Return an error when requesting to show a flex overlay for a nonexistent node.",
        async test() {
            await checkFlexOverlayCount(0);

            InspectorTest.log("Requesting to show flex overlay for invalid nodeId -1");
            await InspectorTest.expectException(async () => {
                await DOMAgent.showFlexOverlay(-1, WI.Color.fromString("magenta").toProtocol());
            });

        await checkFlexOverlayCount(0);
        }
    });

    suite.runTestCasesAndFinish();
}
</script>
</head>
<body onload="runTest()">
    <style>
        body {
            margin: 100px;
        }
        .flex-container {
            display: flex;
            padding: 10px;
            background-color: lightgray;
        }

    </style>

    <p>Tests for the DOM.showFlexOverlay command.</p>
    <div class="flex-container"></div>
    <br />
    <div class="flex-container"></div>
</body>
</html>