Bug 1711396- updating grid-gap to make it detectable by the css inspector and adding gap.js test. r=Oriol,devtools-reviewers,jdescottes

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

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

@@ -169,7 +169,6 @@ class InactivePropertyHelper {
           "row-gap",
           // grid-*-gap are supported legacy shorthands for the corresponding *-gap properties.
           // See https://drafts.csswg.org/css-align-3/#gap-legacy for more information.
-          "grid-gap",
           "grid-row-gap",
         ],
         when: () => !this.gridContainer && !this.flexContainer,
@@ -195,6 +194,7 @@ class InactivePropertyHelper {
         invalidProperties: [
           "column-gap",
           "gap",
+          "grid-gap",
           // grid-*-gap are supported legacy shorthands for the corresponding *-gap properties.
           // See https://drafts.csswg.org/css-align-3/#gap-legacy for more information.
           "grid-column-gap",

devtools/server/tests/chrome/inactive-property-helper/gap.js

@@ -95,4 +95,39 @@ export default [
     rules: ["div { gap: 10px; column-count: 2; }"],
     isActive: true,
   },
+  {
+    info: "grid-gap is inactive on non-grid and non-flex container",
+    property: "grid-gap",
+    tagName: "div",
+    rules: ["div { grid-gap: 10px; display: block; }"],
+    isActive: false,
+  },
+  {
+    info: "grid-gap is active on flex container",
+    property: "grid-gap",
+    tagName: "div",
+    rules: ["div { grid-gap: 10px; display: flex; }"],
+    isActive: true,
+  },
+  {
+    info: "grid-gap is active on grid container",
+    property: "grid-gap",
+    tagName: "div",
+    rules: ["div { grid-gap: 10px; display: grid; }"],
+    isActive: true,
+  },
+  {
+    info: "grid-gap is inactive on non-multi-col container",
+    property: "grid-gap",
+    tagName: "div",
+    rules: ["div { grid-gap: 10px; column-count: auto; }"],
+    isActive: false,
+  },
+  {
+    info: "grid-gap is active on multi-col container",
+    property: "grid-gap",
+    tagName: "div",
+    rules: ["div { grid-gap: 10px; column-count: 2; }"],
+    isActive: true,
+  },
 ];