From 994590ea3ffa92a8be7e1e9e31f08cd5f7c631d7 Mon Sep 17 00:00:00 2001
From: olaoluwa <holaszyd1@gmail.com>
Date: Thu, 20 Jan 2022 08:45:53 +0000
Subject: [PATCH] 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
---
 .../actors/utils/inactive-property-helper.js  |  2 +-
 .../chrome/inactive-property-helper/gap.js    | 35 +++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/devtools/server/actors/utils/inactive-property-helper.js b/devtools/server/actors/utils/inactive-property-helper.js
index 74c2ec00f2fe..f712fd92a66c 100644
--- a/devtools/server/actors/utils/inactive-property-helper.js
+++ b/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",
diff --git a/devtools/server/tests/chrome/inactive-property-helper/gap.js b/devtools/server/tests/chrome/inactive-property-helper/gap.js
index e2dd0b5bbbb7..83befcba0dc6 100644
--- a/devtools/server/tests/chrome/inactive-property-helper/gap.js
+++ b/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,
+  },
 ];