blob: 669a20c1d99711ea0d582d940ce9e2a6e531bcf2 [file] [log] [blame]
<!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>