commit 7392283b7e45201309878b5a48c02c87d0b6b7d8
parent cd5f760648eced05bd41edb619bc8cc6b412d1e0
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Fri, 17 Oct 2025 10:54:09 +0000
Bug 1994939 - [devtools] Add test for editing shadow DOM constructed rule. r=devtools-reviewers,jdescottes.
Differential Revision: https://phabricator.services.mozilla.com/D269007
Diffstat:
2 files changed, 49 insertions(+), 0 deletions(-)
diff --git a/devtools/client/inspector/rules/test/browser_rules_cssom.js b/devtools/client/inspector/rules/test/browser_rules_cssom.js
@@ -46,4 +46,42 @@ add_task(async function () {
const newProp = getTextProperty(view, 1, { color: "red" });
ok(!!newProp, "Rule is still visible after updating it");
+
+ info("Check that updating cssom declaration in shadow DOM works");
+ // Testing Bug 1986702
+ const shadowDomH2NodeFront = await getNodeFrontInShadowDom(
+ "h2",
+ "#host",
+ inspector
+ );
+ await selectNode(shadowDomH2NodeFront, inspector);
+
+ const shadowDomH2ColorProp = getTextProperty(view, 1, { color: "tomato" });
+ await setProperty(view, shadowDomH2ColorProp, "blue");
+
+ const shadowDomH2Color = await SpecialPowers.spawn(
+ gBrowser.selectedBrowser,
+ [],
+ () => {
+ return content
+ .getComputedStyle(
+ content.document.getElementById("host").shadowRoot.querySelector("h2")
+ )
+ .getPropertyValue("color");
+ }
+ );
+ is(
+ shadowDomH2Color,
+ "rgb(0, 0, 255)",
+ "shadow DOM h2 element color was properly updated"
+ );
+
+ info(
+ "Select another node and re-select shadow DOM h2 node to update the rule view"
+ );
+ await selectNode("body", inspector);
+ await selectNode(shadowDomH2NodeFront, inspector);
+
+ const updatedShadowDomH2Prop = getTextProperty(view, 1, { color: "blue" });
+ ok(!!updatedShadowDomH2Prop, "Rule is still visible after updating it");
});
diff --git a/devtools/client/inspector/rules/test/doc_cssom.html b/devtools/client/inspector/rules/test/doc_cssom.html
@@ -12,6 +12,16 @@
// Add a rule with a leading newline, to test that inspector can handle it.
x.insertRule("\ndiv { font-weight: bold; }", 1);
+
+ // Add a shadow dom root and a h2 element inside it
+ const shadow = document.getElementById("host").attachShadow({ mode: "open" });
+ const shadowEl = document.createElement("h2");
+ shadowEl.textContent = "Hello from the shadow DOM";
+ shadow.appendChild(shadowEl);
+
+ const shadowDomStyleSheet = new CSSStyleSheet();
+ shadowDomStyleSheet.insertRule("h2 { color: tomato; background-color: gold;}");
+ shadow.adoptedStyleSheets = [shadowDomStyleSheet];
};
</script>
@@ -21,5 +31,6 @@
</head>
<body>
<div id="target"> the ocean </div>
+ <div id="host"></div>
</body>
</html>
