LayoutTests/inspector/css/nodeLayoutFlagsChanged-SlotFilled.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.SlotFilled");

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

                let containerNodeId = await documentNode.querySelector(selector);
                let containerNode = WI.domManager.nodeForId(containerNodeId);
                InspectorTest.assert(containerNode, `Should find DOM Node for selector '${selector}'.`);

                let slotNodeId = await containerNode.shadowRoots()[0].querySelector("slot");
                let slotNode = WI.domManager.nodeForId(slotNodeId);
                InspectorTest.assert(slotNode, `Should find <slot> inside DOM Node for selector '${selector}'.`);

                await domNodeHandler(slotNode);
            },
        });
    }

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

            InspectorTest.log("Changing slot of child...");
            await Promise.all([
                domNode.awaitEvent(WI.DOMNode.Event.LayoutFlagsChanged),
                InspectorTest.evaluateInPage(`document.querySelector("#named-empty-1").slot = "test-slot"`),
            ]);
            InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should be filled.");

            let listener = domNode.addEventListener(WI.DOMNode.Event.LayoutFlagsChanged, (event) => {
                InspectorTest.fail("Should not change layout flags.");
            });

            InspectorTest.log("Adding child with slot...");
            await InspectorTest.evaluateInPage(`document.querySelector("#named-empty").appendChild(document.querySelector("#named-empty-2"))`);
            InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should be filled.");

            domNode.removeEventListener(WI.DOMNode.Event.LayoutFlagsChanged, listener);
        },
    });

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

            let listener = domNode.addEventListener(WI.DOMNode.Event.LayoutFlagsChanged, (event) => {
                InspectorTest.fail("Should not change layout flags.");
            });

            InspectorTest.log("Removing first assigned node...");
            await InspectorTest.evaluateInPage(`document.querySelector("#named-filled-1").remove()`);
            InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should be filled.");

            domNode.removeEventListener(WI.DOMNode.Event.LayoutFlagsChanged, listener);

            InspectorTest.log("Removing last assigned node...");
            await Promise.all([
                domNode.awaitEvent(WI.DOMNode.Event.LayoutFlagsChanged),
                InspectorTest.evaluateInPage(`document.querySelector("#named-filled-2").slot = "invalid-slot"`),
            ]);
            InspectorTest.expectFalse(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should not be filled.");
        },
    });

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

            InspectorTest.log("Adding second child as assigned node...");
            await Promise.all([
                domNode.awaitEvent(WI.DOMNode.Event.LayoutFlagsChanged),
                InspectorTest.evaluateInPage(`document.querySelector("#manual-empty").assign(document.querySelector("#manual-empty-2"))`),
            ]);
            InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should be filled.");

            let listener = domNode.addEventListener(WI.DOMNode.Event.LayoutFlagsChanged, (event) => {
                InspectorTest.fail("Should not change layout flags.");
            });

            InspectorTest.log("Adding first child as assigned node...");
            await InspectorTest.evaluateInPage(`document.querySelector("#manual-empty").assign(...document.querySelectorAll("#manual-empty > span"))`);
            InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should be filled.");

            domNode.removeEventListener(WI.DOMNode.Event.LayoutFlagsChanged, listener);
        },
    });

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

            let listener = domNode.addEventListener(WI.DOMNode.Event.LayoutFlagsChanged, (event) => {
                InspectorTest.fail("Should not change layout flags.");
            });

            InspectorTest.log("Removing first assigned node...");
            await InspectorTest.evaluateInPage(`document.querySelector("#manual-filled").assign(document.querySelector("#manual-filled-2"))`);
            InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.SlotFilled), "Should be filled.");

            domNode.removeEventListener(WI.DOMNode.Event.LayoutFlagsChanged, listener);

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

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

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

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

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

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