devtools/server/tests/chrome/inactive-property-helper/place-items-content.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 `place-items` and `place-content` test cases.
   6 export default [
   7   {
   8     info: "place-items is inactive on block element",
   9     property: "place-items",
  10     tagName: "div",
  11     rules: ["div { place-items: center; }"],
  12     isActive: false,
  13   },
  14   {
  15     info: "place-items is inactive on inline element",
  16     property: "place-items",
  17     tagName: "span",
  18     rules: ["span { place-items: center; }"],
  19     isActive: false,
  20   },
  21   {
  22     info: "place-items is inactive on flex item",
  23     property: "place-items",
  24     createTestElement: rootNode => {
  25       const container = document.createElement("div");
  26       const element = document.createElement("span");
  27       container.append(element);
  28       rootNode.append(container);
  29       return element;
  30     },
  31     rules: [
  32       "div { display: flex; align-items: start; }",
  33       "span { place-items: center; }",
  34     ],
  35     ruleIndex: 1,
  36     isActive: false,
  37   },
  38   {
  39     info: "place-items is inactive on grid item",
  40     property: "place-items",
  41     createTestElement: rootNode => {
  42       const container = document.createElement("div");
  43       const element = document.createElement("span");
  44       container.append(element);
  45       rootNode.append(container);
  46       return element;
  47     },
  48     rules: [
  49       "div { display: grid; align-items: start; }",
  50       "span { place-items: center; }",
  51     ],
  52     ruleIndex: 1,
  53     isActive: false,
  54   },
  55   {
  56     info: "place-items is active on flex container",
  57     property: "place-items",
  58     tagName: "div",
  59     rules: ["div { place-items: center;  display: flex;}"],
  60     isActive: true,
  61   },
  62   {
  63     info: "place-items is active on inline-flex container",
  64     property: "place-items",
  65     tagName: "div",
  66     rules: ["div { place-items: center;  display: inline-flex;}"],
  67     isActive: true,
  68   },
  69   {
  70     info: "place-items is active on grid container",
  71     property: "place-items",
  72     tagName: "div",
  73     rules: ["div { place-items: center;  display: grid;}"],
  74     isActive: true,
  75   },
  76   {
  77     info: "place-items is active on inline grid container",
  78     property: "place-items",
  79     tagName: "div",
  80     rules: ["div { place-items: center;  display: inline-grid;}"],
  81     isActive: true,
  82   },
  83   {
  84     info: "place-content is inactive on block element",
  85     property: "place-content",
  86     tagName: "div",
  87     rules: ["div { place-content: center; }"],
  88     isActive: false,
  89   },
  90   {
  91     info: "place-content is inactive on inline element",
  92     property: "place-content",
  93     tagName: "span",
  94     rules: ["span { place-content: center; }"],
  95     isActive: false,
  96   },
  97   {
  98     info: "place-content is inactive on flex item",
  99     property: "place-content",
 100     createTestElement: rootNode => {
 101       const container = document.createElement("div");
 102       const element = document.createElement("span");
 103       container.append(element);
 104       rootNode.append(container);
 105       return element;
 106     },
 107     rules: [
 108       "div { display: flex; align-items: start; }",
 109       "span { place-content: center; }",
 110     ],
 111     ruleIndex: 1,
 112     isActive: false,
 113   },
 114   {
 115     info: "place-content is inactive on grid item",
 116     property: "place-content",
 117     createTestElement: rootNode => {
 118       const container = document.createElement("div");
 119       const element = document.createElement("span");
 120       container.append(element);
 121       rootNode.append(container);
 122       return element;
 123     },
 124     rules: [
 125       "div { display: grid; align-items: start; }",
 126       "span { place-content: center; }",
 127     ],
 128     ruleIndex: 1,
 129     isActive: false,
 130   },
 131   {
 132     info: "place-content is active on flex container",
 133     property: "place-content",
 134     tagName: "div",
 135     rules: ["div { place-content: center;  display: flex;}"],
 136     isActive: true,
 137   },
 138   {
 139     info: "place-content is active on inline-flex container",
 140     property: "place-content",
 141     tagName: "div",
 142     rules: ["div { place-content: center;  display: inline-flex;}"],
 143     isActive: true,
 144   },
 145   {
 146     info: "place-content is active on grid container",
 147     property: "place-content",
 148     tagName: "div",
 149     rules: ["div { place-content: center;  display: grid;}"],
 150     isActive: true,
 151   },
 152   {
 153     info: "place-content is active on inline grid container",
 154     property: "place-content",
 155     tagName: "div",
 156     rules: ["div { place-content: center;  display: inline-grid;}"],
 157     isActive: true,
 158   },
 159 ];