Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

16 files changed, 2155 insertions, 0 deletions

diff --git a/devtools/server/tests/chrome/inactive-property-helper/align-content.mjs b/devtools/server/tests/chrome/inactive-property-helper/align-content.mjs
new file mode 100644
index 0000000000..a871081fad
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/align-content.mjs
@@ -0,0 +1,92 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper `align-content` test cases.
+
+export default [
+  {
+    info: "align-content is inactive on block elements (until bug 1105571 is fixed)",
+    property: "align-content",
+    tagName: "div",
+    rules: ["div { align-content: center; }"],
+    isActive: false,
+  },
+  {
+    info: "align-content is active on flex containers",
+    property: "align-content",
+    tagName: "div",
+    rules: ["div { align-content: center; display: flex; }"],
+    isActive: true,
+  },
+  {
+    info: "align-content is active on grid containers",
+    property: "align-content",
+    tagName: "div",
+    rules: ["div { align-content: center; display: grid; }"],
+    isActive: true,
+  },
+  {
+    info: "align-content is inactive on flex items",
+    property: "align-content",
+    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 { align-content: center; }"],
+    ruleIndex: 1,
+    isActive: false,
+  },
+  {
+    info: "align-content is inactive on grid items",
+    property: "align-content",
+    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 { align-content: center; }"],
+    ruleIndex: 1,
+    isActive: false,
+  },
+  {
+    info: "align-content:baseline is active on flex items",
+    property: "align-content",
+    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 { align-content: baseline; }"],
+    ruleIndex: 1,
+    isActive: true,
+  },
+  {
+    info: "align-content:baseline is active on grid items",
+    property: "align-content",
+    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 { align-content: baseline; }"],
+    ruleIndex: 1,
+    isActive: true,
+  },
+  {
+    info: "align-content:baseline is active on table cells",
+    property: "align-content",
+    tagName: "div",
+    rules: ["div { display: table-cell; align-content: baseline; }"],
+    isActive: true,
+  },
+];
diff --git a/devtools/server/tests/chrome/inactive-property-helper/border-image.mjs b/devtools/server/tests/chrome/inactive-property-helper/border-image.mjs
new file mode 100644
index 0000000000..85c57418a4
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/border-image.mjs
@@ -0,0 +1,162 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper `border-image` test cases.
+export default [
+  {
+    info: "border-image is active on another element then a table element or internal table element where border-collapse is not set to collapse",
+    property: "border-image",
+    tagName: "div",
+    rules: ["div { border-image: linear-gradient(red, yellow) 10; }"],
+    isActive: true,
+  },
+  {
+    info: "border-image is active on another element then a table element or internal table element where border-collapse is set to collapse",
+    property: "border-image",
+    tagName: "div",
+    rules: [
+      "div { border-image: linear-gradient(red, yellow) 10; border-collapse: collapse;}",
+    ],
+    isActive: true,
+  },
+  {
+    info: "border-image is active on a td element with no table parent and the browser is not crashing",
+    property: "border-image",
+    tagName: "td",
+    rules: [
+      "td { border-image: linear-gradient(red, yellow) 10; border-collapse: collapse;}",
+    ],
+    isActive: true,
+  },
+  createTableElementsToTestBorderImage({
+    useDivTagWithDisplayTableStyle: false,
+    borderCollapse: true,
+    borderCollapsePropertyIsInherited: false,
+    isActive: true,
+  }),
+  createTableElementsToTestBorderImage({
+    useDivTagWithDisplayTableStyle: false,
+    borderCollapse: false,
+    borderCollapsePropertyIsInherited: false,
+    isActive: true,
+  }),
+  createTableElementsToTestBorderImage({
+    useDivTagWithDisplayTableStyle: false,
+    borderCollapse: true,
+    borderCollapsePropertyIsInherited: true,
+    isActive: false,
+  }),
+  createTableElementsToTestBorderImage({
+    useDivTagWithDisplayTableStyle: false,
+    borderCollapse: false,
+    borderCollapsePropertyIsInherited: true,
+    isActive: true,
+  }),
+  createTableElementsToTestBorderImage({
+    useDivTagWithDisplayTableStyle: true,
+    borderCollapse: true,
+    borderCollapsePropertyIsInherited: false,
+    isActive: true,
+  }),
+  createTableElementsToTestBorderImage({
+    useDivTagWithDisplayTableStyle: true,
+    borderCollapse: false,
+    borderCollapsePropertyIsInherited: false,
+    isActive: true,
+  }),
+  createTableElementsToTestBorderImage({
+    useDivTagWithDisplayTableStyle: true,
+    borderCollapse: true,
+    borderCollapsePropertyIsInherited: true,
+    isActive: false,
+  }),
+  createTableElementsToTestBorderImage({
+    useDivTagWithDisplayTableStyle: true,
+    borderCollapse: false,
+    borderCollapsePropertyIsInherited: true,
+    isActive: true,
+  }),
+];
+
+/**
+ * @param {Object} testParameters
+ * @param {bool} testParameters.useDivTagWithDisplayTableStyle use generic divs using display property instead of actual table/tr/td tags
+ * @param {bool} testParameters.borderCollapse is `border-collapse` property set to `collapse` ( instead of `separate`)
+ * @param {bool} testParameters.borderCollapsePropertyIsInherited should the border collapse property be inherited from the table parent (instead of directly set on the internal table element)
+ * @param {bool} testParameters.isActive is the border-image property actve on the element
+ * @returns
+ */
+function createTableElementsToTestBorderImage({
+  useDivTagWithDisplayTableStyle,
+  borderCollapse,
+  borderCollapsePropertyIsInherited,
+  isActive,
+}) {
+  return {
+    info: `border-image is ${
+      isActive ? "active" : "inactive"
+    } on an internal table element where border-collapse is${
+      borderCollapse ? "" : " not"
+    } set to collapse${
+      borderCollapsePropertyIsInherited
+        ? " by being inherited from its table parent"
+        : ""
+    } when the table and its internal elements are ${
+      useDivTagWithDisplayTableStyle ? "not " : ""
+    }using semantic tags (table, tr, td, ...)`,
+    property: "border-image",
+    createTestElement: rootNode => {
+      const table = useDivTagWithDisplayTableStyle
+        ? document.createElement("div")
+        : document.createElement("table");
+      if (useDivTagWithDisplayTableStyle) {
+        table.style.display = "table";
+      }
+      if (borderCollapsePropertyIsInherited) {
+        table.style.borderCollapse = `${
+          borderCollapse ? "collapse" : "separate"
+        }`;
+      }
+      rootNode.appendChild(table);
+
+      const tbody = useDivTagWithDisplayTableStyle
+        ? document.createElement("div")
+        : document.createElement("tbody");
+      if (useDivTagWithDisplayTableStyle) {
+        tbody.style.display = "table-row-group";
+      }
+      table.appendChild(tbody);
+
+      const tr = useDivTagWithDisplayTableStyle
+        ? document.createElement("div")
+        : document.createElement("tr");
+      if (useDivTagWithDisplayTableStyle) {
+        tr.style.display = "table-row";
+      }
+      tbody.appendChild(tr);
+
+      const td = useDivTagWithDisplayTableStyle
+        ? document.createElement("div")
+        : document.createElement("td");
+      if (useDivTagWithDisplayTableStyle) {
+        td.style.display = "table-cell";
+        td.classList.add("td");
+      }
+      tr.appendChild(td);
+
+      return td;
+    },
+    rules: [
+      `td, .td {
+        border-image: linear-gradient(red, yellow) 10;
+        ${
+          !borderCollapsePropertyIsInherited
+            ? `border-collapse: ${borderCollapse ? "collapse" : "separate"};`
+            : ""
+        }
+     }`,
+    ],
+    isActive,
+  };
+}
diff --git a/devtools/server/tests/chrome/inactive-property-helper/flex-grid-item-properties.mjs b/devtools/server/tests/chrome/inactive-property-helper/flex-grid-item-properties.mjs
new file mode 100644
index 0000000000..79c587798a
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/flex-grid-item-properties.mjs
@@ -0,0 +1,229 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper `align-self`, `place-self`, and `order` test cases.
+export default [
+  {
+    info: "align-self is inactive on block element",
+    property: "align-self",
+    tagName: "div",
+    rules: ["div { align-self: center; }"],
+    isActive: false,
+  },
+  {
+    info: "align-self is inactive on flex container",
+    property: "align-self",
+    tagName: "div",
+    rules: ["div { align-self: center;  display: flex;}"],
+    isActive: false,
+  },
+  {
+    info: "align-self is inactive on inline-flex container",
+    property: "align-self",
+    tagName: "div",
+    rules: ["div { align-self: center;  display: inline-flex;}"],
+    isActive: false,
+  },
+  {
+    info: "align-self is inactive on grid container",
+    property: "align-self",
+    tagName: "div",
+    rules: ["div { align-self: center;  display: grid;}"],
+    isActive: false,
+  },
+  {
+    info: "align-self is inactive on inline grid container",
+    property: "align-self",
+    tagName: "div",
+    rules: ["div { align-self: center;  display: inline-grid;}"],
+    isActive: false,
+  },
+  {
+    info: "align-self is inactive on inline element",
+    property: "align-self",
+    tagName: "span",
+    rules: ["span { align-self: center; }"],
+    isActive: false,
+  },
+  {
+    info: "align-self is active on flex item",
+    property: "align-self",
+    createTestElement: rootNode => {
+      const container = document.createElement("div");
+      const element = document.createElement("span");
+      container.append(element);
+      rootNode.append(container);
+      return element;
+    },
+    rules: [
+      "div { display: flex; align-items: start; }",
+      "span { align-self: center; }",
+    ],
+    ruleIndex: 1,
+    isActive: true,
+  },
+  {
+    info: "align-self is active on grid item",
+    property: "align-self",
+    createTestElement: rootNode => {
+      const container = document.createElement("div");
+      const element = document.createElement("span");
+      container.append(element);
+      rootNode.append(container);
+      return element;
+    },
+    rules: [
+      "div { display: grid; align-items: start; }",
+      "span { align-self: center; }",
+    ],
+    ruleIndex: 1,
+    isActive: true,
+  },
+  {
+    info: "place-self is inactive on block element",
+    property: "place-self",
+    tagName: "div",
+    rules: ["div { place-self: center; }"],
+    isActive: false,
+  },
+  {
+    info: "place-self is inactive on flex container",
+    property: "place-self",
+    tagName: "div",
+    rules: ["div { place-self: center;  display: flex;}"],
+    isActive: false,
+  },
+  {
+    info: "place-self is inactive on inline-flex container",
+    property: "place-self",
+    tagName: "div",
+    rules: ["div { place-self: center;  display: inline-flex;}"],
+    isActive: false,
+  },
+  {
+    info: "place-self is inactive on grid container",
+    property: "place-self",
+    tagName: "div",
+    rules: ["div { place-self: center;  display: grid;}"],
+    isActive: false,
+  },
+  {
+    info: "place-self is inactive on inline grid container",
+    property: "place-self",
+    tagName: "div",
+    rules: ["div { place-self: center;  display: inline-grid;}"],
+    isActive: false,
+  },
+  {
+    info: "place-self is inactive on inline element",
+    property: "place-self",
+    tagName: "span",
+    rules: ["span { place-self: center; }"],
+    isActive: false,
+  },
+  {
+    info: "place-self is active on flex item",
+    property: "place-self",
+    createTestElement: rootNode => {
+      const container = document.createElement("div");
+      const element = document.createElement("span");
+      container.append(element);
+      rootNode.append(container);
+      return element;
+    },
+    rules: [
+      "div { display: flex; align-items: start; }",
+      "span { place-self: center; }",
+    ],
+    ruleIndex: 1,
+    isActive: true,
+  },
+  {
+    info: "place-self is active on grid item",
+    property: "place-self",
+    createTestElement: rootNode => {
+      const container = document.createElement("div");
+      const element = document.createElement("span");
+      container.append(element);
+      rootNode.append(container);
+      return element;
+    },
+    rules: [
+      "div { display: grid; align-items: start; }",
+      "span { place-self: center; }",
+    ],
+    ruleIndex: 1,
+    isActive: true,
+  },
+  {
+    info: "order is inactive on block element",
+    property: "order",
+    tagName: "div",
+    rules: ["div { order: 1; }"],
+    isActive: false,
+  },
+  {
+    info: "order is inactive on flex container",
+    property: "order",
+    tagName: "div",
+    rules: ["div { order: 1;  display: flex;}"],
+    isActive: false,
+  },
+  {
+    info: "order is inactive on inline-flex container",
+    property: "order",
+    tagName: "div",
+    rules: ["div { order: 1; display: inline-flex;}"],
+    isActive: false,
+  },
+  {
+    info: "order is inactive on grid container",
+    property: "order",
+    tagName: "div",
+    rules: ["div { order: 1; display: grid;}"],
+    isActive: false,
+  },
+  {
+    info: "order is inactive on inline grid container",
+    property: "order",
+    tagName: "div",
+    rules: ["div { order: 1; display: inline-grid;}"],
+    isActive: false,
+  },
+  {
+    info: "order is inactive on inline element",
+    property: "order",
+    tagName: "span",
+    rules: ["span { order: 1; }"],
+    isActive: false,
+  },
+  {
+    info: "order is active on flex item",
+    property: "order",
+    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 { order: 1; }"],
+    ruleIndex: 1,
+    isActive: true,
+  },
+  {
+    info: "order is active on grid item",
+    property: "order",
+    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 { order: 1; }"],
+    ruleIndex: 1,
+    isActive: true,
+  },
+];
diff --git a/devtools/server/tests/chrome/inactive-property-helper/float.mjs b/devtools/server/tests/chrome/inactive-property-helper/float.mjs
new file mode 100644
index 0000000000..4c502e3cca
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/float.mjs
@@ -0,0 +1,76 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper `float` test cases.
+export default [
+  {
+    info: "display: inline is inactive on a floated element",
+    property: "display",
+    tagName: "div",
+    rules: ["div { display: inline; float: right; }"],
+    isActive: false,
+  },
+  {
+    info: "display: block is active on a floated element",
+    property: "display",
+    tagName: "div",
+    rules: ["div { display: block; float: right;}"],
+    isActive: true,
+  },
+  {
+    info: "display: inline-grid is inactive on a floated element",
+    property: "display",
+    createTestElement: rootNode => {
+      const container = document.createElement("div");
+      container.classList.add("test");
+      rootNode.append(container);
+      return container;
+    },
+    rules: [
+      "div { float: left; display:block; }",
+      ".test { display: inline-grid ;}",
+    ],
+    isActive: false,
+  },
+  {
+    info: "display: table-footer-group is inactive on a floated element",
+    property: "display",
+    createTestElement: rootNode => {
+      const container = document.createElement("div");
+      container.style.display = "table";
+      const footer = document.createElement("div");
+      footer.classList.add("table-footer");
+      container.append(footer);
+      rootNode.append(container);
+      return footer;
+    },
+    rules: [".table-footer { display: table-footer-group; float: left;}"],
+    isActive: false,
+  },
+  createGridPlacementOnFloatedItemTest("grid-row"),
+  createGridPlacementOnFloatedItemTest("grid-column"),
+  createGridPlacementOnFloatedItemTest("grid-area", "foo"),
+];
+
+function createGridPlacementOnFloatedItemTest(property, value = "2") {
+  return {
+    info: `grid placement property ${property} is active on a floated grid item`,
+    property,
+    createTestElement: rootNode => {
+      const grid = document.createElement("div");
+      grid.style.display = "grid";
+      grid.style.gridTemplateRows = "repeat(5, 1fr)";
+      grid.style.gridTemplateColumns = "repeat(5, 1fr)";
+      grid.style.gridTemplateAreas = "'foo foo foo'";
+      rootNode.appendChild(grid);
+
+      const item = document.createElement("span");
+      grid.appendChild(item);
+
+      return item;
+    },
+    rules: [`span { ${property}: ${value}; float: left; }`],
+    isActive: true,
+  };
+}
diff --git a/devtools/server/tests/chrome/inactive-property-helper/gap.mjs b/devtools/server/tests/chrome/inactive-property-helper/gap.mjs
new file mode 100644
index 0000000000..83befcba0d
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/gap.mjs
@@ -0,0 +1,133 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper `gap` test cases.
+export default [
+  {
+    info: "column-gap is inactive on non-grid and non-flex container",
+    property: "column-gap",
+    tagName: "div",
+    rules: ["div { column-gap: 10px; display: block; }"],
+    isActive: false,
+  },
+  {
+    info: "column-gap is active on grid container",
+    property: "column-gap",
+    tagName: "div",
+    rules: ["div { column-gap: 10px; display: grid; }"],
+    isActive: true,
+  },
+  {
+    info: "column-gap is active on flex container",
+    property: "column-gap",
+    tagName: "div",
+    rules: ["div { column-gap: 10px; display: flex; }"],
+    isActive: true,
+  },
+  {
+    info: "column-gap is inactive on non-multi-col container",
+    property: "column-gap",
+    tagName: "div",
+    rules: ["div { column-gap: 10px; column-count: auto; }"],
+    isActive: false,
+  },
+  {
+    info: "column-gap is active on multi-column container",
+    property: "column-gap",
+    tagName: "div",
+    rules: ["div { column-gap: 10px; column-count: 2; }"],
+    isActive: true,
+  },
+  {
+    info: "row-gap is inactive on non-grid and non-flex container",
+    property: "row-gap",
+    tagName: "div",
+    rules: ["div { row-gap: 10px; display: block; }"],
+    isActive: false,
+  },
+  {
+    info: "row-gap is active on grid container",
+    property: "row-gap",
+    tagName: "div",
+    rules: ["div { row-gap: 10px; display: grid; }"],
+    isActive: true,
+  },
+  {
+    info: "row-gap is active on flex container",
+    property: "row-gap",
+    tagName: "div",
+    rules: ["div { row-gap: 10px; display: flex; }"],
+    isActive: true,
+  },
+  {
+    info: "gap is inactive on non-grid and non-flex container",
+    property: "gap",
+    tagName: "div",
+    rules: ["div { gap: 10px; display: block; }"],
+    isActive: false,
+  },
+  {
+    info: "gap is active on flex container",
+    property: "gap",
+    tagName: "div",
+    rules: ["div { gap: 10px; display: flex; }"],
+    isActive: true,
+  },
+  {
+    info: "gap is active on grid container",
+    property: "gap",
+    tagName: "div",
+    rules: ["div { gap: 10px; display: grid; }"],
+    isActive: true,
+  },
+  {
+    info: "gap is inactive on non-multi-col container",
+    property: "gap",
+    tagName: "div",
+    rules: ["div { gap: 10px; column-count: auto; }"],
+    isActive: false,
+  },
+  {
+    info: "gap is active on multi-col container",
+    property: "gap",
+    tagName: "div",
+    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,
+  },
+];
diff --git a/devtools/server/tests/chrome/inactive-property-helper/grid-container-properties.mjs b/devtools/server/tests/chrome/inactive-property-helper/grid-container-properties.mjs
new file mode 100644
index 0000000000..1fca234733
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/grid-container-properties.mjs
@@ -0,0 +1,43 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper test cases:
+// `grid-auto-columns`, `grid-auto-flow`, `grid-auto-rows`, `grid-template`,
+// `grid-template-areas`, `grid-template-columns`, `grid-template-rows`,
+// and `justify-items`.
+let tests = [];
+
+for (const { propertyName, propertyValue } of [
+  { propertyName: "grid-auto-columns", propertyValue: "100px" },
+  { propertyName: "grid-auto-flow", propertyValue: "columns" },
+  { propertyName: "grid-auto-rows", propertyValue: "100px" },
+  { propertyName: "grid-template", propertyValue: "auto / auto" },
+  { propertyName: "grid-template-areas", propertyValue: "a b c" },
+  { propertyName: "grid-template-columns", propertyValue: "100px 1fr" },
+  { propertyName: "grid-template-rows", propertyValue: "100px 1fr" },
+  { propertyName: "justify-items", propertyValue: "center" },
+]) {
+  tests = tests.concat(createTestsForProp(propertyName, propertyValue));
+}
+
+function createTestsForProp(propertyName, propertyValue) {
+  return [
+    {
+      info: `${propertyName} is active on a grid container`,
+      property: propertyName,
+      tagName: "div",
+      rules: [`div { display:grid; ${propertyName}: ${propertyValue}; }`],
+      isActive: true,
+    },
+    {
+      info: `${propertyName} is inactive on a non-grid container`,
+      property: propertyName,
+      tagName: "div",
+      rules: [`div { ${propertyName}: ${propertyValue}; }`],
+      isActive: false,
+    },
+  ];
+}
+
+export default tests;
diff --git a/devtools/server/tests/chrome/inactive-property-helper/grid-with-absolute-properties.mjs b/devtools/server/tests/chrome/inactive-property-helper/grid-with-absolute-properties.mjs
new file mode 100644
index 0000000000..fd963e0d3b
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/grid-with-absolute-properties.mjs
@@ -0,0 +1,71 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper test cases:
+// `grid-area`, `grid-column`, `grid-column-end`, `grid-column-start`,
+// `grid-row`, `grid-row-end`, `grid-row-start`, `justify-self`, `align-self`
+// and `place-self`.
+let tests = [];
+
+for (const { propertyName, propertyValue } of [
+  { propertyName: "grid-area", propertyValue: "2 / 1 / span 2 / span 3" },
+  { propertyName: "grid-column", propertyValue: 2 },
+  { propertyName: "grid-column-end", propertyValue: "span 3" },
+  { propertyName: "grid-column-start", propertyValue: 2 },
+  { propertyName: "grid-row", propertyValue: "1 / span 2" },
+  { propertyName: "grid-row-end", propertyValue: "span 3" },
+  { propertyName: "grid-row-start", propertyValue: 2 },
+  { propertyName: "justify-self", propertyValue: "start" },
+  { propertyName: "align-self", propertyValue: "auto" },
+  { propertyName: "place-self", propertyValue: "auto center" },
+]) {
+  tests = tests.concat(createTestsForProp(propertyName, propertyValue));
+}
+
+function createTestsForProp(propertyName, propertyValue) {
+  return [
+    {
+      info: `${propertyName} is active on a grid item`,
+      property: `${propertyName}`,
+      createTestElement,
+      rules: [
+        `#grid-container { display:grid; grid:auto/100px 100px; }`,
+        `#grid-item { ${propertyName}: ${propertyValue}; }`,
+      ],
+      ruleIndex: 1,
+      isActive: true,
+    },
+    {
+      info: `${propertyName} is active on an absolutely positioned grid item`,
+      property: `${propertyName}`,
+      createTestElement,
+      rules: [
+        `#grid-container { display:grid; grid:auto/100px 100px; position: relative }`,
+        `#grid-item { ${propertyName}: ${propertyValue}; position: absolute; }`,
+      ],
+      ruleIndex: 1,
+      isActive: true,
+    },
+    {
+      info: `${propertyName} is inactive on a non-grid item`,
+      property: `${propertyName}`,
+      tagName: `div`,
+      rules: [`div { ${propertyName}: ${propertyValue}; }`],
+      isActive: false,
+    },
+  ];
+}
+
+function createTestElement(rootNode) {
+  const container = document.createElement("div");
+  container.id = "grid-container";
+  const element = document.createElement("div");
+  element.id = "grid-item";
+  container.append(element);
+  rootNode.append(container);
+
+  return element;
+}
+
+export default tests;
diff --git a/devtools/server/tests/chrome/inactive-property-helper/margin-padding.mjs b/devtools/server/tests/chrome/inactive-property-helper/margin-padding.mjs
new file mode 100644
index 0000000000..7c1d348512
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/margin-padding.mjs
@@ -0,0 +1,260 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper `align-content` test cases.
+
+export default [
+  {
+    info: "margin is active on block containers",
+    property: "margin",
+    tagName: "div",
+    rules: ["div { margin: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "margin is active on flex containers",
+    property: "margin",
+    tagName: "div",
+    rules: ["div { display: flex; margin: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "margin is active on grid containers",
+    property: "margin",
+    tagName: "div",
+    rules: ["div { display: grid; margin: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "margin is active on tables",
+    property: "margin",
+    tagName: "div",
+    rules: ["div { display: table; margin: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "margin is active on inline tables",
+    property: "margin",
+    tagName: "div",
+    rules: ["div { display: inline-table; margin: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "margin is active on table captions",
+    property: "margin",
+    tagName: "div",
+    rules: ["div { display: table-caption; margin: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "margin is inactive on table cells",
+    property: "margin",
+    tagName: "div",
+    rules: ["div { display: table-cell; margin: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "margin-block is inactive on table cells",
+    property: "margin-block",
+    tagName: "div",
+    rules: ["div { display: table-cell; margin-block: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "margin-block-start is inactive on table cells",
+    property: "margin-block-start",
+    tagName: "div",
+    rules: ["div { display: table-cell; margin-block-start: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "margin-block-end is inactive on table cells",
+    property: "margin-block-end",
+    tagName: "div",
+    rules: ["div { display: table-cell; margin-block-end: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "margin-block is inactive on table cells",
+    property: "margin-block",
+    tagName: "div",
+    rules: ["div { display: table-cell; margin-block: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "margin-bottom is inactive on table rows",
+    property: "margin-bottom",
+    tagName: "div",
+    rules: ["div { display: table-row; margin-bottom: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "margin-inline-start is inactive on table rows",
+    property: "margin-inline-start",
+    tagName: "div",
+    rules: ["div { display: table-row; margin-inline-start: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "margin-inline-end is inactive on table rows",
+    property: "margin-inline-end",
+    tagName: "div",
+    rules: ["div { display: table-row; margin-inline-end: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "margin-inline is inactive on table rows",
+    property: "margin-inline",
+    tagName: "div",
+    rules: ["div { display: table-row; margin-inline: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "margin-left is inactive on table columns",
+    property: "margin-left",
+    tagName: "div",
+    rules: ["div { display: table-column; margin-left: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "margin-right is inactive on table row groups",
+    property: "margin-right",
+    tagName: "div",
+    rules: ["div { display: table-row-group; margin-right: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "margin-top is inactive on table column groups",
+    property: "margin-top",
+    tagName: "div",
+    rules: ["div { display: table-column-group; margin-top: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "padding is active on block containers",
+    property: "padding",
+    tagName: "div",
+    rules: ["div { padding: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "padding is active on flex containers",
+    property: "padding",
+    tagName: "div",
+    rules: ["div { display: flex; padding: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "padding is active on grid containers",
+    property: "padding",
+    tagName: "div",
+    rules: ["div { display: grid; padding: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "padding is active on tables",
+    property: "padding",
+    tagName: "div",
+    rules: ["div { display: table; padding: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "padding is active on inline tables",
+    property: "padding",
+    tagName: "div",
+    rules: ["div { display: inline-table; padding: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "padding is active on table captions",
+    property: "padding",
+    tagName: "div",
+    rules: ["div { display: table-caption; padding: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "padding is active on table cells",
+    property: "padding",
+    tagName: "div",
+    rules: ["div { display: table-cell; padding: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "padding-block is active on table cells",
+    property: "padding-block",
+    tagName: "div",
+    rules: ["div { display: table-cell; padding-block: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "padding-block-start is active on table cells",
+    property: "padding-block-start",
+    tagName: "div",
+    rules: ["div { display: table-cell; padding-block-start: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "padding-block-end is active on table cells",
+    property: "padding-block-end",
+    tagName: "div",
+    rules: ["div { display: table-cell; padding-block-end: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "padding-block is active on table cells",
+    property: "padding-block",
+    tagName: "div",
+    rules: ["div { display: table-cell; padding-block: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "padding-bottom is inactive on table rows",
+    property: "padding-bottom",
+    tagName: "div",
+    rules: ["div { display: table-row; padding-bottom: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "padding-inline-start is inactive on table rows",
+    property: "padding-inline-start",
+    tagName: "div",
+    rules: ["div { display: table-row; padding-inline-start: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "padding-inline-end is inactive on table rows",
+    property: "padding-inline-end",
+    tagName: "div",
+    rules: ["div { display: table-row; padding-inline-end: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "padding-inline is inactive on table rows",
+    property: "padding-inline",
+    tagName: "div",
+    rules: ["div { display: table-row; padding-inline: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "padding-left is inactive on table columns",
+    property: "padding-left",
+    tagName: "div",
+    rules: ["div { display: table-column; padding-left: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "padding-right is inactive on table row groups",
+    property: "padding-right",
+    tagName: "div",
+    rules: ["div { display: table-row-group; padding-right: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "padding-top is inactive on table column groups",
+    property: "padding-top",
+    tagName: "div",
+    rules: ["div { display: table-column-group; padding-top: 10px; }"],
+    isActive: false,
+  },
+];
diff --git a/devtools/server/tests/chrome/inactive-property-helper/max-min-width-height.mjs b/devtools/server/tests/chrome/inactive-property-helper/max-min-width-height.mjs
new file mode 100644
index 0000000000..4bb5623f6e
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/max-min-width-height.mjs
@@ -0,0 +1,366 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper `width`, `min-width`, `max-width`, `height`, `min-height`,
+// `max-height` test cases.
+export default [
+  {
+    info: "width is inactive on a non-replaced inline element",
+    property: "width",
+    tagName: "span",
+    rules: ["span { width: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "min-width is inactive on a non-replaced inline element",
+    property: "min-width",
+    tagName: "span",
+    rules: ["span { min-width: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "max-width is inactive on a non-replaced inline element",
+    property: "max-width",
+    tagName: "span",
+    rules: ["span { max-width: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "width is inactive on an tr element",
+    property: "width",
+    tagName: "tr",
+    rules: ["tr { width: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "min-width is inactive on an tr element",
+    property: "min-width",
+    tagName: "tr",
+    rules: ["tr { min-width: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "max-width is inactive on an tr element",
+    property: "max-width",
+    tagName: "tr",
+    rules: ["tr { max-width: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "width is inactive on an thead element",
+    property: "width",
+    tagName: "thead",
+    rules: ["thead { width: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "min-width is inactive on an thead element",
+    property: "min-width",
+    tagName: "thead",
+    rules: ["thead { min-width: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "max-width is inactive on an thead element",
+    property: "max-width",
+    tagName: "thead",
+    rules: ["thead { max-width: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "width is inactive on an tfoot element",
+    property: "width",
+    tagName: "tfoot",
+    rules: ["tfoot { width: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "min-width is inactive on an tfoot element",
+    property: "min-width",
+    tagName: "tfoot",
+    rules: ["tfoot { min-width: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "max-width is inactive on an tfoot element",
+    property: "max-width",
+    tagName: "tfoot",
+    rules: ["tfoot { max-width: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "width is active on a replaced inline element",
+    property: "width",
+    tagName: "img",
+    rules: ["img { width: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "width is active on an inline input element",
+    property: "width",
+    tagName: "input",
+    rules: ["input { display: inline; width: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "width is active on an inline select element",
+    property: "width",
+    tagName: "select",
+    rules: ["select { display: inline; width: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "width is active on a textarea element",
+    property: "width",
+    tagName: "textarea",
+    rules: ["textarea { width: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "min-width is active on a replaced inline element",
+    property: "min-width",
+    tagName: "img",
+    rules: ["img { min-width: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "max-width is active on a replaced inline element",
+    property: "max-width",
+    tagName: "img",
+    rules: ["img { max-width: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "width is active on a block element",
+    property: "width",
+    tagName: "div",
+    rules: ["div { width: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "min-width is active on a block element",
+    property: "min-width",
+    tagName: "div",
+    rules: ["div { min-width: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "max-width is active on a block element",
+    property: "max-width",
+    tagName: "div",
+    rules: ["div { max-width: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "height is inactive on a non-replaced inline element",
+    property: "height",
+    tagName: "span",
+    rules: ["span { height: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "min-height is inactive on a non-replaced inline element",
+    property: "min-height",
+    tagName: "span",
+    rules: ["span { min-height: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "max-height is inactive on a non-replaced inline element",
+    property: "max-height",
+    tagName: "span",
+    rules: ["span { max-height: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "height is inactive on colgroup element",
+    property: "height",
+    tagName: "colgroup",
+    rules: ["colgroup { height: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "min-height is inactive on colgroup element",
+    property: "min-height",
+    tagName: "colgroup",
+    rules: ["colgroup { min-height: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "max-height is inactive on colgroup element",
+    property: "max-height",
+    tagName: "colgroup",
+    rules: ["colgroup { max-height: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "height is inactive on col element",
+    property: "height",
+    tagName: "col",
+    rules: ["col { height: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "min-height is inactive on col element",
+    property: "min-height",
+    tagName: "col",
+    rules: ["col { min-height: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "max-height is inactive on col element",
+    property: "max-height",
+    tagName: "col",
+    rules: ["col { max-height: 500px; }"],
+    isActive: false,
+  },
+  {
+    info: "height is active on a replaced inline element",
+    property: "height",
+    tagName: "img",
+    rules: ["img { height: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "height is active on an inline input element",
+    property: "height",
+    tagName: "input",
+    rules: ["input { display: inline; height: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "height is active on an inline select element",
+    property: "height",
+    tagName: "select",
+    rules: ["select { display: inline; height: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "height is active on a textarea element",
+    property: "height",
+    tagName: "textarea",
+    rules: ["textarea { height: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "min-height is active on a replaced inline element",
+    property: "min-height",
+    tagName: "img",
+    rules: ["img { min-height: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "max-height is active on a replaced inline element",
+    property: "max-height",
+    tagName: "img",
+    rules: ["img { max-height: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "height is active on a block element",
+    property: "height",
+    tagName: "div",
+    rules: ["div { height: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "min-height is active on a block element",
+    property: "min-height",
+    tagName: "div",
+    rules: ["div { min-height: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "max-height is active on a block element",
+    property: "max-height",
+    tagName: "div",
+    rules: ["div { max-height: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "height is active on an svg <rect> element.",
+    property: "height",
+    createTestElement: main => {
+      main.innerHTML = `
+        <svg width=100 height=100>
+          <rect width=100 fill=green></rect>
+        </svg>
+      `;
+      return main.querySelector("rect");
+    },
+    rules: ["rect { height: 100px; }"],
+    isActive: true,
+  },
+  createTableElementTestCase("width", false, "table-row"),
+  createTableElementTestCase("width", false, "table-row-group"),
+  createTableElementTestCase("width", true, "table-column"),
+  createTableElementTestCase("width", true, "table-column-group"),
+  createTableElementTestCase("height", false, "table-column"),
+  createTableElementTestCase("height", false, "table-column-group"),
+  createTableElementTestCase("height", true, "table-row"),
+  createTableElementTestCase("height", true, "table-row-group"),
+  createVerticalTableElementTestCase("width", true, "table-row"),
+  createVerticalTableElementTestCase("width", true, "table-row-group"),
+  createVerticalTableElementTestCase("width", false, "table-column"),
+  createVerticalTableElementTestCase("width", false, "table-column-group"),
+  createVerticalTableElementTestCase("height", true, "table-column"),
+  createVerticalTableElementTestCase("height", true, "table-column-group"),
+  createVerticalTableElementTestCase("height", false, "table-row"),
+  createVerticalTableElementTestCase("height", false, "table-row-group"),
+  {
+    info: "width's inactivity status for a row takes the table's writing mode into account",
+    property: "width",
+    createTestElement: rootNode => {
+      const table = document.createElement("table");
+      table.style.writingMode = "vertical-lr";
+      rootNode.appendChild(table);
+
+      const tbody = document.createElement("tbody");
+      table.appendChild(tbody);
+
+      const tr = document.createElement("tr");
+      tbody.appendChild(tr);
+
+      const td = document.createElement("td");
+      tr.appendChild(td);
+
+      return tr;
+    },
+    rules: ["tr { writing-mode: horizontal-tb; width: 360px; }"],
+    isActive: true,
+  },
+];
+
+function createTableElementTestCase(property, isActive, displayType) {
+  return {
+    info: `${property} is ${
+      isActive ? "active" : "inactive"
+    } on a ${displayType}`,
+    property,
+    tagName: "div",
+    rules: [`div { display: ${displayType}; ${property}: 100px; }`],
+    isActive,
+  };
+}
+
+function createVerticalTableElementTestCase(property, isActive, displayType) {
+  return {
+    info: `${property} is ${
+      isActive ? "active" : "inactive"
+    } on a vertical ${displayType}`,
+    property,
+    createTestElement: rootNode => {
+      const container = document.createElement("div");
+      container.style.writingMode = "vertical-lr";
+      rootNode.append(container);
+
+      const element = document.createElement("span");
+      container.append(element);
+
+      return element;
+    },
+    rules: [`span { display: ${displayType}; ${property}: 100px; }`],
+    isActive,
+  };
+}
diff --git a/devtools/server/tests/chrome/inactive-property-helper/place-items-content.mjs b/devtools/server/tests/chrome/inactive-property-helper/place-items-content.mjs
new file mode 100644
index 0000000000..f554a785a7
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/place-items-content.mjs
@@ -0,0 +1,159 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper `place-items` and `place-content` test cases.
+export default [
+  {
+    info: "place-items is inactive on block element",
+    property: "place-items",
+    tagName: "div",
+    rules: ["div { place-items: center; }"],
+    isActive: false,
+  },
+  {
+    info: "place-items is inactive on inline element",
+    property: "place-items",
+    tagName: "span",
+    rules: ["span { place-items: center; }"],
+    isActive: false,
+  },
+  {
+    info: "place-items is inactive on flex item",
+    property: "place-items",
+    createTestElement: rootNode => {
+      const container = document.createElement("div");
+      const element = document.createElement("span");
+      container.append(element);
+      rootNode.append(container);
+      return element;
+    },
+    rules: [
+      "div { display: flex; align-items: start; }",
+      "span { place-items: center; }",
+    ],
+    ruleIndex: 1,
+    isActive: false,
+  },
+  {
+    info: "place-items is inactive on grid item",
+    property: "place-items",
+    createTestElement: rootNode => {
+      const container = document.createElement("div");
+      const element = document.createElement("span");
+      container.append(element);
+      rootNode.append(container);
+      return element;
+    },
+    rules: [
+      "div { display: grid; align-items: start; }",
+      "span { place-items: center; }",
+    ],
+    ruleIndex: 1,
+    isActive: false,
+  },
+  {
+    info: "place-items is active on flex container",
+    property: "place-items",
+    tagName: "div",
+    rules: ["div { place-items: center;  display: flex;}"],
+    isActive: true,
+  },
+  {
+    info: "place-items is active on inline-flex container",
+    property: "place-items",
+    tagName: "div",
+    rules: ["div { place-items: center;  display: inline-flex;}"],
+    isActive: true,
+  },
+  {
+    info: "place-items is active on grid container",
+    property: "place-items",
+    tagName: "div",
+    rules: ["div { place-items: center;  display: grid;}"],
+    isActive: true,
+  },
+  {
+    info: "place-items is active on inline grid container",
+    property: "place-items",
+    tagName: "div",
+    rules: ["div { place-items: center;  display: inline-grid;}"],
+    isActive: true,
+  },
+  {
+    info: "place-content is inactive on block element",
+    property: "place-content",
+    tagName: "div",
+    rules: ["div { place-content: center; }"],
+    isActive: false,
+  },
+  {
+    info: "place-content is inactive on inline element",
+    property: "place-content",
+    tagName: "span",
+    rules: ["span { place-content: center; }"],
+    isActive: false,
+  },
+  {
+    info: "place-content is inactive on flex item",
+    property: "place-content",
+    createTestElement: rootNode => {
+      const container = document.createElement("div");
+      const element = document.createElement("span");
+      container.append(element);
+      rootNode.append(container);
+      return element;
+    },
+    rules: [
+      "div { display: flex; align-items: start; }",
+      "span { place-content: center; }",
+    ],
+    ruleIndex: 1,
+    isActive: false,
+  },
+  {
+    info: "place-content is inactive on grid item",
+    property: "place-content",
+    createTestElement: rootNode => {
+      const container = document.createElement("div");
+      const element = document.createElement("span");
+      container.append(element);
+      rootNode.append(container);
+      return element;
+    },
+    rules: [
+      "div { display: grid; align-items: start; }",
+      "span { place-content: center; }",
+    ],
+    ruleIndex: 1,
+    isActive: false,
+  },
+  {
+    info: "place-content is active on flex container",
+    property: "place-content",
+    tagName: "div",
+    rules: ["div { place-content: center;  display: flex;}"],
+    isActive: true,
+  },
+  {
+    info: "place-content is active on inline-flex container",
+    property: "place-content",
+    tagName: "div",
+    rules: ["div { place-content: center;  display: inline-flex;}"],
+    isActive: true,
+  },
+  {
+    info: "place-content is active on grid container",
+    property: "place-content",
+    tagName: "div",
+    rules: ["div { place-content: center;  display: grid;}"],
+    isActive: true,
+  },
+  {
+    info: "place-content is active on inline grid container",
+    property: "place-content",
+    tagName: "div",
+    rules: ["div { place-content: center;  display: inline-grid;}"],
+    isActive: true,
+  },
+];
diff --git a/devtools/server/tests/chrome/inactive-property-helper/positioned.mjs b/devtools/server/tests/chrome/inactive-property-helper/positioned.mjs
new file mode 100644
index 0000000000..0386c278c5
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/positioned.mjs
@@ -0,0 +1,82 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper positioned elements test cases.
+
+// These are the properties we care about, those that are inactive when the element isn't
+// positioned.
+const PROPERTIES = [
+  { property: "z-index", value: "2" },
+  { property: "top", value: "20px" },
+  { property: "right", value: "20px" },
+  { property: "bottom", value: "20px" },
+  { property: "left", value: "20px" },
+];
+
+// These are all of the different position values and whether the above properties are
+// active or not for each.
+const POSITIONS = [
+  { position: "unset", isActive: false },
+  { position: "initial", isActive: false },
+  { position: "inherit", isActive: false },
+  { position: "static", isActive: false },
+  { position: "absolute", isActive: true },
+  { position: "relative", isActive: true },
+  { position: "fixed", isActive: true },
+  { position: "sticky", isActive: true },
+];
+
+function makeTestCase(property, value, position, isActive) {
+  return {
+    info: `${property} is ${
+      isActive ? "" : "in"
+    }active when position is ${position}`,
+    property,
+    tagName: "div",
+    rules: [`div { ${property}: ${value}; position: ${position}; }`],
+    isActive,
+  };
+}
+
+// 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) {
+    mainTests.push(makeTestCase(property, value, position, isActive));
+  }
+}
+
+// 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;
diff --git a/devtools/server/tests/chrome/inactive-property-helper/scroll-padding.mjs b/devtools/server/tests/chrome/inactive-property-helper/scroll-padding.mjs
new file mode 100644
index 0000000000..acb2899be2
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/scroll-padding.mjs
@@ -0,0 +1,159 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper `scroll-padding-*` test cases.
+
+export default [
+  {
+    info: "scroll-padding is active on element with auto-overflow",
+    property: "scroll-padding",
+    tagName: "div",
+    rules: ["div { overflow: auto; scroll-padding: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "scroll-padding is active on element with scrollable overflow",
+    property: "scroll-padding",
+    tagName: "div",
+    rules: ["div { overflow: scroll; scroll-padding: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "scroll-padding is active on element with hidden overflow",
+    property: "scroll-padding",
+    tagName: "div",
+    rules: ["div { overflow: hidden; scroll-padding: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "scroll-padding is inactive on element with visible overflow",
+    property: "scroll-padding",
+    tagName: "div",
+    rules: ["div { scroll-padding: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "scroll-padding is inactive on element with clipped overflow",
+    property: "scroll-padding",
+    tagName: "div",
+    rules: ["div { overflow: clip; scroll-padding: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "scroll-padding is inactive on element with horizontally clipped overflow",
+    property: "scroll-padding",
+    tagName: "div",
+    rules: ["div { overflow-x: clip; scroll-padding: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "scroll-padding is inactive on element with vertically clipped overflow",
+    property: "scroll-padding",
+    tagName: "div",
+    rules: ["div { overflow-y: clip; scroll-padding: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "scroll-padding-top is inactive on element with visible overflow",
+    property: "scroll-padding-top",
+    tagName: "div",
+    rules: ["div { scroll-padding-top: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "scroll-padding-top is inactive on element with horizontally clipped overflow",
+    property: "scroll-padding-top",
+    tagName: "div",
+    rules: ["div { overflow-x: clip; scroll-padding-top: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "scroll-padding-top is inactive on element with vertically clipped overflow",
+    property: "scroll-padding-top",
+    tagName: "div",
+    rules: ["div { overflow-y: clip; scroll-padding-top: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "scroll-padding-top is active on element with horizontally clipped but vertical auto-overflow (as 'clip' is computed to 'hidden')",
+    property: "scroll-padding-top",
+    tagName: "div",
+    rules: [
+      "div { overflow-x: clip; overflow-y: auto; scroll-padding-top: 10px; }",
+    ],
+    isActive: true,
+  },
+  {
+    info: "scroll-padding-top is active on element with vertically clipped but horizontal auto-overflow (as 'clip' is computed to 'hidden')",
+    property: "scroll-padding-top",
+    tagName: "div",
+    rules: [
+      "div { overflow-x: auto; overflow-y: clip; scroll-padding-top: 10px; }",
+    ],
+    isActive: true,
+  },
+  {
+    info: "scroll-padding-right is inactive on element with visible overflow",
+    property: "scroll-padding-right",
+    tagName: "div",
+    rules: ["div { scroll-padding-right: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "scroll-padding-bottom is inactive on element with visible overflow",
+    property: "scroll-padding-bottom",
+    tagName: "div",
+    rules: ["div { scroll-padding-bottom: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "scroll-padding-left is inactive on element with visible overflow",
+    property: "scroll-padding-left",
+    tagName: "div",
+    rules: ["div { scroll-padding-left: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "scroll-padding-block is inactive on element with visible overflow",
+    property: "scroll-padding-block",
+    tagName: "div",
+    rules: ["div { scroll-padding-block: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "scroll-padding-block-end is inactive on element with visible overflow",
+    property: "scroll-padding-block-end",
+    tagName: "div",
+    rules: ["div { scroll-padding-block-end: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "scroll-padding-block-start is inactive on element with visible overflow",
+    property: "scroll-padding-block-start",
+    tagName: "div",
+    rules: ["div { scroll-padding-block-start: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "scroll-padding-inline is inactive on element with visible overflow",
+    property: "scroll-padding-inline",
+    tagName: "div",
+    rules: ["div { scroll-padding-inline: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "scroll-padding-inline-end is inactive on element with visible overflow",
+    property: "scroll-padding-inline-end",
+    tagName: "div",
+    rules: ["div { scroll-padding-inline-end: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "scroll-padding-inline-start is inactive on element with visible overflow",
+    property: "scroll-padding-inline-start",
+    tagName: "div",
+    rules: ["div { scroll-padding-inline-start: 10px; }"],
+    isActive: false,
+  },
+];
diff --git a/devtools/server/tests/chrome/inactive-property-helper/table.mjs b/devtools/server/tests/chrome/inactive-property-helper/table.mjs
new file mode 100644
index 0000000000..596698522c
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/table.mjs
@@ -0,0 +1,28 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper `table-layout` test cases.
+export default [
+  {
+    info: "table-layout is inactive on block element",
+    property: "table-layout",
+    tagName: "div",
+    rules: ["div { table-layout: fixed; }"],
+    isActive: false,
+  },
+  {
+    info: "table-layout is active on table element",
+    property: "table-layout",
+    tagName: "div",
+    rules: ["div { display: table; table-layout: fixed; }"],
+    isActive: true,
+  },
+  {
+    info: "table-layout is active on inline table element",
+    property: "table-layout",
+    tagName: "div",
+    rules: ["div { display: inline-table; table-layout: fixed; }"],
+    isActive: true,
+  },
+];
diff --git a/devtools/server/tests/chrome/inactive-property-helper/text-overflow.mjs b/devtools/server/tests/chrome/inactive-property-helper/text-overflow.mjs
new file mode 100644
index 0000000000..ada2211b3a
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/text-overflow.mjs
@@ -0,0 +1,92 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper `text-overflow` test cases.
+export default [
+  {
+    info: "text-overflow is inactive when overflow is not set",
+    property: "text-overflow",
+    tagName: "div",
+    rules: ["div { text-overflow: ellipsis; }"],
+    isActive: false,
+  },
+  {
+    info: "text-overflow is active when overflow is set to hidden",
+    property: "text-overflow",
+    tagName: "div",
+    rules: ["div { text-overflow: ellipsis; overflow: hidden; }"],
+    isActive: true,
+  },
+  {
+    info: "text-overflow is active when overflow is set to auto",
+    property: "text-overflow",
+    tagName: "div",
+    rules: ["div { text-overflow: ellipsis; overflow: auto; }"],
+    isActive: true,
+  },
+  {
+    info: "text-overflow is active when overflow is set to scroll",
+    property: "text-overflow",
+    tagName: "div",
+    rules: ["div { text-overflow: ellipsis; overflow: scroll; }"],
+    isActive: true,
+  },
+  {
+    info: "text-overflow is inactive when overflow is set to visible",
+    property: "text-overflow",
+    tagName: "div",
+    rules: ["div { text-overflow: ellipsis; overflow: visible; }"],
+    isActive: false,
+  },
+  {
+    info: "text-overflow is active when overflow-x is set to hidden on horizontal writing mode",
+    property: "text-overflow",
+    tagName: "div",
+    rules: [
+      "div { writing-mode: lr; text-overflow: ellipsis; overflow-x: hidden; }",
+    ],
+    isActive: true,
+  },
+  {
+    info: "text-overflow is inactive when overflow-x is set to visible on horizontal writing mode",
+    property: "text-overflow",
+    tagName: "div",
+    rules: [
+      "div { writing-mode: lr; text-overflow: ellipsis; overflow-x: visible; }",
+    ],
+    isActive: false,
+  },
+  {
+    info: "text-overflow is active when overflow-y is set to hidden on vertical writing mode",
+    property: "text-overflow",
+    tagName: "div",
+    rules: [
+      "div { writing-mode: vertical-lr; text-overflow: ellipsis; overflow-y: hidden; }",
+    ],
+    isActive: true,
+  },
+  {
+    info: "text-overflow is inactive when overflow-y is set to visible on vertical writing mode",
+    property: "text-overflow",
+    tagName: "div",
+    rules: [
+      "div { writing-mode: vertical-lr; text-overflow: ellipsis; overflow-y: visible; }",
+    ],
+    isActive: false,
+  },
+  {
+    info: "as soon as overflow:hidden is set, text-overflow is active whatever the box type",
+    property: "text-overflow",
+    tagName: "span",
+    rules: ["span { text-overflow: ellipsis; overflow: hidden; }"],
+    isActive: true,
+  },
+  {
+    info: "as soon as overflow:hidden is set, text-overflow is active whatever the box type",
+    property: "text-overflow",
+    tagName: "legend",
+    rules: ["legend { text-overflow: ellipsis; overflow: hidden; }"],
+    isActive: true,
+  },
+];
diff --git a/devtools/server/tests/chrome/inactive-property-helper/vertical-align.mjs b/devtools/server/tests/chrome/inactive-property-helper/vertical-align.mjs
new file mode 100644
index 0000000000..e9873d4865
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/vertical-align.mjs
@@ -0,0 +1,56 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper `vertical-align` test cases.
+export default [
+  {
+    info: "vertical-align is inactive on a block element",
+    property: "vertical-align",
+    tagName: "div",
+    rules: ["div { vertical-align: top; }"],
+    isActive: false,
+  },
+  {
+    info: "vertical-align is inactive on a span with display block",
+    property: "vertical-align",
+    tagName: "span",
+    rules: ["span { vertical-align: top; display: block;}"],
+    isActive: false,
+  },
+  {
+    info: "vertical-align is active on a div with display inline-block",
+    property: "vertical-align",
+    tagName: "div",
+    rules: ["div { vertical-align: top; display: inline-block;}"],
+    isActive: true,
+  },
+  {
+    info: "vertical-align is active on a table-cell",
+    property: "vertical-align",
+    tagName: "div",
+    rules: ["div { vertical-align: top; display: table-cell;}"],
+    isActive: true,
+  },
+  {
+    info: "vertical-align is active on a block element ::first-letter",
+    property: "vertical-align",
+    tagName: "div",
+    rules: ["div::first-letter { vertical-align: top; }"],
+    isActive: true,
+  },
+  {
+    info: "vertical-align is active on a block element ::first-line",
+    property: "vertical-align",
+    tagName: "div",
+    rules: ["div::first-line { vertical-align: top; }"],
+    isActive: true,
+  },
+  {
+    info: "vertical-align is active on an inline element",
+    property: "vertical-align",
+    tagName: "span",
+    rules: ["span { vertical-align: top; }"],
+    isActive: true,
+  },
+];
diff --git a/devtools/server/tests/chrome/inactive-property-helper/width-height-ruby.mjs b/devtools/server/tests/chrome/inactive-property-helper/width-height-ruby.mjs
new file mode 100644
index 0000000000..0dda222e0b
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/width-height-ruby.mjs
@@ -0,0 +1,147 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// InactivePropertyHelper `width & height on ruby element` test cases.
+export default [
+  {
+    info: "width is inactive on ruby element",
+    property: "width",
+    tagName: "ruby",
+    rules: ["ruby { width: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "min-width is inactive on ruby element",
+    property: "min-width",
+    tagName: "ruby",
+    rules: ["ruby { min-width: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "max-width is inactive on ruby element",
+    property: "max-width",
+    tagName: "ruby",
+    rules: ["ruby { max-width: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "height is inactive on ruby element",
+    property: "height",
+    tagName: "ruby",
+    rules: ["ruby { height: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "min-height is inactive on ruby element",
+    property: "min-height",
+    tagName: "ruby",
+    rules: ["ruby { min-height: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "max-height is inactive on ruby element",
+    property: "max-height",
+    tagName: "ruby",
+    rules: ["ruby { max-height: 10px; }"],
+    isActive: false,
+  },
+  {
+    info: "width is active on div element",
+    property: "width",
+    tagName: "div",
+    rules: ["div { width: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "min-width is active on div element",
+    property: "min-width",
+    tagName: "div",
+    rules: ["div { min-width: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "max-width is active on div element",
+    property: "max-width",
+    tagName: "div",
+    rules: ["div { max-width: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "height is active on div element",
+    property: "height",
+    tagName: "div",
+    rules: ["div { height: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "min-height is active on div element",
+    property: "min-height",
+    tagName: "div",
+    rules: ["div { min-height: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "max-height is active on div element",
+    property: "max-height",
+    tagName: "div",
+    rules: ["div { max-height: 10px; }"],
+    isActive: true,
+  },
+  {
+    info: "width is inactive on div element with display ruby",
+    property: "width",
+    tagName: "div",
+    rules: ["div { width: 10px; display: ruby;}"],
+    isActive: false,
+  },
+  {
+    info: "height is inactive on div element with display ruby",
+    property: "height",
+    tagName: "div",
+    rules: ["div { height: 10px; display: ruby;}"],
+    isActive: false,
+  },
+  {
+    info: "width is active on ruby element with display block",
+    property: "width",
+    tagName: "ruby",
+    rules: ["ruby { width: 10px; display: block;}"],
+    isActive: true,
+  },
+  {
+    info: "height is active on ruby element with display block",
+    property: "height",
+    tagName: "ruby",
+    rules: ["ruby { height: 10px; display: block;}"],
+    isActive: true,
+  },
+  {
+    info: "width is inactive on ruby-text element",
+    property: "width",
+    tagName: "rt",
+    rules: ["rt { width: 10px;}"],
+    isActive: false,
+  },
+  {
+    info: "height is inactive on ruby-text element",
+    property: "height",
+    tagName: "rt",
+    rules: ["rt { height: 10px;}"],
+    isActive: false,
+  },
+  {
+    info: "width is inactive on div elements with display ruby-text",
+    property: "width",
+    tagName: "div",
+    rules: ["div { width: 10px; display: ruby-text;}"],
+    isActive: false,
+  },
+  {
+    info: "height is inactive on div elements with display ruby-text",
+    property: "height",
+    tagName: "div",
+    rules: ["div { height: 10px; display: ruby-text;}"],
+    isActive: false,
+  },
+];