LayoutTests/inspector/css/nodeLayoutFlagsChanged-Rendered.html

<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test()
{
    let documentNode;

    let suite = InspectorTest.createAsyncSuite("CSS.nodeLayoutFlagsChanged.Rendered");

    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);
            },
        });
    }

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.Rendered.Existing.Direct.Display.None",
        description: "Test that existing nodes with `display: none` are not rendered.",
        selector: "#direct-display-none",
        async domNodeHandler(domNode) {
            InspectorTest.expectFalse(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should not render existing nodes with `display: none`.");
        },
    });

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.Rendered.Existing.Direct.Display.Block",
        description: "Test that existing nodes with `display: block` are rendered.",
        selector: "#direct-display-block",
        async domNodeHandler(domNode) {
            InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should render existing nodes with `display: block`.");
        },
    });

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.Rendered.Existing.Parent.Display.None",
        description: "Test that existing nodes that have a parent with `display: none` are not rendered.",
        selector: "#parent-display-none",
        async domNodeHandler(domNode) {
            InspectorTest.expectFalse(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should not render existing nodes that have a parent with `display: none`.");
        },
    });

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.Rendered.Existing.Parent.Display.Block",
        description: "Test that existing nodes that have a parent with with `display: block` are rendered.",
        selector: "#parent-display-block",
        async domNodeHandler(domNode) {
            InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should render existing nodes that have a parent with `display: block`.");
        },
    });

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.Rendered.New.Direct.Display.None",
        description: "Test that new nodes with `display: none` are not rendered.",
        selector: "#new-direct-display-none",
        async setup() {
            await InspectorTest.evaluateInPage(`document.body.insertAdjacentHTML("beforeend", "<div id='new-direct-display-none' style='display: none'></div>")`);
        },
        async domNodeHandler(domNode) {
            InspectorTest.expectFalse(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should not render new nodes with `display: none`.");
        },
    });

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.Rendered.New.Direct.Display.Block",
        description: "Test that new nodes with `display: block` are rendered.",
        selector: "#new-direct-display-block",
        async setup() {
            await InspectorTest.evaluateInPage(`document.body.insertAdjacentHTML("beforeend", "<div id='new-direct-display-block' style='display: block'></div>")`);
        },
        async domNodeHandler(domNode) {
            InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should render new nodes with `display: block`.");
        },
    });

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.Rendered.New.Direct.Display.None",
        description: "Test that new nodes that have a parent with `display: none` are not rendered.",
        selector: "#new-direct-display-none",
        async setup() {
            await InspectorTest.evaluateInPage(`document.body.insertAdjacentHTML("beforeend", "<div style='display: none'><div id='new-direct-display-none'></div></div>")`);
        },
        async domNodeHandler(domNode) {
            InspectorTest.expectFalse(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should not render new nodes that have a parent with `display: none`.");
        },
    });

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.Rendered.New.Direct.Display.Block",
        description: "Test that new nodes that have a parent with `display: block` are rendered.",
        selector: "#new-direct-display-block",
        async setup() {
            await InspectorTest.evaluateInPage(`document.body.insertAdjacentHTML("beforeend", "<div style='display: block'><div id='new-direct-display-block'></div></div>")`);
        },
        async domNodeHandler(domNode) {
            InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should render new nodes that have a parent with `display: block`.");
        },
    });

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.Rendered.Change.Direct.Display.None",
        description: "Test that nodes changed to `display: block` are rendered.",
        selector: "#direct-display-block",
        async domNodeHandler(domNode) {
            InspectorTest.assert(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should render existing nodes with `display: block`.");

            InspectorTest.log("Changing to `display: none`...");
            await Promise.all([
                domNode.awaitEvent(WI.DOMNode.Event.LayoutFlagsChanged),
                domNode.setAttributeValue("style", "display: none"),
            ]);
            InspectorTest.expectFalse(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should not render nodes changed to `display: none`.");
        },
    });

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.Rendered.Change.Direct.Display.Block",
        description: "Test that nodes changed to `display: none` are not rendered.",
        selector: "#direct-display-none",
        async domNodeHandler(domNode) {
            InspectorTest.assert(!domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should not render existing nodes with `display: none`.");

            InspectorTest.log("Changing to `display: block`...");
            await Promise.all([
                domNode.awaitEvent(WI.DOMNode.Event.LayoutFlagsChanged),
                domNode.setAttributeValue("style", "display: block"),
            ]);
            InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should render nodes changed to `display: block`.");
        },
    });

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.Rendered.Change.Parent.Display.None",
        description: "Test that nodes that have a parent changed to `display: block` are rendered.",
        selector: "#parent-display-block",
        async domNodeHandler(domNode) {
            InspectorTest.assert(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should render existing nodes that have a parent with `display: block`.");

            InspectorTest.log("Changing to `display: none`...");
            await Promise.all([
                domNode.awaitEvent(WI.DOMNode.Event.LayoutFlagsChanged),
                domNode.parentNode.setAttributeValue("style", "display: none"),
            ]);
            InspectorTest.expectFalse(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should not render nodes that have a parent changed to `display: none`.");
        },
    });

    addTestCase({
        name: "CSS.nodeLayoutFlagsChanged.Rendered.Change.Parent.Display.Block",
        description: "Test that nodes that have a parent changed to `display: none` are not rendered.",
        selector: "#parent-display-none",
        async domNodeHandler(domNode) {
            InspectorTest.assert(!domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should not render existing nodes that have a parent with `display: none`.");

            InspectorTest.log("Changing to `display: block`...");
            await Promise.all([
                domNode.awaitEvent(WI.DOMNode.Event.LayoutFlagsChanged),
                domNode.parentNode.setAttributeValue("style", "display: block"),
            ]);
            InspectorTest.expectTrue(domNode.layoutFlags.includes(WI.DOMNode.LayoutFlag.Rendered), "Should render nodes that have a parent changed to `display: block`.");
        },
    });

    WI.domManager.requestDocument().then((doc) => {
        documentNode = doc;
        suite.runTestCasesAndFinish();
    });
}
</script>
</head>
<body onload="runTest()">
    <p>Tests for the CSS.nodeLayoutFlagsChanged event with the Rendered enum.</p>

    <div id="direct-display-none" style="display: none"></div>
    <div id="direct-display-block" style="display: block"></div>

    <div style="display: none"><div id="parent-display-none"></div></div>
    <div style="display: block"><div id="parent-display-block"></div></div>
</body>
</html>