diff --git a/devtools/server/actors/utils/inactive-property-helper.js b/devtools/server/actors/utils/inactive-property-helper.js index df33d77553f6..8fb2e78d5679 100644 --- a/devtools/server/actors/utils/inactive-property-helper.js +++ b/devtools/server/actors/utils/inactive-property-helper.js @@ -768,7 +768,10 @@ class InactivePropertyHelper { if (validator.invalidProperties) { isRuleConcerned = validator.invalidProperties.includes(property); } else if (validator.acceptedProperties) { - isRuleConcerned = !validator.acceptedProperties.has(property); + isRuleConcerned = + !validator.acceptedProperties.has(property) && + // custom properties can always be set + !property.startsWith("--"); } if (!isRuleConcerned) { diff --git a/devtools/server/tests/chrome/inactive-property-helper/cue-pseudo-element.mjs b/devtools/server/tests/chrome/inactive-property-helper/cue-pseudo-element.mjs index 7a554256329f..8e4f79292e79 100644 --- a/devtools/server/tests/chrome/inactive-property-helper/cue-pseudo-element.mjs +++ b/devtools/server/tests/chrome/inactive-property-helper/cue-pseudo-element.mjs @@ -368,4 +368,11 @@ export default [ isActive: false, expectedMsgId: "inactive-css-cue-pseudo-element-not-supported", }, + { + info: "custom property is active on ::cue", + property: "--my-var", + tagName: "video", + rules: ["video::cue { --my-var: red; }"], + isActive: true, + }, ]; diff --git a/devtools/server/tests/chrome/inactive-property-helper/highlight-pseudo-elements.mjs b/devtools/server/tests/chrome/inactive-property-helper/highlight-pseudo-elements.mjs index 05fbefeec562..5aea75aa469e 100644 --- a/devtools/server/tests/chrome/inactive-property-helper/highlight-pseudo-elements.mjs +++ b/devtools/server/tests/chrome/inactive-property-helper/highlight-pseudo-elements.mjs @@ -168,4 +168,12 @@ export default [ rules: ["span::target-text { background: red; }"], isActive: true, }, + { + // accept custom properties + info: "custom property is active on ::target-text", + property: "--my-var", + tagName: "span", + rules: ["span::target-text { -my-var: red; }"], + isActive: true, + }, ];