commit 4e64d65b0b2e2a2dac151ffaad6f6b455c69a53c
parent 0ba95c5f0a5056f7b3ca5a00a809395fbc240299
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Wed, 3 Dec 2025 07:06:06 +0000
Bug 1895193 - [devtools] Don't consider self alignment properties inactive for absolutely positioned elements. r=devtools-reviewers,fluent-reviewers,bolsson,ochameau
Differential Revision: https://phabricator.services.mozilla.com/D274560
Diffstat:
4 files changed, 86 insertions(+), 4 deletions(-)
diff --git a/devtools/client/locales/en-US/tooltips.ftl b/devtools/client/locales/en-US/tooltips.ftl
@@ -25,6 +25,8 @@ inactive-css-column-span = <strong>{ $property }</strong> has no spanning effect
inactive-css-not-grid-or-flex-item = <strong>{ $property }</strong> has no effect on this element since it’s not a grid or flex item.
+inactive-css-not-grid-or-flex-or-absolutely-positioned-item = <strong>{ $property }</strong> has no effect on this element since it’s not a grid or flex item, nor an absolutely positioned element.
+
inactive-css-not-grid-item = <strong>{ $property }</strong> has no effect on this element since it’s not a grid item.
inactive-css-not-grid-container = <strong>{ $property }</strong> has no effect on this element since it’s not a grid container.
@@ -116,6 +118,8 @@ inactive-css-not-multicol-container-fix = Try adding either <strong>column-count
inactive-css-column-span-fix = Try adding <strong>column-count</strong> or <strong>column-width</strong> to one of its ancestor elements. { learn-more }
+inactive-css-not-grid-or-flex-or-absolutely-positioned-item-fix = Try adding <strong>position:absolute</strong> to the element, or <strong>display:grid</strong>, <strong>display:flex</strong>, <strong>display:inline-grid</strong>, or <strong>display:inline-flex</strong> to the element’s parent. { learn-more }
+
inactive-css-not-grid-or-flex-item-fix-3 = Try adding <strong>display:grid</strong>, <strong>display:flex</strong>, <strong>display:inline-grid</strong>, or <strong>display:inline-flex</strong> to the element’s parent. { learn-more }
inactive-css-not-grid-item-fix-2 =Try adding <strong>display:grid</strong> or <strong>display:inline-grid</strong> to the element’s parent. { learn-more }
diff --git a/devtools/server/actors/utils/inactive-property-helper.js b/devtools/server/actors/utils/inactive-property-helper.js
@@ -188,7 +188,6 @@ class InactivePropertyHelper {
"grid-row",
"grid-row-end",
"grid-row-start",
- "justify-self",
],
when: () => !this.gridItem && !this.isAbsPosGridElement(),
fixId: "inactive-css-not-grid-item-fix-2",
@@ -196,12 +195,21 @@ class InactivePropertyHelper {
},
// Grid and flex item properties used on non-grid or non-flex item.
{
- invalidProperties: ["align-self", "place-self", "order"],
- when: () =>
- !this.gridItem && !this.flexItem && !this.isAbsPosGridElement(),
+ invalidProperties: ["order"],
+ when: () => !this.gridItem && !this.flexItem,
fixId: "inactive-css-not-grid-or-flex-item-fix-3",
msgId: "inactive-css-not-grid-or-flex-item",
},
+ // Absolutely positioned, grid and flex item properties used on non absolutely positioned,
+ // non-grid or non-flex item.
+ {
+ invalidProperties: ["align-self", "justify-self", "place-self"],
+ when: () =>
+ !this.gridItem && !this.flexItem && !this.isAbsolutelyPositioned,
+ fixId:
+ "inactive-css-not-grid-or-flex-or-absolutely-positioned-item-fix",
+ msgId: "inactive-css-not-grid-or-flex-or-absolutely-positioned-item",
+ },
// Grid and flex container properties used on non-grid or non-flex container.
{
invalidProperties: [
diff --git a/devtools/server/tests/chrome/inactive-property-helper/self-position-properties.mjs b/devtools/server/tests/chrome/inactive-property-helper/self-position-properties.mjs
@@ -0,0 +1,69 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper test cases:
+// `justify-self`, `align-self` and `place-self`.
+let tests = [];
+
+for (const { propertyName, propertyValue } of [
+ { propertyName: "justify-self", propertyValue: "start" },
+ { propertyName: "align-self", propertyValue: "auto" },
+ { propertyName: "place-self", propertyValue: "auto center" },
+]) {
+ tests = tests.concat(createTestsForProp(propertyName, propertyValue));
+}
+
+function createTestsForProp(propertyName, propertyValue) {
+ return [
+ {
+ info: `${propertyName} is active on a grid item`,
+ property: `${propertyName}`,
+ createTestElement,
+ rules: [
+ `#container { display:grid; grid:auto/100px 100px; }`,
+ `#container-item { ${propertyName}: ${propertyValue}; }`,
+ ],
+ ruleIndex: 1,
+ isActive: true,
+ },
+ {
+ info: `${propertyName} is active on a flex item`,
+ property: `${propertyName}`,
+ createTestElement,
+ rules: [
+ `#container { display:flex; }`,
+ `#container-item { ${propertyName}: ${propertyValue}; }`,
+ ],
+ ruleIndex: 1,
+ isActive: true,
+ },
+ {
+ info: `${propertyName} is active on absolutely positioned item`,
+ property: `${propertyName}`,
+ tagName: `div`,
+ rules: [`div { ${propertyName}: ${propertyValue}; position: absolute; }`],
+ isActive: true,
+ },
+ {
+ info: `${propertyName} is inactive on non-(grid|flex|abs) item`,
+ property: `${propertyName}`,
+ tagName: `div`,
+ rules: [`div { ${propertyName}: ${propertyValue}; }`],
+ isActive: false,
+ },
+ ];
+}
+
+function createTestElement(rootNode) {
+ const container = document.createElement("div");
+ container.id = "container";
+ const element = document.createElement("div");
+ element.id = "container-item";
+ container.append(element);
+ rootNode.append(container);
+
+ return element;
+}
+
+export default tests;
diff --git a/devtools/server/tests/chrome/test_inspector-inactive-property-helper.html b/devtools/server/tests/chrome/test_inspector-inactive-property-helper.html
@@ -72,6 +72,7 @@ SimpleTest.waitForExplicitFinish();
"replaced-element-properties.mjs",
"resize.mjs",
"scroll-padding.mjs",
+ "self-position-properties.mjs",
"vertical-align.mjs",
"table.mjs",
"table-cell.mjs",
