diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/server/tests/chrome/inactive-property-helper/border-image.mjs | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/server/tests/chrome/inactive-property-helper/border-image.mjs')
-rw-r--r-- | devtools/server/tests/chrome/inactive-property-helper/border-image.mjs | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/devtools/server/tests/chrome/inactive-property-helper/border-image.mjs b/devtools/server/tests/chrome/inactive-property-helper/border-image.mjs new file mode 100644 index 0000000000..85c57418a4 --- /dev/null +++ b/devtools/server/tests/chrome/inactive-property-helper/border-image.mjs @@ -0,0 +1,162 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// InactivePropertyHelper `border-image` test cases. +export default [ + { + info: "border-image is active on another element then a table element or internal table element where border-collapse is not set to collapse", + property: "border-image", + tagName: "div", + rules: ["div { border-image: linear-gradient(red, yellow) 10; }"], + isActive: true, + }, + { + info: "border-image is active on another element then a table element or internal table element where border-collapse is set to collapse", + property: "border-image", + tagName: "div", + rules: [ + "div { border-image: linear-gradient(red, yellow) 10; border-collapse: collapse;}", + ], + isActive: true, + }, + { + info: "border-image is active on a td element with no table parent and the browser is not crashing", + property: "border-image", + tagName: "td", + rules: [ + "td { border-image: linear-gradient(red, yellow) 10; border-collapse: collapse;}", + ], + isActive: true, + }, + createTableElementsToTestBorderImage({ + useDivTagWithDisplayTableStyle: false, + borderCollapse: true, + borderCollapsePropertyIsInherited: false, + isActive: true, + }), + createTableElementsToTestBorderImage({ + useDivTagWithDisplayTableStyle: false, + borderCollapse: false, + borderCollapsePropertyIsInherited: false, + isActive: true, + }), + createTableElementsToTestBorderImage({ + useDivTagWithDisplayTableStyle: false, + borderCollapse: true, + borderCollapsePropertyIsInherited: true, + isActive: false, + }), + createTableElementsToTestBorderImage({ + useDivTagWithDisplayTableStyle: false, + borderCollapse: false, + borderCollapsePropertyIsInherited: true, + isActive: true, + }), + createTableElementsToTestBorderImage({ + useDivTagWithDisplayTableStyle: true, + borderCollapse: true, + borderCollapsePropertyIsInherited: false, + isActive: true, + }), + createTableElementsToTestBorderImage({ + useDivTagWithDisplayTableStyle: true, + borderCollapse: false, + borderCollapsePropertyIsInherited: false, + isActive: true, + }), + createTableElementsToTestBorderImage({ + useDivTagWithDisplayTableStyle: true, + borderCollapse: true, + borderCollapsePropertyIsInherited: true, + isActive: false, + }), + createTableElementsToTestBorderImage({ + useDivTagWithDisplayTableStyle: true, + borderCollapse: false, + borderCollapsePropertyIsInherited: true, + isActive: true, + }), +]; + +/** + * @param {Object} testParameters + * @param {bool} testParameters.useDivTagWithDisplayTableStyle use generic divs using display property instead of actual table/tr/td tags + * @param {bool} testParameters.borderCollapse is `border-collapse` property set to `collapse` ( instead of `separate`) + * @param {bool} testParameters.borderCollapsePropertyIsInherited should the border collapse property be inherited from the table parent (instead of directly set on the internal table element) + * @param {bool} testParameters.isActive is the border-image property actve on the element + * @returns + */ +function createTableElementsToTestBorderImage({ + useDivTagWithDisplayTableStyle, + borderCollapse, + borderCollapsePropertyIsInherited, + isActive, +}) { + return { + info: `border-image is ${ + isActive ? "active" : "inactive" + } on an internal table element where border-collapse is${ + borderCollapse ? "" : " not" + } set to collapse${ + borderCollapsePropertyIsInherited + ? " by being inherited from its table parent" + : "" + } when the table and its internal elements are ${ + useDivTagWithDisplayTableStyle ? "not " : "" + }using semantic tags (table, tr, td, ...)`, + property: "border-image", + createTestElement: rootNode => { + const table = useDivTagWithDisplayTableStyle + ? document.createElement("div") + : document.createElement("table"); + if (useDivTagWithDisplayTableStyle) { + table.style.display = "table"; + } + if (borderCollapsePropertyIsInherited) { + table.style.borderCollapse = `${ + borderCollapse ? "collapse" : "separate" + }`; + } + rootNode.appendChild(table); + + const tbody = useDivTagWithDisplayTableStyle + ? document.createElement("div") + : document.createElement("tbody"); + if (useDivTagWithDisplayTableStyle) { + tbody.style.display = "table-row-group"; + } + table.appendChild(tbody); + + const tr = useDivTagWithDisplayTableStyle + ? document.createElement("div") + : document.createElement("tr"); + if (useDivTagWithDisplayTableStyle) { + tr.style.display = "table-row"; + } + tbody.appendChild(tr); + + const td = useDivTagWithDisplayTableStyle + ? document.createElement("div") + : document.createElement("td"); + if (useDivTagWithDisplayTableStyle) { + td.style.display = "table-cell"; + td.classList.add("td"); + } + tr.appendChild(td); + + return td; + }, + rules: [ + `td, .td { + border-image: linear-gradient(red, yellow) 10; + ${ + !borderCollapsePropertyIsInherited + ? `border-collapse: ${borderCollapse ? "collapse" : "separate"};` + : "" + } + }`, + ], + isActive, + }; +} |