commit b986356fea3bdc937246031f8d7c04c030f56458 parent 2fed715f7f0300ebdea0b1c1e8ebd870e702456f Author: Nicolas Chevobbe <nchevobbe@mozilla.com> Date: Tue, 4 Nov 2025 14:39:00 +0000 Bug 1997514 - [devtools] Add inherited expected data in checkRuleViewContent. r=devtools-reviewers,jdescottes. Differential Revision: https://phabricator.services.mozilla.com/D270806 Diffstat:
5 files changed, 39 insertions(+), 11 deletions(-)
diff --git a/devtools/client/inspector/rules/test/browser_rules_attributes-style.js b/devtools/client/inspector/rules/test/browser_rules_attributes-style.js @@ -61,6 +61,7 @@ add_task(async function () { }, { selector: "element attributes style", + inherited: true, declarations: [{ name: "text-align", value: "-moz-center" }], }, ]); @@ -82,6 +83,7 @@ add_task(async function () { }, { selector: "element attributes style", + inherited: true, declarations: [ { name: "text-align", value: "-moz-center", overridden: true }, ], @@ -105,6 +107,7 @@ add_task(async function () { }, { selector: "element attributes style", + inherited: true, declarations: [ { name: "text-align", value: "-moz-center", overridden: true }, ], diff --git a/devtools/client/inspector/rules/test/browser_rules_content_02.js b/devtools/client/inspector/rules/test/browser_rules_content_02.js @@ -41,6 +41,7 @@ add_task(async function () { }, { selector: "element", + inherited: true, declarations: [ { name: "color", @@ -54,6 +55,7 @@ add_task(async function () { }, { selector: "element", + inherited: true, declarations: [ { name: "color", @@ -67,6 +69,7 @@ add_task(async function () { }, { selector: "element", + inherited: true, declarations: [ { name: "color", diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_02.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_02.js @@ -50,6 +50,7 @@ add_task(async function () { { selector: `*`, ancestorRulesData: null, + inherited: true, declarations: [{ name: "cursor", value: "default" }], }, { @@ -58,6 +59,7 @@ add_task(async function () { { selector: `body`, ancestorRulesData: null, + inherited: true, declarations: [{ name: "color", value: "#333" }], }, ]); @@ -93,6 +95,7 @@ add_task(async function () { { selector: `*`, ancestorRulesData: null, + inherited: true, declarations: [{ name: "cursor", value: "default" }], }, { @@ -101,6 +104,7 @@ add_task(async function () { { selector: `body`, ancestorRulesData: null, + inherited: true, declarations: [{ name: "color", value: "#333" }], }, ]); @@ -144,6 +148,7 @@ add_task(async function () { { selector: `*`, ancestorRulesData: null, + inherited: true, declarations: [{ name: "cursor", value: "default" }], }, { @@ -152,6 +157,7 @@ add_task(async function () { { selector: `body`, ancestorRulesData: null, + inherited: true, declarations: [{ name: "color", value: "#333", overridden: true }], }, ]); @@ -182,6 +188,7 @@ add_task(async function () { { selector: `*`, ancestorRulesData: null, + inherited: true, declarations: [{ name: "cursor", value: "default" }], }, { @@ -190,6 +197,7 @@ add_task(async function () { { selector: `body`, ancestorRulesData: null, + inherited: true, declarations: [{ name: "color", value: "#333", overridden: true }], }, ]); @@ -220,6 +228,7 @@ add_task(async function () { { selector: `*`, ancestorRulesData: null, + inherited: true, declarations: [{ name: "cursor", value: "default" }], }, { @@ -228,6 +237,7 @@ add_task(async function () { { selector: `body`, ancestorRulesData: null, + inherited: true, declarations: [{ name: "color", value: "#333" }], }, ]); diff --git a/devtools/client/inspector/rules/test/browser_rules_variables-jump-to-definition.js b/devtools/client/inspector/rules/test/browser_rules_variables-jump-to-definition.js @@ -356,6 +356,7 @@ add_task(async function checkClearSearch() { }, { selector: ":root", + inherited: true, declarations: [{ name: "--my-color-1", value: "tomato" }], }, ]); diff --git a/devtools/client/inspector/rules/test/head.js b/devtools/client/inspector/rules/test/head.js @@ -1363,9 +1363,9 @@ function getSmallIncrementKey() { * Check that the rule view has the expected content * * @param {RuleView} view - * @param {Object[]} expectedElements - * @param {String} expectedElements[].selector - The expected selector of the rule. - * @param {String[]|null} expectedElements[].ancestorRulesData - An array of the parent + * @param {object[]} expectedElements + * @param {string} expectedElements[].selector - The expected selector of the rule. + * @param {string[]|null} expectedElements[].ancestorRulesData - An array of the parent * selectors of the rule, with their indentations and the opening brace. * e.g. for the following rule `html { body { span {} } }`, for the `span` rule, * you should pass: @@ -1374,19 +1374,21 @@ function getSmallIncrementKey() { * ` & body {`, * ] * Pass `null` if the rule doesn't have a parent rule. - * @param {Object[]} expectedElements[].declarations - The expected declarations of the rule. - * @param {Object[]} expectedElements[].declarations[].name - The name of the declaration. - * @param {Object[]} expectedElements[].declarations[].value - The value of the declaration. - * @param {Boolean|undefined} expectedElements[].declarations[].overridden - Is the declaration + * @param {boolean|undefined} expectedElements[].inherited - Is the rule an inherited one. + * Defaults to false. + * @param {object[]} expectedElements[].declarations - The expected declarations of the rule. + * @param {object[]} expectedElements[].declarations[].name - The name of the declaration. + * @param {object[]} expectedElements[].declarations[].value - The value of the declaration. + * @param {boolean|undefined} expectedElements[].declarations[].overridden - Is the declaration * overridden by another the declaration. Defaults to false. - * @param {Boolean|undefined} expectedElements[].declarations[].valid - Is the declaration valid. + * @param {boolean|undefined} expectedElements[].declarations[].valid - Is the declaration valid. * Defaults to true. - * @param {Boolean|undefined} expectedElements[].declarations[].dirty - Is the declaration dirty, + * @param {boolean|undefined} expectedElements[].declarations[].dirty - Is the declaration dirty, * i.e. was it added/modified by the user (should have a left green border). * Defaults to false - * @param {Boolean|undefined} expectedElements[].declarations[].highlighted - Is the declaration + * @param {boolean|undefined} expectedElements[].declarations[].highlighted - Is the declaration * highlighted by a search. - * @param {String} expectedElements[].header - If we're expecting a header (Inherited from, + * @param {string} expectedElements[].header - If we're expecting a header (Inherited from, * Pseudo-elements, …), the text of said header. */ function checkRuleViewContent(view, expectedElements) { @@ -1439,6 +1441,15 @@ function checkRuleViewContent(view, expectedElements) { ); } + const isInherited = elementInView.matches( + ".ruleview-header-inherited ~ .ruleview-rule" + ); + is( + isInherited, + expectedElement.inherited ?? false, + `Element #${i} (${selector}) is ${expectedElement.inherited ? "inherited" : "not inherited"}` + ); + const declarations = elementInView.querySelectorAll(".ruleview-property"); is( declarations.length,