devtools/server/tests/chrome/inactive-property-helper/border-image.mjs

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 // InactivePropertyHelper `border-image` test cases.
   6 export default [
   7   {
   8     info: "border-image is active on another element then a table element or internal table element where border-collapse is not set to collapse",
   9     property: "border-image",
  10     tagName: "div",
  11     rules: ["div { border-image: linear-gradient(red, yellow) 10; }"],
  12     isActive: true,
  13   },
  14   {
  15     info: "border-image is active on another element then a table element or internal table element where border-collapse is set to collapse",
  16     property: "border-image",
  17     tagName: "div",
  18     rules: [
  19       "div { border-image: linear-gradient(red, yellow) 10; border-collapse: collapse;}",
  20     ],
  21     isActive: true,
  22   },
  23   {
  24     info: "border-image is active on a td element with no table parent and the browser is not crashing",
  25     property: "border-image",
  26     tagName: "td",
  27     rules: [
  28       "td { border-image: linear-gradient(red, yellow) 10; border-collapse: collapse;}",
  29     ],
  30     isActive: true,
  31   },
  32   createTableElementsToTestBorderImage({
  33     useDivTagWithDisplayTableStyle: false,
  34     borderCollapse: true,
  35     borderCollapsePropertyIsInherited: false,
  36     isActive: true,
  37   }),
  38   createTableElementsToTestBorderImage({
  39     useDivTagWithDisplayTableStyle: false,
  40     borderCollapse: false,
  41     borderCollapsePropertyIsInherited: false,
  42     isActive: true,
  43   }),
  44   createTableElementsToTestBorderImage({
  45     useDivTagWithDisplayTableStyle: false,
  46     borderCollapse: true,
  47     borderCollapsePropertyIsInherited: true,
  48     isActive: false,
  49   }),
  50   createTableElementsToTestBorderImage({
  51     useDivTagWithDisplayTableStyle: false,
  52     borderCollapse: false,
  53     borderCollapsePropertyIsInherited: true,
  54     isActive: true,
  55   }),
  56   createTableElementsToTestBorderImage({
  57     useDivTagWithDisplayTableStyle: true,
  58     borderCollapse: true,
  59     borderCollapsePropertyIsInherited: false,
  60     isActive: true,
  61   }),
  62   createTableElementsToTestBorderImage({
  63     useDivTagWithDisplayTableStyle: true,
  64     borderCollapse: false,
  65     borderCollapsePropertyIsInherited: false,
  66     isActive: true,
  67   }),
  68   createTableElementsToTestBorderImage({
  69     useDivTagWithDisplayTableStyle: true,
  70     borderCollapse: true,
  71     borderCollapsePropertyIsInherited: true,
  72     isActive: false,
  73   }),
  74   createTableElementsToTestBorderImage({
  75     useDivTagWithDisplayTableStyle: true,
  76     borderCollapse: false,
  77     borderCollapsePropertyIsInherited: true,
  78     isActive: true,
  79   }),
  80 ];
  81
  82 /**
  83  * @param {Object} testParameters
  84  * @param {bool} testParameters.useDivTagWithDisplayTableStyle use generic divs using display property instead of actual table/tr/td tags
  85  * @param {bool} testParameters.borderCollapse is `border-collapse` property set to `collapse` ( instead of `separate`)
  86  * @param {bool} testParameters.borderCollapsePropertyIsInherited should the border collapse property be inherited from the table parent (instead of directly set on the internal table element)
  87  * @param {bool} testParameters.isActive is the border-image property actve on the element
  88  * @returns
  89  */
  90 function createTableElementsToTestBorderImage({
  91   useDivTagWithDisplayTableStyle,
  92   borderCollapse,
  93   borderCollapsePropertyIsInherited,
  94   isActive,
  95 }) {
  96   return {
  97     info: `border-image is ${
  98       isActive ? "active" : "inactive"
  99     } on an internal table element where border-collapse is${
 100       borderCollapse ? "" : " not"
 101     } set to collapse${
 102       borderCollapsePropertyIsInherited
 103         ? " by being inherited from its table parent"
 104         : ""
 105     } when the table and its internal elements are ${
 106       useDivTagWithDisplayTableStyle ? "not " : ""
 107     }using semantic tags (table, tr, td, ...)`,
 108     property: "border-image",
 109     createTestElement: rootNode => {
 110       const table = useDivTagWithDisplayTableStyle
 111         ? document.createElement("div")
 112         : document.createElement("table");
 113       if (useDivTagWithDisplayTableStyle) {
 114         table.style.display = "table";
 115       }
 116       if (borderCollapsePropertyIsInherited) {
 117         table.style.borderCollapse = `${
 118           borderCollapse ? "collapse" : "separate"
 119         }`;
 120       }
 121       rootNode.appendChild(table);
 122
 123       const tbody = useDivTagWithDisplayTableStyle
 124         ? document.createElement("div")
 125         : document.createElement("tbody");
 126       if (useDivTagWithDisplayTableStyle) {
 127         tbody.style.display = "table-row-group";
 128       }
 129       table.appendChild(tbody);
 130
 131       const tr = useDivTagWithDisplayTableStyle
 132         ? document.createElement("div")
 133         : document.createElement("tr");
 134       if (useDivTagWithDisplayTableStyle) {
 135         tr.style.display = "table-row";
 136       }
 137       tbody.appendChild(tr);
 138
 139       const td = useDivTagWithDisplayTableStyle
 140         ? document.createElement("div")
 141         : document.createElement("td");
 142       if (useDivTagWithDisplayTableStyle) {
 143         td.style.display = "table-cell";
 144         td.classList.add("td");
 145       }
 146       tr.appendChild(td);
 147
 148       return td;
 149     },
 150     rules: [
 151       `td, .td {
 152         border-image: linear-gradient(red, yellow) 10;
 153         ${
 154           !borderCollapsePropertyIsInherited
 155             ? `border-collapse: ${borderCollapse ? "collapse" : "separate"};`
 156             : ""
 157         }
 158      }`,
 159     ],
 160     isActive,
 161   };
 162 }