Bug 1914850 - [devtools] Add test for editing declaration of layer-imported stylesheet. r=devtools-reviewers,ochameau.

Differential Revision: https://phabricator.services.mozilla.com/D220096

devtools/client/inspector/rules/test/browser_part2.toml

@@ -43,6 +43,7 @@ support-files = [
   "doc_imported_named_layer.css",
   "doc_imported_no_layer.css",
   "doc_inactive_css_xul.xhtml",
+  "doc_layer_edit.css",
   "head.js",
   "sjs_imported_stylesheet_edit.sjs",
   "square_svg.sjs",

devtools/client/inspector/rules/test/browser_rules_layer.js

@@ -113,3 +113,35 @@ add_task(async function () {
     }
   }
 });
+
+add_task(async function editStylesheetLayerRule() {
+  await addTab(
+    "https://example.com/document-builder.sjs?html=" +
+      encodeURIComponent(`
+        <link rel="stylesheet" href="${URL_ROOT_COM_SSL}doc_layer_edit.css">
+        <h1>Editing @layer stylesheet</h1>
+      `)
+  );
+
+  const { inspector, view } = await openRuleView();
+
+  info("Select h1 node");
+  await selectNode("h1", inspector);
+
+  is(
+    await getComputedStyleProperty("h1", null, "font-size"),
+    "20px",
+    "original font-size value for h1 is 20px"
+  );
+
+  const prop = getTextProperty(view, 1, { "font-size": "20px" });
+
+  info("Change font-size");
+  await setProperty(view, prop, "42px");
+
+  is(
+    await getComputedStyleProperty("h1", null, "font-size"),
+    "42px",
+    "h1 font-size was properly set"
+  );
+});

devtools/client/inspector/rules/test/doc_layer_edit.css

@@ -0,0 +1,2 @@
+@layer content;
+@import url("data:text/css,h1{font-size:20px}") layer(content);