LayoutTests/inspector/css/stylesheet-events-basic.html

<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function addExternalStyleSheet() {
    let link = document.createElement("link");
    link.id = "externalStyleSheetId";
    link.rel = "stylesheet";
    link.href = "resources/external.css";
    document.head.appendChild(link);
}

function removeExternalStyleSheet() {
    document.getElementById("externalStyleSheetId").remove();
}

function disableExternalStyleSheetViaMediaAttribute() {
    document.getElementById("externalStyleSheetId").media = "print";
}

function enableExternalStyleSheetViaMediaAttribute() {
    document.getElementById("externalStyleSheetId").media = "screen";
}

function addStyleTag() {
    let style = document.createElement("style");
    style.id = "inlineStyleId";
    style.textContent = "body { color: red; }";
    document.body.appendChild(style);
}

function removeStyleTag() {
    document.getElementById("inlineStyleId").remove();
}

function disableStyleSheet() {
    document.styleSheets[0].disabled = true;
}

function enableStyleSheet() {
    document.styleSheets[0].disabled = false;
}

function test()
{
    let suite = InspectorTest.createAsyncSuite("CSS.StyleSheetEvents.Basic");

    suite.addTestCase({
        name: "CheckNoStyleSheets",
        description: "Ensure there are currently no stylesheets.",
        test(resolve, reject) {
            InspectorTest.expectThat(WI.cssManager.styleSheets.length === 0, "Should be no stylesheets.");
            resolve();
        }
    });

    function appendStyleSheetTests(args) {
        let {title, addExpression, removeExpression, checkStyleSheetAddedCallback, checkStyleSheetRemovedCallback, extraEnableDisableTests} = args;

        let addedStyleSheet;

        suite.addTestCase({
            name: `Add${title}`,
            test(resolve, reject) {
                WI.cssManager.awaitEvent(WI.CSSManager.Event.StyleSheetAdded)
                .then((event) => {
                    addedStyleSheet = event.data.styleSheet;
                    InspectorTest.expectThat(addedStyleSheet instanceof WI.CSSStyleSheet, "StyleSheetAdded event should fire.");
                    if (checkStyleSheetRemovedCallback)
                        checkStyleSheetAddedCallback(addedStyleSheet);
                })
                .then(resolve, reject);

                InspectorTest.evaluateInPage(addExpression);
            }
        });

        suite.addTestCase({
            name: `Disable${title}`,
            description: "Disable the newly added stylesheet.",
            test(resolve, reject) {
                WI.cssManager.awaitEvent(WI.CSSManager.Event.StyleSheetRemoved)
                .then((event) => {
                    InspectorTest.assert(event.data.styleSheet instanceof WI.CSSStyleSheet, "Event data should be a CSSStyleSheet");
                    InspectorTest.expectThat(addedStyleSheet === event.data.styleSheet, "StyleSheetRemoved event should fire for the same CSSStyleSheet.");
                })
                .then(resolve, reject);

                InspectorTest.evaluateInPage("disableStyleSheet()");
            }
        });

        suite.addTestCase({
            name: `Enable${title}`,
            description: "Enable the just disabled stylesheet.",
            test(resolve, reject) {
                WI.cssManager.awaitEvent(WI.CSSManager.Event.StyleSheetAdded)
                .then((event) => {
                    InspectorTest.assert(event.data.styleSheet instanceof WI.CSSStyleSheet, "Event data should be a CSSStyleSheet");
                    InspectorTest.expectThat(addedStyleSheet !== event.data.styleSheet, "StyleSheetAdded event should fire with a new CSSStyleSheet.");
                    addedStyleSheet = event.data.styleSheet;
                })
                .then(resolve, reject);

                InspectorTest.evaluateInPage("enableStyleSheet()");
            }
        });

        if (extraEnableDisableTests) {
            let {title: extraDisableTitle, expression: extraDisableExpression} = extraEnableDisableTests.shift();
            let {title: extraEnableTitle, expression: extraEnableExpression} = extraEnableDisableTests.shift();

            suite.addTestCase({
                name: extraDisableTitle,
                test(resolve, reject) {
                    WI.cssManager.awaitEvent(WI.CSSManager.Event.StyleSheetRemoved)
                    .then((event) => {
                        InspectorTest.assert(event.data.styleSheet instanceof WI.CSSStyleSheet, "Event data should be a CSSStyleSheet");
                        InspectorTest.expectThat(addedStyleSheet === event.data.styleSheet, "StyleSheetRemoved event should fire for the same CSSStyleSheet.");
                    })
                    .then(resolve, reject);

                    InspectorTest.evaluateInPage(extraDisableExpression);
                }
            });

            suite.addTestCase({
                name: extraEnableTitle,
                test(resolve, reject) {
                    WI.cssManager.awaitEvent(WI.CSSManager.Event.StyleSheetAdded)
                    .then((event) => {
                        InspectorTest.assert(event.data.styleSheet instanceof WI.CSSStyleSheet, "Event data should be a CSSStyleSheet");
                        InspectorTest.expectThat(addedStyleSheet !== event.data.styleSheet, "StyleSheetAdded event should fire with a new CSSStyleSheet.");
                        addedStyleSheet = event.data.styleSheet;
                    })
                    .then(resolve, reject);

                    InspectorTest.evaluateInPage(extraEnableExpression);
                }
            });
        }

        suite.addTestCase({
            name: `Remove${title}`,
            test(resolve, reject) {
                WI.cssManager.awaitEvent(WI.CSSManager.Event.StyleSheetRemoved)
                .then((event) => {
                    InspectorTest.expectThat(event.data.styleSheet instanceof WI.CSSStyleSheet, "StyleSheetAdded event should fire.");
                    if (checkStyleSheetRemovedCallback)
                        checkStyleSheetRemovedCallback(event.data.styleSheet);
                    addedStyleSheet = null;
                })
                .then(resolve, reject);

                InspectorTest.evaluateInPage(removeExpression);
            }
        });
    }

    appendStyleSheetTests({
        title: "StyleTag",
        addExpression: "addStyleTag()",
        removeExpression: "removeStyleTag()",
    });

    appendStyleSheetTests({
        title: "ExternalStyleSheet",
        addExpression: "addExternalStyleSheet()",
        removeExpression: "removeExternalStyleSheet()",
        checkStyleSheetAddedCallback: (styleSheet) => { InspectorTest.log("Added StyleSheet with URL: " + sanitizeURL(styleSheet.url)); },
        checkStyleSheetRemovedCallback: (styleSheet) => { InspectorTest.log("Removed StyleSheet with URL: " + sanitizeURL(styleSheet.url)); },
        extraEnableDisableTests: [
            {title: "DisableExternalStyleSheetViaMediaAttribute", expression: "disableExternalStyleSheetViaMediaAttribute()"},
            {title: "EnableExternalStyleSheetViaMediaAttribute", expression: "enableExternalStyleSheetViaMediaAttribute()"},
        ],
    });

    suite.runTestCasesAndFinish();
}
</script>
</head>
<body onload="runTest()">
    <p>Test for CSS.styleSheetAdded and CSS.styleSheetRemoved events.</p>
</body>
</html>