1 files changed, 162 insertions, 0 deletions
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,
+  };
+}