devtools/server/tests/chrome/inactive-property-helper/positioned.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 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;