1 files changed, 29 insertions, 10 deletions

diff --git a/devtools/server/actors/utils/inactive-property-helper.js b/devtools/server/actors/utils/inactive-property-helper.js
index 759c2e6215..3f6e748167 100644
--- a/devtools/server/actors/utils/inactive-property-helper.js
+++ b/devtools/server/actors/utils/inactive-property-helper.js
@@ -21,6 +21,11 @@ const TEXT_WRAP_BALANCE_LIMIT = Services.prefs.getIntPref(
   10
 );
 
+const ALIGN_CONTENT_BLOCKS = Services.prefs.getBoolPref(
+  "layout.css.align-content.blocks.enabled",
+  false
+);
+
 const VISITED_MDN_LINK = "https://developer.mozilla.org/docs/Web/CSS/:visited";
 const VISITED_INVALID_PROPERTIES = allCssPropertiesExcept([
   "all",
@@ -227,12 +232,29 @@ class InactivePropertyHelper {
       // See https://bugzilla.mozilla.org/show_bug.cgi?id=1598730
       {
         invalidProperties: ["align-content"],
-        when: () =>
-          !this.style["align-content"].includes("baseline") &&
-          !this.gridContainer &&
-          !this.flexContainer,
-        fixId: "inactive-css-not-grid-or-flex-container-fix",
-        msgId: "inactive-css-not-grid-or-flex-container",
+        when: () => {
+          if (this.style["align-content"].includes("baseline")) {
+            return false;
+          }
+          const supportedDisplay = [
+            "flex",
+            "inline-flex",
+            "grid",
+            "inline-grid",
+            // Uncomment table-cell when Bug 1883357 is fixed.
+            // "table-cell"
+          ];
+          if (ALIGN_CONTENT_BLOCKS) {
+            supportedDisplay.push("block", "inline-block");
+          }
+          return !this.checkComputedStyle("display", supportedDisplay);
+        },
+        fixId: ALIGN_CONTENT_BLOCKS
+          ? "inactive-css-not-grid-or-flex-or-block-container-fix"
+          : "inactive-css-not-grid-or-flex-container-fix",
+        msgId: ALIGN_CONTENT_BLOCKS
+          ? "inactive-css-property-because-of-display"
+          : "inactive-css-not-grid-or-flex-container",
       },
       // column-gap and shorthands used on non-grid or non-flex or non-multi-col container.
       {
@@ -1223,11 +1245,8 @@ class InactivePropertyHelper {
 
   /**
    * Check if a node is a grid item.
-   *
-   * @param {DOMNode} node
-   *        The node to check.
    */
-  isGridItem(node) {
+  isGridItem() {
     return !!this.getParentGridElement(this.node);
   }