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