devtools/server/tests/chrome/inactive-property-helper/flex-grid-item-properties.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 `align-self`, `place-self`, and `order` test cases.
   6 export default [
   7   {
   8     info: "align-self is inactive on block element",
   9     property: "align-self",
  10     tagName: "div",
  11     rules: ["div { align-self: center; }"],
  12     isActive: false,
  13   },
  14   {
  15     info: "align-self is inactive on flex container",
  16     property: "align-self",
  17     tagName: "div",
  18     rules: ["div { align-self: center;  display: flex;}"],
  19     isActive: false,
  20   },
  21   {
  22     info: "align-self is inactive on inline-flex container",
  23     property: "align-self",
  24     tagName: "div",
  25     rules: ["div { align-self: center;  display: inline-flex;}"],
  26     isActive: false,
  27   },
  28   {
  29     info: "align-self is inactive on grid container",
  30     property: "align-self",
  31     tagName: "div",
  32     rules: ["div { align-self: center;  display: grid;}"],
  33     isActive: false,
  34   },
  35   {
  36     info: "align-self is inactive on inline grid container",
  37     property: "align-self",
  38     tagName: "div",
  39     rules: ["div { align-self: center;  display: inline-grid;}"],
  40     isActive: false,
  41   },
  42   {
  43     info: "align-self is inactive on inline element",
  44     property: "align-self",
  45     tagName: "span",
  46     rules: ["span { align-self: center; }"],
  47     isActive: false,
  48   },
  49   {
  50     info: "align-self is active on flex item",
  51     property: "align-self",
  52     createTestElement: rootNode => {
  53       const container = document.createElement("div");
  54       const element = document.createElement("span");
  55       container.append(element);
  56       rootNode.append(container);
  57       return element;
  58     },
  59     rules: [
  60       "div { display: flex; align-items: start; }",
  61       "span { align-self: center; }",
  62     ],
  63     ruleIndex: 1,
  64     isActive: true,
  65   },
  66   {
  67     info: "align-self is active on grid item",
  68     property: "align-self",
  69     createTestElement: rootNode => {
  70       const container = document.createElement("div");
  71       const element = document.createElement("span");
  72       container.append(element);
  73       rootNode.append(container);
  74       return element;
  75     },
  76     rules: [
  77       "div { display: grid; align-items: start; }",
  78       "span { align-self: center; }",
  79     ],
  80     ruleIndex: 1,
  81     isActive: true,
  82   },
  83   {
  84     info: "place-self is inactive on block element",
  85     property: "place-self",
  86     tagName: "div",
  87     rules: ["div { place-self: center; }"],
  88     isActive: false,
  89   },
  90   {
  91     info: "place-self is inactive on flex container",
  92     property: "place-self",
  93     tagName: "div",
  94     rules: ["div { place-self: center;  display: flex;}"],
  95     isActive: false,
  96   },
  97   {
  98     info: "place-self is inactive on inline-flex container",
  99     property: "place-self",
 100     tagName: "div",
 101     rules: ["div { place-self: center;  display: inline-flex;}"],
 102     isActive: false,
 103   },
 104   {
 105     info: "place-self is inactive on grid container",
 106     property: "place-self",
 107     tagName: "div",
 108     rules: ["div { place-self: center;  display: grid;}"],
 109     isActive: false,
 110   },
 111   {
 112     info: "place-self is inactive on inline grid container",
 113     property: "place-self",
 114     tagName: "div",
 115     rules: ["div { place-self: center;  display: inline-grid;}"],
 116     isActive: false,
 117   },
 118   {
 119     info: "place-self is inactive on inline element",
 120     property: "place-self",
 121     tagName: "span",
 122     rules: ["span { place-self: center; }"],
 123     isActive: false,
 124   },
 125   {
 126     info: "place-self is active on flex item",
 127     property: "place-self",
 128     createTestElement: rootNode => {
 129       const container = document.createElement("div");
 130       const element = document.createElement("span");
 131       container.append(element);
 132       rootNode.append(container);
 133       return element;
 134     },
 135     rules: [
 136       "div { display: flex; align-items: start; }",
 137       "span { place-self: center; }",
 138     ],
 139     ruleIndex: 1,
 140     isActive: true,
 141   },
 142   {
 143     info: "place-self is active on grid item",
 144     property: "place-self",
 145     createTestElement: rootNode => {
 146       const container = document.createElement("div");
 147       const element = document.createElement("span");
 148       container.append(element);
 149       rootNode.append(container);
 150       return element;
 151     },
 152     rules: [
 153       "div { display: grid; align-items: start; }",
 154       "span { place-self: center; }",
 155     ],
 156     ruleIndex: 1,
 157     isActive: true,
 158   },
 159   {
 160     info: "order is inactive on block element",
 161     property: "order",
 162     tagName: "div",
 163     rules: ["div { order: 1; }"],
 164     isActive: false,
 165   },
 166   {
 167     info: "order is inactive on flex container",
 168     property: "order",
 169     tagName: "div",
 170     rules: ["div { order: 1;  display: flex;}"],
 171     isActive: false,
 172   },
 173   {
 174     info: "order is inactive on inline-flex container",
 175     property: "order",
 176     tagName: "div",
 177     rules: ["div { order: 1; display: inline-flex;}"],
 178     isActive: false,
 179   },
 180   {
 181     info: "order is inactive on grid container",
 182     property: "order",
 183     tagName: "div",
 184     rules: ["div { order: 1; display: grid;}"],
 185     isActive: false,
 186   },
 187   {
 188     info: "order is inactive on inline grid container",
 189     property: "order",
 190     tagName: "div",
 191     rules: ["div { order: 1; display: inline-grid;}"],
 192     isActive: false,
 193   },
 194   {
 195     info: "order is inactive on inline element",
 196     property: "order",
 197     tagName: "span",
 198     rules: ["span { order: 1; }"],
 199     isActive: false,
 200   },
 201   {
 202     info: "order is active on flex item",
 203     property: "order",
 204     createTestElement: rootNode => {
 205       const container = document.createElement("div");
 206       const element = document.createElement("span");
 207       container.append(element);
 208       rootNode.append(container);
 209       return element;
 210     },
 211     rules: ["div { display: flex; }", "span { order: 1; }"],
 212     ruleIndex: 1,
 213     isActive: true,
 214   },
 215   {
 216     info: "order is active on grid item",
 217     property: "order",
 218     createTestElement: rootNode => {
 219       const container = document.createElement("div");
 220       const element = document.createElement("span");
 221       container.append(element);
 222       rootNode.append(container);
 223       return element;
 224     },
 225     rules: ["div { display: grid; }", "span { order: 1; }"],
 226     ruleIndex: 1,
 227     isActive: true,
 228   },
 229 ];