| <!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> |
