blob: 92718729b19222f91ff2128693ec0fce870752d1 [file] [log] [blame]
<!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.cssStyleManager.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.cssStyleManager.awaitEvent(WI.CSSStyleManager.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.cssStyleManager.awaitEvent(WI.CSSStyleManager.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.cssStyleManager.awaitEvent(WI.CSSStyleManager.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.cssStyleManager.awaitEvent(WI.CSSStyleManager.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.cssStyleManager.awaitEvent(WI.CSSStyleManager.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.cssStyleManager.awaitEvent(WI.CSSStyleManager.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>