summaryrefslogtreecommitdiffstats
path: root/devtools/server/tests/chrome/inactive-property-helper
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/align-content.mjs92
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/border-image.mjs162
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/cue-pseudo-element.mjs371
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/first-letter-pseudo-element.mjs32
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/first-line-pseudo-element.mjs50
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/flex-grid-item-properties.mjs229
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/float.mjs76
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/gap.mjs133
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/grid-container-properties.mjs43
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/grid-with-absolute-properties.mjs71
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/highlight-pseudo-elements.mjs155
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/margin-padding.mjs260
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/max-min-width-height.mjs366
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/multicol-container-properties.mjs39
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/place-items-content.mjs159
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/placeholder-pseudo-element.mjs122
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/positioned.mjs82
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/scroll-padding.mjs159
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/table-cell.mjs21
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/table.mjs28
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/text-overflow.mjs92
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/text-wrap.mjs86
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/vertical-align.mjs56
-rw-r--r--devtools/server/tests/chrome/inactive-property-helper/width-height-ruby.mjs147
24 files changed, 3031 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/cue-pseudo-element.mjs b/devtools/server/tests/chrome/inactive-property-helper/cue-pseudo-element.mjs
new file mode 100644
index 0000000000..7a55425632
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/cue-pseudo-element.mjs
@@ -0,0 +1,371 @@
+/* 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 `cue-pseudo-element` test cases.
+
+// "background",
+// "background-attachment",
+// "background-blend-mode",
+// "background-clip",
+// "background-color",
+// "background-image",
+// "background-origin",
+// "background-position",
+// "background-position-x",
+// "background-position-y",
+// "background-repeat",
+// "background-size",
+// "color",
+// "font",
+// "font-family",
+// "font-size",
+// "font-stretch",
+// "font-style",
+// "font-variant",
+// "font-variant-alternates",
+// "font-variant-caps",
+// "font-variant-east-asian",
+// "font-variant-ligatures",
+// "font-variant-numeric",
+// "font-variant-position",
+// "font-weight",
+// "line-height",
+// "opacity",
+// "outline",
+// "outline-color",
+// "outline-offset",
+// "outline-style",
+// "outline-width",
+// "ruby-position",
+// "text-combine-upright",
+// "text-decoration",
+// "text-decoration-color",
+// "text-decoration-line",
+// "text-decoration-style",
+// "text-decoration-thickness",
+// "text-shadow",
+// "visibility",
+// "white-space",
+
+export default [
+ {
+ info: "background is active on ::cue",
+ property: "background",
+ tagName: "video",
+ rules: ["video::cue { background: linear-gradient(white, black); }"],
+ isActive: true,
+ },
+ {
+ info: "background-attachment is active on ::cue",
+ property: "background-attachment",
+ tagName: "video",
+ rules: ["video::cue { background-attachment: fixed; }"],
+ isActive: true,
+ },
+ {
+ info: "background-blend-mode is active on ::cue",
+ property: "background-blend-mode",
+ tagName: "video",
+ rules: ["video::cue { background-blend-mode: difference; }"],
+ isActive: true,
+ },
+ {
+ info: "background-clip is active on ::cue",
+ property: "background-clip",
+ tagName: "video",
+ rules: ["video::cue { background-clip: padding-box; }"],
+ isActive: true,
+ },
+ {
+ info: "background-color is active on ::cue",
+ property: "background-color",
+ tagName: "video",
+ rules: ["video::cue { background-color: red; }"],
+ isActive: true,
+ },
+ {
+ info: "background-image is active on ::cue",
+ property: "background-image",
+ tagName: "video",
+ rules: [
+ "video::cue { background-image: url('https://example.com/image.png'); }",
+ ],
+ isActive: true,
+ },
+ {
+ info: "background-origin is active on ::cue",
+ property: "background-origin",
+ tagName: "video",
+ rules: ["video::cue { background-origin: padding-box; }"],
+ isActive: true,
+ },
+ {
+ info: "background-position is active on ::cue",
+ property: "background-position",
+ tagName: "video",
+ rules: ["video::cue { background-position: 0 0; }"],
+ isActive: true,
+ },
+ {
+ info: "background-position-x is active on ::cue",
+ property: "background-position-x",
+ tagName: "video",
+ rules: ["video::cue { background-position-x: 0; }"],
+ isActive: true,
+ },
+ {
+ info: "background-position-y is active on ::cue",
+ property: "background-position-y",
+ tagName: "video",
+ rules: ["video::cue { background-position-y: 0; }"],
+ isActive: true,
+ },
+ {
+ info: "background-repeat is active on ::cue",
+ property: "background-repeat",
+ tagName: "video",
+ rules: ["video::cue { background-repeat: repeat-y; }"],
+ isActive: true,
+ },
+ {
+ info: "background-size is active on ::cue",
+ property: "background-size",
+ tagName: "video",
+ rules: ["video::cue { background-size: 100% 100%; }"],
+ isActive: true,
+ },
+ {
+ info: "color is active on ::cue",
+ property: "color",
+ tagName: "video",
+ rules: ["video::cue { color: red; }"],
+ isActive: true,
+ },
+ {
+ info: "font is active on ::cue",
+ property: "font",
+ tagName: "video",
+ rules: ["video::cue { font: 1em sans-serif; }"],
+ isActive: true,
+ },
+ {
+ info: "font-family is active on ::cue",
+ property: "font-family",
+ tagName: "video",
+ rules: ["video::cue { font-family: sans-serif; }"],
+ isActive: true,
+ },
+ {
+ info: "font-size is active on ::cue",
+ property: "font-size",
+ tagName: "video",
+ rules: ["video::cue { font-size: 1em; }"],
+ isActive: true,
+ },
+ {
+ info: "font-stretch is active on ::cue",
+ property: "font-stretch",
+ tagName: "video",
+ rules: ["video::cue { font-stretch: ultra-condensed; }"],
+ isActive: true,
+ },
+ {
+ info: "font-style is active on ::cue",
+ property: "font-style",
+ tagName: "video",
+ rules: ["video::cue { font-style: italic; }"],
+ isActive: true,
+ },
+ {
+ info: "font-variant is active on ::cue",
+ property: "font-variant",
+ tagName: "video",
+ rules: ["video::cue { font-variant: small-caps; }"],
+ isActive: true,
+ },
+ {
+ info: "font-variant-alternates is active on ::cue",
+ property: "font-variant-alternates",
+ tagName: "video",
+ rules: ["video::cue { font-variant-alternates: slashed-zero; }"],
+ isActive: true,
+ },
+ {
+ info: "font-variant-caps is active on ::cue",
+ property: "font-variant-caps",
+ tagName: "video",
+ rules: ["video::cue { font-variant-caps: all-small-caps; }"],
+ isActive: true,
+ },
+ {
+ info: "font-variant-east-asian is active on ::cue",
+ property: "font-variant-east-asian",
+ tagName: "video",
+ rules: ["video::cue { font-variant-east-asian: ruby; }"],
+ isActive: true,
+ },
+ {
+ info: "font-variant-ligatures is active on ::cue",
+ property: "font-variant-ligatures",
+ tagName: "video",
+ rules: ["video::cue { font-variant-ligatures: common-ligatures; }"],
+ isActive: true,
+ },
+ {
+ info: "font-variant-numeric is active on ::cue",
+ property: "font-variant-numeric",
+ tagName: "video",
+ rules: ["video::cue { font-variant-numeric: ordinal; }"],
+ isActive: true,
+ },
+ {
+ info: "font-variant-position is active on ::cue",
+ property: "font-variant-position",
+ tagName: "video",
+ rules: ["video::cue { font-variant-position: sub; }"],
+ isActive: true,
+ },
+ {
+ info: "font-weight is active on ::cue",
+ property: "font-weight",
+ tagName: "video",
+ rules: ["video::cue { font-weight: bold; }"],
+ isActive: true,
+ },
+ {
+ info: "line-height is active on ::cue",
+ property: "line-height",
+ tagName: "video",
+ rules: ["video::cue { line-height: 1.2; }"],
+ isActive: true,
+ },
+ {
+ info: "opacity is active on ::cue",
+ property: "opacity",
+ tagName: "video",
+ rules: ["video::cue { opacity: 0.8; }"],
+ isActive: true,
+ },
+ {
+ info: "outline is active on ::cue",
+ property: "outline",
+ tagName: "video",
+ rules: ["video::cue { outline: 1px solid red; }"],
+ isActive: true,
+ },
+ {
+ info: "outline-color is active on ::cue",
+ property: "outline-color",
+ tagName: "video",
+ rules: ["video::cue { outline-color: red; }"],
+ isActive: true,
+ },
+ {
+ info: "outline-offset is active on ::cue",
+ property: "outline-offset",
+ tagName: "video",
+ rules: ["video::cue { outline-offset: 1px; }"],
+ isActive: true,
+ },
+ {
+ info: "outline-style is active on ::cue",
+ property: "outline-style",
+ tagName: "video",
+ rules: ["video::cue { outline-style: solid; }"],
+ isActive: true,
+ },
+ {
+ info: "outline-width is active on ::cue",
+ property: "outline-width",
+ tagName: "video",
+ rules: ["video::cue { outline-width: 1px; }"],
+ isActive: true,
+ },
+ {
+ info: "ruby-position is active on ::cue",
+ property: "ruby-position",
+ tagName: "video",
+ rules: ["video::cue { ruby-position: over; }"],
+ isActive: true,
+ },
+ {
+ info: "text-combine-upright is active on ::cue",
+ property: "text-combine-upright",
+ tagName: "video",
+ rules: ["video::cue { text-combine-upright: all; }"],
+ isActive: true,
+ },
+ {
+ info: "text-decoration is active on ::cue",
+ property: "text-decoration",
+ tagName: "video",
+ rules: ["video::cue { text-decoration: 1px underline red; }"],
+ isActive: true,
+ },
+ {
+ info: "text-decoration-color is active on ::cue",
+ property: "text-decoration-color",
+ tagName: "video",
+ rules: ["video::cue { text-decoration-color: red; }"],
+ isActive: true,
+ },
+ {
+ info: "text-decoration-line is active on ::cue",
+ property: "text-decoration-line",
+ tagName: "video",
+ rules: ["video::cue { text-decoration-line: underline; }"],
+ isActive: true,
+ },
+ {
+ info: "text-decoration-style is active on ::cue",
+ property: "text-decoration-style",
+ tagName: "video",
+ rules: ["video::cue { text-decoration-style: wavy; }"],
+ isActive: true,
+ },
+ {
+ info: "text-decoration-thickness is active on ::cue",
+ property: "text-decoration-thickness",
+ tagName: "video",
+ rules: ["video::cue { text-decoration-thickness: 1px; }"],
+ isActive: true,
+ },
+ {
+ info: "text-shadow is active on ::cue",
+ property: "text-shadow",
+ tagName: "video",
+ rules: ["video::cue { text-shadow: 1px 1px 1px red; }"],
+ isActive: true,
+ },
+ {
+ info: "visibility is active on ::cue",
+ property: "visibility",
+ tagName: "video",
+ rules: ["video::cue { visibility: hidden; }"],
+ isActive: true,
+ },
+ {
+ info: "white-space is active on ::cue",
+ property: "white-space",
+ tagName: "video",
+ rules: ["video::cue { white-space: nowrap; }"],
+ isActive: true,
+ },
+ {
+ info: "border is inactive on ::cue",
+ property: "border",
+ tagName: "video",
+ rules: ["video::cue { border: 1px solid red; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-cue-pseudo-element-not-supported",
+ },
+ {
+ info: "display is inactive on ::cue",
+ property: "display",
+ tagName: "video",
+ rules: ["video::cue { display: grid; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-cue-pseudo-element-not-supported",
+ },
+];
diff --git a/devtools/server/tests/chrome/inactive-property-helper/first-letter-pseudo-element.mjs b/devtools/server/tests/chrome/inactive-property-helper/first-letter-pseudo-element.mjs
new file mode 100644
index 0000000000..ebce0d292a
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/first-letter-pseudo-element.mjs
@@ -0,0 +1,32 @@
+/* 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 `first-letter-pseudo-element` test cases.
+
+// "content",
+
+export default [
+ {
+ info: "content is inactive on ::first-letter",
+ property: "content",
+ tagName: "div",
+ rules: ["div::first-letter { content: 'invalid'; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-first-letter-pseudo-element-not-supported",
+ },
+ {
+ info: "color is active on ::first-letter",
+ property: "color",
+ tagName: "div",
+ rules: ["div::first-letter { color: green; }"],
+ isActive: true,
+ },
+ {
+ info: "display is active on ::first-letter",
+ property: "display",
+ tagName: "div",
+ rules: ["div::first-letter { display: grid; }"],
+ isActive: true,
+ },
+];
diff --git a/devtools/server/tests/chrome/inactive-property-helper/first-line-pseudo-element.mjs b/devtools/server/tests/chrome/inactive-property-helper/first-line-pseudo-element.mjs
new file mode 100644
index 0000000000..68948a16bc
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/first-line-pseudo-element.mjs
@@ -0,0 +1,50 @@
+/* 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 `first-line-pseudo-element` test cases.
+
+// "direction",
+// "text-orientation",
+// "writing-mode",
+
+export default [
+ {
+ info: "direction is inactive on ::first-line",
+ property: "direction",
+ tagName: "div",
+ rules: ["div::first-line { direction: rtl; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-first-line-pseudo-element-not-supported",
+ },
+ {
+ info: "text-orientation is inactive on ::first-line",
+ property: "text-orientation",
+ tagName: "div",
+ rules: ["div::first-line { text-orientation: sideways; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-first-line-pseudo-element-not-supported",
+ },
+ {
+ info: "writing-mode is inactive on ::first-line",
+ property: "writing-mode",
+ tagName: "div",
+ rules: ["div::first-line { writing-mode: vertical-rl; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-first-line-pseudo-element-not-supported",
+ },
+ {
+ info: "color is active on ::first-line",
+ property: "color",
+ tagName: "div",
+ rules: ["div::first-line { color: green; }"],
+ isActive: true,
+ },
+ {
+ info: "display is active on ::first-line",
+ property: "display",
+ tagName: "div",
+ rules: ["div::first-line { display: grid; }"],
+ isActive: true,
+ },
+];
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/highlight-pseudo-elements.mjs b/devtools/server/tests/chrome/inactive-property-helper/highlight-pseudo-elements.mjs
new file mode 100644
index 0000000000..bcb5b8763c
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/highlight-pseudo-elements.mjs
@@ -0,0 +1,155 @@
+/* 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 `highlight-pseudo-elements` test cases.
+
+// "background",
+// "background-color",
+// "color",
+// "fill-color",
+// "stroke-color",
+// "stroke-width",
+// "text-decoration",
+// "text-shadow",
+// "text-underline-offset",
+// "text-underline-position",
+
+export default [
+ {
+ info: "width is inactive on ::selection",
+ property: "width",
+ tagName: "span",
+ rules: ["span::selection { width: 10px; }"],
+ isActive: false,
+ // `width` is also inactive on inline element, so make sure we get the warning
+ // because we're using it in a highlight pseudo.
+ expectedMsgId: "inactive-css-highlight-pseudo-elements-not-supported",
+ },
+ {
+ info: "display is inactive on ::highlight",
+ property: "display",
+ tagName: "span",
+ rules: ["span::highlight(result) { display: grid; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-highlight-pseudo-elements-not-supported",
+ },
+ {
+ // accept background shorthand, even if it might hold inactive values
+ info: "background is active on ::selection",
+ property: "background",
+ tagName: "span",
+ rules: ["span::selection { background: red; }"],
+ isActive: true,
+ },
+ {
+ info: "border-color is inactive on ::selection",
+ property: "border-color",
+ tagName: "span",
+ rules: ["span::selection { border-color: red; }"],
+ isActive: false,
+ // `width` is also inactive on inline element, so make sure we get the warning
+ // because we're using it in a highlight pseudo.
+ expectedMsgId: "inactive-css-highlight-pseudo-elements-not-supported",
+ },
+ {
+ info: "background-color is active on ::selection",
+ property: "background-color",
+ tagName: "span",
+ rules: ["span::selection { background-color: red; }"],
+ isActive: true,
+ },
+ {
+ info: "color is active on ::selection",
+ property: "color",
+ tagName: "span",
+ rules: ["span::selection { color: red; }"],
+ isActive: true,
+ },
+ {
+ info: "text-decoration is active on ::selection",
+ property: "text-decoration",
+ tagName: "span",
+ rules: [
+ "span::selection { text-decoration: double overline #FF3028 4px; }",
+ ],
+ isActive: true,
+ },
+ {
+ info: "text-decoration-color is active on ::selection",
+ property: "text-decoration-color",
+ tagName: "span",
+ rules: ["span::selection { text-decoration-color: #FF3028; }"],
+ isActive: true,
+ },
+ {
+ info: "text-decoration-line is active on ::selection",
+ property: "text-decoration-line",
+ tagName: "span",
+ rules: ["span::selection { text-decoration-line: overline; }"],
+ isActive: true,
+ },
+ {
+ info: "text-decoration-style is active on ::selection",
+ property: "text-decoration-style",
+ tagName: "span",
+ rules: ["span::selection { text-decoration-style: double; }"],
+ isActive: true,
+ },
+ {
+ info: "text-decoration-thickness is active on ::selection",
+ property: "text-decoration-thickness",
+ tagName: "span",
+ rules: ["span::selection { text-decoration-thickness: 4px; }"],
+ isActive: true,
+ },
+ {
+ info: "text-shadow is active on ::selection",
+ property: "text-shadow",
+ tagName: "span",
+ rules: ["span::selection { text-shadow: text-shadow: #FC0 1px 0 10px; }"],
+ isActive: true,
+ },
+ {
+ info: "text-underline-offset is active on ::selection",
+ property: "text-underline-offset",
+ tagName: "span",
+ rules: ["span::selection { text-underline-offset: 10px; }"],
+ isActive: true,
+ },
+ {
+ info: "text-underline-position is active on ::selection",
+ property: "text-underline-position",
+ tagName: "span",
+ rules: ["span::selection { text-underline-position: under; }"],
+ isActive: true,
+ },
+ {
+ info: "-webkit-text-fill-color is active on ::selection",
+ property: "-webkit-text-fill-color",
+ tagName: "span",
+ rules: ["span::selection { -webkit-text-fill-color: red; }"],
+ isActive: true,
+ },
+ {
+ info: "-webkit-text-stroke-color is active on ::selection",
+ property: "-webkit-text-stroke-color",
+ tagName: "span",
+ rules: ["span::selection { -webkit-text-stroke-color: red; }"],
+ isActive: true,
+ },
+ {
+ info: "-webkit-text-stroke-width is active on ::selection",
+ property: "-webkit-text-stroke-width",
+ tagName: "span",
+ rules: ["span::selection { -webkit-text-stroke-width: 4px; }"],
+ isActive: true,
+ },
+ {
+ info: "-webkit-text-stroke is active on ::selection",
+ property: "-webkit-text-stroke",
+ tagName: "span",
+ rules: ["span::selection { -webkit-text-stroke: 4px navy; }"],
+ isActive: true,
+ },
+];
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/multicol-container-properties.mjs b/devtools/server/tests/chrome/inactive-property-helper/multicol-container-properties.mjs
new file mode 100644
index 0000000000..6bc4e9dd13
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/multicol-container-properties.mjs
@@ -0,0 +1,39 @@
+/* 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:
+// `column-fill`, `column-rule`, `column-rule-color`, `column-rule-style`,
+// and `column-rule-width`.
+let tests = [];
+
+for (const { propertyName, propertyValue } of [
+ { propertyName: "column-fill", propertyValue: "auto" },
+ { propertyName: "column-rule", propertyValue: "1px solid black" },
+ { propertyName: "column-rule-color", propertyValue: "black" },
+ { propertyName: "column-rule-style", propertyValue: "solid" },
+ { propertyName: "column-rule-width", propertyValue: "1px" },
+]) {
+ tests = tests.concat(createTestsForProp(propertyName, propertyValue));
+}
+
+function createTestsForProp(propertyName, propertyValue) {
+ return [
+ {
+ info: `${propertyName} is active on a multi-column container`,
+ property: propertyName,
+ tagName: "div",
+ rules: [`div { columns:2; ${propertyName}: ${propertyValue}; }`],
+ isActive: true,
+ },
+ {
+ info: `${propertyName} is inactive on a non-multi-column container`,
+ property: propertyName,
+ tagName: "div",
+ rules: [`div { ${propertyName}: ${propertyValue}; }`],
+ isActive: false,
+ },
+ ];
+}
+
+export default tests;
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/placeholder-pseudo-element.mjs b/devtools/server/tests/chrome/inactive-property-helper/placeholder-pseudo-element.mjs
new file mode 100644
index 0000000000..6c9a81472b
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/placeholder-pseudo-element.mjs
@@ -0,0 +1,122 @@
+/* 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 `placeholder-pseudo-element` test cases.
+
+//"baseline-source",
+//"direction",
+//"dominant-baseline",
+//"line-height",
+//"text-orientation",
+//"vertical-align",
+//"writing-mode",
+//"alignment-baseline",
+//"baseline-shift",
+//"initial-letter",
+//"text-box-trim",
+
+export default [
+ {
+ info: "baseline-source is inactive on ::placeholder",
+ property: "baseline-source",
+ tagName: "input",
+ rules: ["input::placeholder { baseline-source: first; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-placeholder-pseudo-element-not-supported",
+ },
+ {
+ info: "direction is inactive on ::placeholder",
+ property: "direction",
+ tagName: "input",
+ rules: ["input::placeholder { direction: rtl; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-placeholder-pseudo-element-not-supported",
+ },
+ {
+ info: "dominant-baseline is inactive on ::placeholder",
+ property: "dominant-baseline",
+ tagName: "input",
+ rules: ["input::placeholder { dominant-baseline: central; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-placeholder-pseudo-element-not-supported",
+ },
+ {
+ info: "line-height is inactive on ::placeholder",
+ property: "line-height",
+ tagName: "input",
+ rules: ["input::placeholder { line-height: 2em; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-placeholder-pseudo-element-not-supported",
+ },
+ {
+ info: "text-orientation is inactive on ::placeholder",
+ property: "text-orientation",
+ tagName: "input",
+ rules: ["input::placeholder { text-orientation: sideways; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-placeholder-pseudo-element-not-supported",
+ },
+ {
+ info: "vertical-align is inactive on ::placeholder",
+ property: "vertical-align",
+ tagName: "input",
+ rules: ["input::placeholder { vertical-align: super; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-placeholder-pseudo-element-not-supported",
+ },
+ {
+ info: "writing-mode is inactive on ::placeholder",
+ property: "writing-mode",
+ tagName: "input",
+ rules: ["input::placeholder { writing-mode: vertical-rl; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-placeholder-pseudo-element-not-supported",
+ },
+ {
+ info: "alignment-baseline is inactive on ::placeholder",
+ property: "alignment-baseline",
+ tagName: "input",
+ rules: ["input::placeholder { alignment-baseline: central; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-placeholder-pseudo-element-not-supported",
+ },
+ {
+ info: "baseline-shift is inactive on ::placeholder",
+ property: "baseline-shift",
+ tagName: "input",
+ rules: ["input::placeholder { baseline-shift: super; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-placeholder-pseudo-element-not-supported",
+ },
+ {
+ info: "initial-letter is inactive on ::placeholder",
+ property: "initial-letter",
+ tagName: "input",
+ rules: ["input::placeholder { initial-letter: 2em; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-placeholder-pseudo-element-not-supported",
+ },
+ {
+ info: "text-box-trim is inactive on ::placeholder",
+ property: "text-box-trim",
+ tagName: "input",
+ rules: ["input::placeholder { text-box-trim: both; }"],
+ isActive: false,
+ expectedMsgId: "inactive-css-placeholder-pseudo-element-not-supported",
+ },
+ {
+ info: "color is active on ::placeholder",
+ property: "color",
+ tagName: "input",
+ rules: ["input::placeholder { color: green; }"],
+ isActive: true,
+ },
+ {
+ info: "display is active on ::placeholder",
+ property: "display",
+ tagName: "input",
+ rules: ["input::placeholder { display: 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-cell.mjs b/devtools/server/tests/chrome/inactive-property-helper/table-cell.mjs
new file mode 100644
index 0000000000..bda1f27015
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/table-cell.mjs
@@ -0,0 +1,21 @@
+/* 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 `empty-cells` test cases.
+export default [
+ {
+ info: "empty-cells is inactive on block element",
+ property: "empty-cells",
+ tagName: "div",
+ rules: ["div { empty-cells: hide; }"],
+ isActive: false,
+ },
+ {
+ info: "empty-cells is active on table cell element",
+ property: "empty-cells",
+ tagName: "div",
+ rules: ["div { display: table-cell; empty-cells: hide; }"],
+ isActive: true,
+ },
+];
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/text-wrap.mjs b/devtools/server/tests/chrome/inactive-property-helper/text-wrap.mjs
new file mode 100644
index 0000000000..58751aa764
--- /dev/null
+++ b/devtools/server/tests/chrome/inactive-property-helper/text-wrap.mjs
@@ -0,0 +1,86 @@
+/* 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-wrap: balance` test cases.
+const LOREM_IPSUM = `
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Donec a diam lectus. Sed sit amet ipsum mauris.
+ Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
+`;
+
+export default [
+ {
+ info: "text-wrap: balance; is inactive when line number exceeds threshold",
+ property: "text-wrap",
+ createTestElement: rootNode => {
+ const element = document.createElement("div");
+ element.textContent = LOREM_IPSUM;
+ rootNode.append(element);
+ return element;
+ },
+ tagName: "div",
+ rules: ["div { text-wrap: balance; width: 100px; }"],
+ isActive: false,
+ },
+ {
+ info: "text-wrap: balance; is active when line number is below threshold",
+ property: "text-wrap",
+ createTestElement: rootNode => {
+ const element = document.createElement("div");
+ element.textContent = LOREM_IPSUM;
+ rootNode.append(element);
+ return element;
+ },
+ tagName: "div",
+ rules: ["div { text-wrap: balance; width: 300px; }"],
+ isActive: true,
+ },
+ {
+ info: "text-wrap: balance is inactive when element is fragmented",
+ property: "text-wrap",
+ createTestElement: rootNode => {
+ const element = document.createElement("div");
+ element.textContent = `
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Donec a diam lectus. Sed sit amet ipsum mauris.
+ Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
+ `;
+ rootNode.append(element);
+ return element;
+ },
+ tagName: "div",
+ rules: ["div { text-wrap: balance; column-count: 2; }"],
+ isActive: false,
+ },
+ {
+ info: "text-wrap: balance; does not throw if element is not a block",
+ property: "text-wrap",
+ createTestElement: rootNode => {
+ const element = document.createElement("div");
+ element.textContent = LOREM_IPSUM;
+ rootNode.append(element);
+ return element;
+ },
+ tagName: "div",
+ rules: ["div { text-wrap: balance; display: inline; }"],
+ isActive: true,
+ },
+ {
+ info: "text-wrap: initial; is active",
+ property: "text-wrap",
+ createTestElement: rootNode => {
+ const element = document.createElement("div");
+ element.textContent = `
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Donec a diam lectus. Sed sit amet ipsum mauris.
+ Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
+ `;
+ rootNode.append(element);
+ return element;
+ },
+ tagName: "div",
+ rules: ["div { text-wrap: initial; width: 100px; }"],
+ 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,
+ },
+];