LayoutTests/inspector/css/node-styles-refreshed.html

<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function removeRemovableNode()
{
    window.__removableNode = document.getElementById("removable-node");
    window.__removableNode.remove();
}

function test()
{
    let suite = InspectorTest.createAsyncSuite("NodeStylesRefreshed");

    async function nodeStylesForSelector(selector) {
        let documentNode = await WI.domManager.requestDocument();
        let nodeId = await documentNode.querySelector(selector);
        let node = WI.domManager.nodeForId(nodeId);

        let nodeStyles = WI.cssManager.stylesForNode(node);
        await nodeStyles.refreshIfNeeded();

        return nodeStyles;
    }

    suite.addTestCase({
        name: "NodeStylesRefreshed.ClassAdded",
        async test() {
            let nodeStyles = await nodeStylesForSelector("body");

            nodeStyles.singleFireEventListener(WI.DOMNodeStyles.Event.Refreshed, (event) => {
                InspectorTest.expectTrue(event.data.significantChange, `Adding '.baz' class should cause a significant change.`);
            });

            InspectorTest.evaluateInPage(`document.body.classList.add("baz")`);
            await nodeStyles.refresh();
        }
    });

    suite.addTestCase({
        name: "NodeStylesRefreshed.ClassRemoved",
        async test() {
            let nodeStyles = await nodeStylesForSelector("body");

            nodeStyles.singleFireEventListener(WI.DOMNodeStyles.Event.Refreshed, (event) => {
                InspectorTest.expectTrue(event.data.significantChange, `Removing '.foo' class should cause a significant change.`);
            });

            InspectorTest.evaluateInPage(`document.body.classList.remove("foo")`);
            await nodeStyles.refresh();
        }
    });

    suite.addTestCase({
        name: "NodeStylesRefreshed.IrrelevantClassAdded",
        async test() {
            let nodeStyles = await nodeStylesForSelector("body");

            nodeStyles.singleFireEventListener(WI.DOMNodeStyles.Event.Refreshed, (event) => {
                InspectorTest.expectFalse(event.data.significantChange, `Adding '.blah' class shouldn't cause a significant change.`);
            });

            InspectorTest.evaluateInPage(`document.body.classList.add("blah")`);
            await nodeStyles.refresh();
        }
    });

    suite.addTestCase({
        name: "NodeStylesRefreshed.IrrelevantClassRemoved",
        async test() {
            let nodeStyles = await nodeStylesForSelector("body");

            nodeStyles.singleFireEventListener(WI.DOMNodeStyles.Event.Refreshed, (event) => {
                InspectorTest.expectFalse(event.data.significantChange, `Removing '.blah' class shouldn't cause a significant change.`);
            });

            InspectorTest.evaluateInPage(`document.body.classList.remove("blah")`);
            await nodeStyles.refresh();
        }
    });

    suite.addTestCase({
        name: "NodeStylesRefreshed.DisconnectedNode",
        description: "Ensure that changing the style of a disconnected node does not crash.",
        async test() {
            let nodeStyles = await nodeStylesForSelector("#removable-node");

            nodeStyles.singleFireEventListener(WI.DOMNodeStyles.Event.Refreshed, (event) => {
                InspectorTest.expectFalse(event.data.significantChange, `Refreshing styles of an unchanged node should not be a significant change.`);
            });

            InspectorTest.log("Refreshing styles before removal.")
            await nodeStyles.refresh();

            nodeStyles.singleFireEventListener(WI.DOMNodeStyles.Event.Refreshed, (event) => {
                InspectorTest.expectTrue(event.data.significantChange, `Refreshing styles of a now detached node should be a significant change.`);
            });

            InspectorTest.log("Removing node from DOM tree.")
            InspectorTest.evaluateInPage(`removeRemovableNode();`);

            InspectorTest.log("Refreshing styles after removal.")
            await nodeStyles.refresh();
        }
    });

    suite.runTestCasesAndFinish();

}
</script>
</head>
<body onLoad="runTest()" class="foo bar">
<p>Testing that WI.DOMNodeStyles.Event.Refreshed event dispatches with correct significantChange flag.</p>
<div id="removable-node" class="foo bar"></div>
<style>
.foo {font-size: 12px;}
.bar {background: lightyellow;}
.baz {color: darkgreen;}
</style>
</body>
</html>