LayoutTests/inspector/css/nodeLayoutFlagsChanged-SlotAssigned.html

<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
customElements.define("test-element", class TestElement extends HTMLElement {
    connectedCallback() {
        let shadowRoot = this.attachShadow({
            mode: "open",
            slotAssignment: this.id.substring(0, this.id.indexOf("-")),
        });

        this._slotElement = shadowRoot.appendChild(document.createElement("slot"));
        this._slotElement.name = "test-slot";
    }

    assign(...nodes) {
        this._slotElement.assign(...nodes);
    }
});

function test()
{
    let suite = InspectorTest.createAsyncSuite("CSS.nodeLayoutFlagsChanged.SlotAssigned");

    function addTestCase({name, selector, domNodeHandler})
    {
        suite.addTestCase({
            name,
            async test() {
                let documentNode = await WI.domManager.requestDocument();

                let childNodeId = await documentNode.querySelector(selector + "-child");
                let childNode = WI.domManager.nodeForId(childNodeId);
                InspectorTest.assert(childNode, `Should find DOM Node for selector '${selector}-child'.`);

                await domNodeHandler(childNode);
            },
        });
    }

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.SlotAssigned.Named.Empty",
        selector: "#named-empty",
        async domNodeHandler(childNode) {
            InspectorTest.expectFalse(childNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotAssigned), "Should not be slotted.");

            InspectorTest.log("Adding slot...");
            await Promise.all([
                childNode.awaitEvent(WI.DOMNode.Event.LayoutFlagsChanged),
                InspectorTest.evaluateInPage(`document.querySelector("#named-empty-child").slot = "test-slot"`),
            ]);
            InspectorTest.expectTrue(childNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotAssigned), "Should be slotted.");
        },
    });

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.SlotAssigned.Named.Filled",
        selector: "#named-filled",
        async domNodeHandler(childNode) {
            InspectorTest.expectTrue(childNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotAssigned), "Should be slotted.");

            InspectorTest.log("Removing slot...");
            await Promise.all([
                childNode.awaitEvent(WI.DOMNode.Event.LayoutFlagsChanged),
                InspectorTest.evaluateInPage(`document.querySelector("#named-filled-child").slot = "invalid-slot"`),
            ]);
            InspectorTest.expectFalse(childNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotAssigned), "Should not be slotted.");
        },
    });

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.SlotAssigned.Manual.Empty",
        selector: "#manual-empty",
        async domNodeHandler(childNode) {
            InspectorTest.expectFalse(childNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotAssigned), "Should not be slotted.");

            InspectorTest.log("Adding assigned node...");
            await Promise.all([
                childNode.awaitEvent(WI.DOMNode.Event.LayoutFlagsChanged),
                InspectorTest.evaluateInPage(`document.querySelector("#manual-empty").assign(document.querySelector("#manual-empty-child"))`),
            ]);
            InspectorTest.expectTrue(childNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotAssigned), "Should be slotted.");
        },
    });

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.SlotAssigned.Manual.Filled",
        selector: "#manual-filled",
        async domNodeHandler(childNode) {
            InspectorTest.expectTrue(childNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotAssigned), "Should be slotted.");

            InspectorTest.log("Removing assigned node...");
            await Promise.all([
                childNode.awaitEvent(WI.DOMNode.Event.LayoutFlagsChanged),
                InspectorTest.evaluateInPage(`document.querySelector("#manual-filled").assign()`),
            ]);
            InspectorTest.expectFalse(childNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotAssigned), "Should not be slotted.");
        },
    });

    suite.runTestCasesAndFinish();
}
</script>
</head>
<body onload="runTest()">
    <test-element id="named-empty">
        <span slot="invalid-slot" id="named-empty-child"></span>
    </test-element>

    <test-element id="named-filled">
        <span slot="test-slot" id="named-filled-child"></span>
    </test-element>

    <test-element id="manual-empty">
        <span slot="test-slot" id="manual-empty-child"></span>
    </test-element>

    <test-element id="manual-filled">
        <span slot="invalid-slot" id="manual-filled-child"></span>
    </test-element>

    <script>
        document.querySelector("#manual-filled").assign(document.querySelector("#manual-filled-child"));
    </script>
</body>
</html>