| <html> |
| <head> |
| <link rel="stylesheet" href="resources/modify-with-cssom.css"> |
| <script src="../../http/tests/inspector/resources/protocol-test.js"></script> |
| <script> |
| function test() { |
| let suite = ProtocolTest.createAsyncSuite("ModifyWithCSSOM"); |
| |
| const dumpAuthorStylesForBodyElement = async () => { |
| // Due to https://webkit.org/b/270864, CSSOM modifications aren't reflected until the CSS agent is re-enabled. |
| // (After re-enabling, the styles must still be in the latest state, matching the CSSOM modifications.) |
| await InspectorProtocol.awaitCommand({ method: "CSS.disable" }); |
| await InspectorProtocol.awaitCommand({ method: "CSS.enable" }); |
| |
| let { root } = await InspectorProtocol.awaitCommand({ method: "DOM.getDocument" }); |
| let body = await InspectorProtocol.awaitCommand({ |
| method: "DOM.querySelector", |
| params: { nodeId: root.nodeId, selector: "body" }, |
| }); |
| |
| const getAuthorRulesForElement = async (element) => { |
| let { matchedCSSRules } = await InspectorProtocol.awaitCommand({ |
| method: "CSS.getMatchedStylesForNode", |
| params: { nodeId: element.nodeId }, |
| }); |
| return matchedCSSRules |
| .map(({ rule }) => rule) |
| .filter((rule) => rule.origin === "author"); |
| }; |
| |
| const filteredValueReplacer = (key, value) => { |
| if (["ruleId", "styleId", "sourceURL"].includes(key)) |
| return "<filtered>"; |
| return value; |
| }; |
| |
| ProtocolTest.json(await getAuthorRulesForElement(body), filteredValueReplacer); |
| }; |
| |
| suite.addTestCase({ |
| name: "CSS.getMatchedStylesForNode with CSSOM modifications", |
| description: "Test that CSS.getMatchedStylesForNode works after CSSOM modifies an existing style sheet, by editing, adding, or removing a style rule", |
| test: async () => { |
| await InspectorProtocol.awaitCommand({ method: "Page.enable" }); |
| |
| await ProtocolTest.evaluateInPage(`document.styleSheets[0].cssRules[0].style.color = "blue";`); |
| ProtocolTest.log("After modifying a style rule in place:") |
| await dumpAuthorStylesForBodyElement(); |
| |
| ProtocolTest.log(""); |
| await ProtocolTest.evaluateInPage(`document.styleSheets[0].insertRule("body { font-size: 17px; }", 0)`); |
| ProtocolTest.log("After adding a style rule:"); |
| await dumpAuthorStylesForBodyElement(); |
| |
| ProtocolTest.log(""); |
| await ProtocolTest.evaluateInPage(`document.styleSheets[0].deleteRule(1);`); |
| ProtocolTest.log("After removing a style rule:"); |
| await dumpAuthorStylesForBodyElement(); |
| }, |
| }); |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| </head> |
| |
| <body onload="runTest()"> |
| <p>Test that the CSS.getMatchedStylesForNode command works with CSSOM modified styles.</p> |
| </body> |
| |
| </html> |
