1 files changed, 20 insertions, 2 deletions
diff --git a/devtools/shared/commands/resource/tests/browser_resources_stylesheets.js b/devtools/shared/commands/resource/tests/browser_resources_stylesheets.js
index ec81e8118d..6c4f2e867a 100644
--- a/devtools/shared/commands/resource/tests/browser_resources_stylesheets.js
+++ b/devtools/shared/commands/resource/tests/browser_resources_stylesheets.js
@@ -118,6 +118,8 @@ const ADDITIONAL_FROM_ACTOR_RESOURCE = {
 };
 
 add_task(async function () {
+  // Enable @property
+  await pushPref("layout.css.properties-and-values.enabled", true);
   await testResourceAvailableDestroyedFeature();
   await testResourceUpdateFeature();
   await testNestedResourceUpdateFeature();
@@ -496,13 +498,18 @@ async function testNestedResourceUpdateFeature() {
           }
         }
       }
+    }
+    @property --my-property {
+      syntax: "<color>";
+      inherits: true;
+      initial-value: #f06;
     }`,
     false
   );
   await waitUntil(() => updates.length === 3);
   is(
     updates.at(-1).resource.ruleCount,
-    7,
+    8,
     "Resource in update has expected ruleCount"
   );
 
@@ -554,6 +561,10 @@ async function testNestedResourceUpdateFeature() {
       type: "container",
       conditionText: "root (width > 10px)",
     },
+    {
+      type: "property",
+      propertyName: "--my-property",
+    },
   ];
 
   assertAtRules(targetUpdate.resource.atRules, expectedAtRules);
@@ -562,7 +573,7 @@ async function testNestedResourceUpdateFeature() {
   const styleSheetResult = await getStyleSheetResult(tab);
   is(
     styleSheetResult.ruleCount,
-    7,
+    8,
     "ruleCount of actual stylesheet is updated correctly"
   );
   assertAtRules(styleSheetResult.atRules, expectedAtRules);
@@ -620,6 +631,11 @@ async function getStyleSheetResult(tab) {
             type: "support",
             conditionText: rule.conditionText,
           });
+        } else if (rule instanceof content.CSSPropertyRule) {
+          atRules.push({
+            type: "property",
+            propertyName: rule.name,
+          });
         }
 
         if (rule.cssRules) {
@@ -655,6 +671,8 @@ function assertAtRules(atRules, expectedAtRules) {
       is(atRule.matches, expected.matches, "matches is correct");
     } else if (expected.type === "layer") {
       is(atRule.layerName, expected.layerName, "layerName is correct");
+    } else if (expected.type === "property") {
+      is(atRule.propertyName, expected.propertyName, "propertyName is correct");
     }
 
     if (expected.line !== undefined) {