tor-browser

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

positioned.mjs (2663B)

      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 positioned elements test cases.
      6 
      7 // These are the properties we care about, those that are inactive when the element isn't
      8 // positioned.
      9 const PROPERTIES = [
     10  { property: "z-index", value: "2" },
     11  { property: "top", value: "20px" },
     12  { property: "right", value: "20px" },
     13  { property: "bottom", value: "20px" },
     14  { property: "left", value: "20px" },
     15 ];
     16 
     17 // These are all of the different position values and whether the above properties are
     18 // active or not for each.
     19 const POSITIONS = [
     20  { position: "unset", isActive: false },
     21  { position: "initial", isActive: false },
     22  { position: "inherit", isActive: false },
     23  { position: "static", isActive: false },
     24  { position: "absolute", isActive: true },
     25  { position: "relative", isActive: true },
     26  { position: "fixed", isActive: true },
     27  { position: "sticky", isActive: true },
     28 ];
     29 
     30 function makeTestCase(property, value, position, isActive) {
     31  return {
     32    info: `${property} is ${
     33      isActive ? "" : "in"
     34    }active when position is ${position}`,
     35    property,
     36    tagName: "div",
     37    rules: [`div { ${property}: ${value}; position: ${position}; }`],
     38    isActive,
     39  };
     40 }
     41 
     42 // Make the test cases for all the combinations of PROPERTIES and POSITIONS
     43 const mainTests = [];
     44 
     45 for (const { property, value } of PROPERTIES) {
     46  for (const { position, isActive } of POSITIONS) {
     47    mainTests.push(makeTestCase(property, value, position, isActive));
     48  }
     49 }
     50 
     51 // Add a few test cases to check that z-index actually works inside grids and flexboxes.
     52 mainTests.push({
     53  info: "z-index is active even on unpositioned elements if they are grid items",
     54  property: "z-index",
     55  createTestElement: rootNode => {
     56    const container = document.createElement("div");
     57    const element = document.createElement("span");
     58    container.append(element);
     59    rootNode.append(container);
     60    return element;
     61  },
     62  rules: ["div { display: grid; }", "span { z-index: 3; }"],
     63  ruleIndex: 1,
     64  isActive: true,
     65 });
     66 
     67 mainTests.push({
     68  info: "z-index is active even on unpositioned elements if they are flex items",
     69  property: "z-index",
     70  createTestElement: rootNode => {
     71    const container = document.createElement("div");
     72    const element = document.createElement("span");
     73    container.append(element);
     74    rootNode.append(container);
     75    return element;
     76  },
     77  rules: ["div { display: flex; }", "span { z-index: 3; }"],
     78  ruleIndex: 1,
     79  isActive: true,
     80 });
     81 
     82 export default mainTests;