devtools/server/tests/chrome/inactive-property-helper/gap.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 `gap` test cases.
   6 export default [
   7   {
   8     info: "column-gap is inactive on non-grid and non-flex container",
   9     property: "column-gap",
  10     tagName: "div",
  11     rules: ["div { column-gap: 10px; display: block; }"],
  12     isActive: false,
  13   },
  14   {
  15     info: "column-gap is active on grid container",
  16     property: "column-gap",
  17     tagName: "div",
  18     rules: ["div { column-gap: 10px; display: grid; }"],
  19     isActive: true,
  20   },
  21   {
  22     info: "column-gap is active on flex container",
  23     property: "column-gap",
  24     tagName: "div",
  25     rules: ["div { column-gap: 10px; display: flex; }"],
  26     isActive: true,
  27   },
  28   {
  29     info: "column-gap is inactive on non-multi-col container",
  30     property: "column-gap",
  31     tagName: "div",
  32     rules: ["div { column-gap: 10px; column-count: auto; }"],
  33     isActive: false,
  34   },
  35   {
  36     info: "column-gap is active on multi-column container",
  37     property: "column-gap",
  38     tagName: "div",
  39     rules: ["div { column-gap: 10px; column-count: 2; }"],
  40     isActive: true,
  41   },
  42   {
  43     info: "row-gap is inactive on non-grid and non-flex container",
  44     property: "row-gap",
  45     tagName: "div",
  46     rules: ["div { row-gap: 10px; display: block; }"],
  47     isActive: false,
  48   },
  49   {
  50     info: "row-gap is active on grid container",
  51     property: "row-gap",
  52     tagName: "div",
  53     rules: ["div { row-gap: 10px; display: grid; }"],
  54     isActive: true,
  55   },
  56   {
  57     info: "row-gap is active on flex container",
  58     property: "row-gap",
  59     tagName: "div",
  60     rules: ["div { row-gap: 10px; display: flex; }"],
  61     isActive: true,
  62   },
  63   {
  64     info: "gap is inactive on non-grid and non-flex container",
  65     property: "gap",
  66     tagName: "div",
  67     rules: ["div { gap: 10px; display: block; }"],
  68     isActive: false,
  69   },
  70   {
  71     info: "gap is active on flex container",
  72     property: "gap",
  73     tagName: "div",
  74     rules: ["div { gap: 10px; display: flex; }"],
  75     isActive: true,
  76   },
  77   {
  78     info: "gap is active on grid container",
  79     property: "gap",
  80     tagName: "div",
  81     rules: ["div { gap: 10px; display: grid; }"],
  82     isActive: true,
  83   },
  84   {
  85     info: "gap is inactive on non-multi-col container",
  86     property: "gap",
  87     tagName: "div",
  88     rules: ["div { gap: 10px; column-count: auto; }"],
  89     isActive: false,
  90   },
  91   {
  92     info: "gap is active on multi-col container",
  93     property: "gap",
  94     tagName: "div",
  95     rules: ["div { gap: 10px; column-count: 2; }"],
  96     isActive: true,
  97   },
  98   {
  99     info: "grid-gap is inactive on non-grid and non-flex container",
 100     property: "grid-gap",
 101     tagName: "div",
 102     rules: ["div { grid-gap: 10px; display: block; }"],
 103     isActive: false,
 104   },
 105   {
 106     info: "grid-gap is active on flex container",
 107     property: "grid-gap",
 108     tagName: "div",
 109     rules: ["div { grid-gap: 10px; display: flex; }"],
 110     isActive: true,
 111   },
 112   {
 113     info: "grid-gap is active on grid container",
 114     property: "grid-gap",
 115     tagName: "div",
 116     rules: ["div { grid-gap: 10px; display: grid; }"],
 117     isActive: true,
 118   },
 119   {
 120     info: "grid-gap is inactive on non-multi-col container",
 121     property: "grid-gap",
 122     tagName: "div",
 123     rules: ["div { grid-gap: 10px; column-count: auto; }"],
 124     isActive: false,
 125   },
 126   {
 127     info: "grid-gap is active on multi-col container",
 128     property: "grid-gap",
 129     tagName: "div",
 130     rules: ["div { grid-gap: 10px; column-count: 2; }"],
 131     isActive: true,
 132   },
 133 ];