tor-browser

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

grid-with-absolute-properties.mjs (2479B)

      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 test cases:
      6 // `grid-area`, `grid-column`, `grid-column-end`, `grid-column-start`,
      7 // `grid-row`, `grid-row-end`, `grid-row-start`, `justify-self`, `align-self`
      8 // and `place-self`.
      9 let tests = [];
     10 
     11 for (const { propertyName, propertyValue } of [
     12  { propertyName: "grid-area", propertyValue: "2 / 1 / span 2 / span 3" },
     13  { propertyName: "grid-column", propertyValue: 2 },
     14  { propertyName: "grid-column-end", propertyValue: "span 3" },
     15  { propertyName: "grid-column-start", propertyValue: 2 },
     16  { propertyName: "grid-row", propertyValue: "1 / span 2" },
     17  { propertyName: "grid-row-end", propertyValue: "span 3" },
     18  { propertyName: "grid-row-start", propertyValue: 2 },
     19  { propertyName: "justify-self", propertyValue: "start" },
     20  { propertyName: "align-self", propertyValue: "auto" },
     21  { propertyName: "place-self", propertyValue: "auto center" },
     22 ]) {
     23  tests = tests.concat(createTestsForProp(propertyName, propertyValue));
     24 }
     25 
     26 function createTestsForProp(propertyName, propertyValue) {
     27  return [
     28    {
     29      info: `${propertyName} is active on a grid item`,
     30      property: `${propertyName}`,
     31      createTestElement,
     32      rules: [
     33        `#grid-container { display:grid; grid:auto/100px 100px; }`,
     34        `#grid-item { ${propertyName}: ${propertyValue}; }`,
     35      ],
     36      ruleIndex: 1,
     37      isActive: true,
     38    },
     39    {
     40      info: `${propertyName} is active on an absolutely positioned grid item`,
     41      property: `${propertyName}`,
     42      createTestElement,
     43      rules: [
     44        `#grid-container { display:grid; grid:auto/100px 100px; position: relative }`,
     45        `#grid-item { ${propertyName}: ${propertyValue}; position: absolute; }`,
     46      ],
     47      ruleIndex: 1,
     48      isActive: true,
     49    },
     50    {
     51      info: `${propertyName} is inactive on a non-grid item`,
     52      property: `${propertyName}`,
     53      tagName: `div`,
     54      rules: [`div { ${propertyName}: ${propertyValue}; }`],
     55      isActive: false,
     56    },
     57  ];
     58 }
     59 
     60 function createTestElement(rootNode) {
     61  const container = document.createElement("div");
     62  container.id = "grid-container";
     63  const element = document.createElement("div");
     64  element.id = "grid-item";
     65  container.append(element);
     66  rootNode.append(container);
     67 
     68  return element;
     69 }
     70 
     71 export default tests;