Bug 1610761 - Don't show inactivity warning on z-index if inside grid/flex r=rcaliman

In bug 1551585 we added a new inactivity warning shown on top,
right, bottom, left and z-index properties when they are used on elements
that are not positioned.
Turns out that z-index *can* be used on unpositioned elements if these
elements are grid or flex items.

In grid layouts it's useful to determine which item shows on top when
several overlap in a grid cell.

In flex layouts, z-index values other than auto create a stacking context
even if position is static.

So this change simply avoids showing the warning for z-index if the element
is a flex or a grid item.

Differential Revision: https://phabricator.services.mozilla.com/D60673

--HG--
extra : moz-landing-system : lando

devtools/server/actors/utils/inactive-property-helper.js

@@ -253,14 +253,22 @@ class InactivePropertyHelper {
         numFixProps: 1,
         learnMoreURL: VISITED_MDN_LINK,
       },
-      // top, right, bottom, left and z-index properties used on non positioned boxes.
+      // top, right, bottom, left properties used on non positioned boxes.
       {
-        invalidProperties: ["top", "right", "bottom", "left", "z-index"],
+        invalidProperties: ["top", "right", "bottom", "left"],
         when: () => !this.isPositioned,
         fixId: "inactive-css-position-property-on-unpositioned-box-fix",
         msgId: "inactive-css-position-property-on-unpositioned-box",
         numFixProps: 1,
       },
+      // z-index property used on non positioned boxes that are not grid/flex items.
+      {
+        invalidProperties: ["z-index"],
+        when: () => !this.isPositioned && !this.gridItem && !this.flexItem,
+        fixId: "inactive-css-position-property-on-unpositioned-box-fix",
+        msgId: "inactive-css-position-property-on-unpositioned-box",
+        numFixProps: 1,
+      },
     ];
   }
 

devtools/server/tests/mochitest/inactive-property-helper/positioned.js

@@ -39,16 +39,46 @@ function makeTestCase(property, value, position, isActive) {
   };
 }
 
-function makeTestCases() {
-  const tests = [];
+// Make the test cases for all the combinations of PROPERTIES and POSITIONS
+const mainTests = [];
 
-  for (const { property, value } of PROPERTIES) {
-    for (const { position, isActive } of POSITIONS) {
-      tests.push(makeTestCase(property, value, position, isActive));
-    }
+for (const { property, value } of PROPERTIES) {
+  for (const { position, isActive } of POSITIONS) {
+    mainTests.push(makeTestCase(property, value, position, isActive));
   }
-
-  return tests;
 }
 
-export default makeTestCases();
+// Add a few test cases to check that z-index actually works inside grids and flexboxes.
+mainTests.push({
+  info:
+    "z-index is active even on unpositioned elements if they are grid items",
+  property: "z-index",
+  createTestElement: rootNode => {
+    const container = document.createElement("div");
+    const element = document.createElement("span");
+    container.append(element);
+    rootNode.append(container);
+    return element;
+  },
+  rules: ["div { display: grid; }", "span { z-index: 3; }"],
+  ruleIndex: 1,
+  isActive: true,
+});
+
+mainTests.push({
+  info:
+    "z-index is active even on unpositioned elements if they are flex items",
+  property: "z-index",
+  createTestElement: rootNode => {
+    const container = document.createElement("div");
+    const element = document.createElement("span");
+    container.append(element);
+    rootNode.append(container);
+    return element;
+  },
+  rules: ["div { display: flex; }", "span { z-index: 3; }"],
+  ruleIndex: 1,
+  isActive: true,
+});
+
+export default mainTests;