tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

border-image.mjs (5458B)

      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 }