<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<style id="inlineStyleId">
@import url(resources/import-level-1.css);
body { color: blue; }
</style>
<script>
function disableStyleSheet() {
    document.styleSheets[0].disabled = true;
}

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

function removeImport() {
    document.getElementById("inlineStyleId").sheet.deleteRule(0);
}

function test()
{
    function collectEvents(n, then) {
        let remaining = n;
        let collection = [];
        return function(event) {
            collection.push(event);
            remaining--;
            if (!remaining)
                then(collection);
        }
    }

    let currentStyleSheetAddedHandler, currentStyleSheetRemovedHandler;
    WI.cssStyleManager.addEventListener(WI.CSSStyleManager.Event.StyleSheetAdded, (event) => { currentStyleSheetAddedHandler(event); });
    WI.cssStyleManager.addEventListener(WI.CSSStyleManager.Event.StyleSheetRemoved, (event) => { currentStyleSheetRemovedHandler(event); });

    let suite = InspectorTest.createAsyncSuite("CSS.StyleSheetEvents.Imports");

    suite.addTestCase({
        name: "CheckStyleSheets",
        description: "Ensure there are currently two stylesheets.",
        test(resolve, reject) {
            let styleSheets = WI.cssStyleManager.styleSheets;
            InspectorTest.expectThat(styleSheets.length === 3, "Should be 3 stylesheets.");
            for (let styleSheet of styleSheets)
                InspectorTest.log(sanitizeURL(styleSheet.url));
            resolve();
        }
    });

    suite.addTestCase({
        name: "DisablePropagatesThroughImports",
        description: "Disabling the top stylesheet containing imports will remove all stylesheets.",
        test(resolve, reject) {
            currentStyleSheetRemovedHandler = collectEvents(3, function(events) {
                events.map((e) => sanitizeURL(e.data.styleSheet.url))
                    .sort()
                    .forEach((url) => { InspectorTest.log("StyleSheetRemoved: " + url); });
                currentStyleSheetRemovedHandler = null;
                resolve();
            });
            InspectorTest.evaluateInPage("disableStyleSheet()");
        }
    });

    suite.addTestCase({
        name: "EnablePropagatesThroughImports",
        description: "Enabling the top stylesheet containing imports will add all stylesheets.",
        test(resolve, reject) {
            currentStyleSheetAddedHandler = collectEvents(3, function(events) {
                events.map((e) => sanitizeURL(e.data.styleSheet.url))
                    .sort()
                    .forEach((url) => { InspectorTest.log("StyleSheetAdded: " + url); });
                currentStyleSheetAddedHandler = null;
                resolve();
            });
            InspectorTest.evaluateInPage("enableStyleSheet()");
        }
    });

    suite.addTestCase({
        name: "DeleteImportRemovesStyleSheet",
        description: "Deleting the @import rule should remove that stylesheet and its imports.",
        test(resolve, reject) {
            currentStyleSheetRemovedHandler = collectEvents(2, function(events) {
                events.map((e) => sanitizeURL(e.data.styleSheet.url))
                    .sort()
                    .forEach((url) => { InspectorTest.log("StyleSheetRemoved: " + url); });
                currentStyleSheetRemovedHandler = null;
                resolve();
            });
            InspectorTest.evaluateInPage("removeImport()");
        }
    });

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