commit 138b19c22ad59f390d38d55c16a84924b9a929e4
parent 732c01dcd463a346fdbe649da09ff5fb771052f7
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Thu, 11 Dec 2025 08:44:36 +0000
Bug 2004637 - [devtools] Add inactive CSS for justify-self on non-grid/non-absolutely positioned elements. r=devtools-reviewers,fluent-reviewers,Oriol,ochameau,bolsson.
Differential Revision: https://phabricator.services.mozilla.com/D275412
Diffstat:
3 files changed, 53 insertions(+), 4 deletions(-)
diff --git a/devtools/client/locales/en-US/tooltips.ftl b/devtools/client/locales/en-US/tooltips.ftl
@@ -27,6 +27,8 @@ inactive-css-not-grid-or-flex-item = <strong>{ $property }</strong> has no effec
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-or-absolutely-positioned-item = <strong>{ $property }</strong> has no effect on this element since it’s not a grid 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.
@@ -122,6 +124,8 @@ inactive-css-column-span-fix = Try adding <strong>column-count</strong> or <stro
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-absolutely-positioned-item-fix = Try adding <strong>position:absolute</strong> to the element, or <strong>display:grid</strong> or <strong>display:inline-grid</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
@@ -181,7 +181,7 @@ class InactivePropertyHelper {
fixId: "inactive-css-not-grid-container-fix",
msgId: "inactive-css-not-grid-container",
},
- // Grid item property used on non-grid item.
+ // Grid/absolutely positioned item property used on non-grid/non-absolutely positioned item.
{
invalidProperties: [
"grid-area",
@@ -206,13 +206,22 @@ class InactivePropertyHelper {
// 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"],
+ invalidProperties: ["align-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",
},
+ // Absolutely positioned and grid item properties used on non absolutely positioned,
+ // or non-grid item.
+ {
+ invalidProperties: ["justify-self"],
+ // This should be updated when justify-self support is added on block level boxes (see Bug 2005203)
+ when: () => !this.gridItem && !this.isAbsolutelyPositioned,
+ fixId: "inactive-css-not-grid-or-absolutely-positioned-item-fix",
+ msgId: "inactive-css-not-grid-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
@@ -4,10 +4,46 @@
// InactivePropertyHelper test cases:
// `justify-self`, `align-self` and `place-self`.
-let tests = [];
+let tests = [
+ {
+ info: `"justify-self" is inactive on a flex item`,
+ property: "justify-self",
+ createTestElement,
+ rules: [
+ `#container { display:flex; }`,
+ `#container-item { justify-self: start; }`,
+ ],
+ ruleIndex: 1,
+ isActive: false,
+ },
+ {
+ info: `"justify-self" is inactive on a block`,
+ property: "justify-self",
+ tagName: `div`,
+ rules: [`div { display:block; justify-self: start; }`],
+ isActive: false,
+ },
+ {
+ info: `"justify-self" is active on an absolutely positioned element`,
+ property: "justify-self",
+ tagName: `div`,
+ rules: [`div { display:block; justify-self: start; position: absolute;}`],
+ isActive: true,
+ },
+ {
+ info: `"justify-self" is active on a grid item`,
+ property: "justify-self",
+ createTestElement,
+ rules: [
+ `#container { display:grid; }`,
+ `#container-item { justify-self: start; }`,
+ ],
+ ruleIndex: 1,
+ isActive: true,
+ },
+];
for (const { propertyName, propertyValue } of [
- { propertyName: "justify-self", propertyValue: "start" },
{ propertyName: "align-self", propertyValue: "auto" },
{ propertyName: "place-self", propertyValue: "auto center" },
]) {
