devtools/server/tests/chrome/inactive-property-helper/float.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 `float` test cases.
   6 export default [
   7   {
   8     info: "display: inline is inactive on a floated element",
   9     property: "display",
  10     tagName: "div",
  11     rules: ["div { display: inline; float: right; }"],
  12     isActive: false,
  13     expectedMsgId: "inactive-css-not-display-block-on-floated-2",
  14   },
  15   {
  16     info: "display: block is active on a floated element",
  17     property: "display",
  18     tagName: "div",
  19     rules: ["div { display: block; float: right;}"],
  20     isActive: true,
  21   },
  22   {
  23     info: "display: inline-grid is inactive on a floated element",
  24     property: "display",
  25     createTestElement: rootNode => {
  26       const container = document.createElement("div");
  27       container.classList.add("test");
  28       rootNode.append(container);
  29       return container;
  30     },
  31     rules: [
  32       "div { float: left; display:block; }",
  33       ".test { display: inline-grid ;}",
  34     ],
  35     isActive: false,
  36     expectedMsgId: "inactive-css-not-display-block-on-floated-2",
  37   },
  38   {
  39     info: "display: table-footer-group is inactive on a floated element",
  40     property: "display",
  41     createTestElement: rootNode => {
  42       const container = document.createElement("div");
  43       container.style.display = "table";
  44       const footer = document.createElement("div");
  45       footer.classList.add("table-footer");
  46       container.append(footer);
  47       rootNode.append(container);
  48       return footer;
  49     },
  50     rules: [".table-footer { display: table-footer-group; float: left;}"],
  51     isActive: false,
  52     expectedMsgId: "inactive-css-not-display-block-on-floated-2",
  53   },
  54   createGridPlacementOnFloatedItemTest("grid-row"),
  55   createGridPlacementOnFloatedItemTest("grid-column"),
  56   createGridPlacementOnFloatedItemTest("grid-area", "foo"),
  57   {
  58     info: "float is valid on block-level elements",
  59     property: "float",
  60     tagName: "div",
  61     rules: ["div { float: right; }"],
  62     isActive: true,
  63   },
  64   {
  65     info: "float is invalid on flex items",
  66     property: "float",
  67     createTestElement: createContainerWithItem("flex"),
  68     rules: [".item { float: right; }"],
  69     isActive: false,
  70     expectedMsgId: "inactive-css-only-non-grid-or-flex-item",
  71   },
  72   {
  73     info: "float is invalid on grid items",
  74     property: "float",
  75     createTestElement: createContainerWithItem("grid"),
  76     rules: [".item { float: right; }"],
  77     isActive: false,
  78     expectedMsgId: "inactive-css-only-non-grid-or-flex-item",
  79   },
  80   {
  81     info: "clear is valid on block-level elements",
  82     property: "clear",
  83     tagName: "div",
  84     rules: ["div { clear: right; }"],
  85     isActive: true,
  86   },
  87   {
  88     info: "clear is valid on block-level grid containers",
  89     property: "clear",
  90     tagName: "div",
  91     rules: ["div { display: grid; clear: left; }"],
  92     isActive: true,
  93   },
  94   {
  95     info: "clear is invalid on non-block-level elements",
  96     property: "clear",
  97     tagName: "span",
  98     rules: ["span { clear: right; }"],
  99     isActive: false,
 100     expectedMsgId: "inactive-css-not-block",
 101   },
 102   {
 103     info: "shape-image-threshold is valid on floating elements",
 104     property: "shape-image-threshold",
 105     tagName: "div",
 106     rules: ["div { shape-image-threshold: 0.5; float: right; }"],
 107     isActive: true,
 108   },
 109   {
 110     info: "shape-image-threshold is invalid on non-floating elements",
 111     property: "shape-image-threshold",
 112     tagName: "div",
 113     rules: ["div { shape-image-threshold: 0.5; }"],
 114     isActive: false,
 115     expectedMsgId: "inactive-css-not-floated",
 116   },
 117   {
 118     info: "shape-outside is valid on floating elements",
 119     property: "shape-outside",
 120     tagName: "div",
 121     rules: ["div { shape-outside: circle(); float: right; }"],
 122     isActive: true,
 123   },
 124   {
 125     info: "shape-outside is invalid on non-floating elements",
 126     property: "shape-outside",
 127     tagName: "div",
 128     rules: ["div { shape-outside: circle(); }"],
 129     isActive: false,
 130     expectedMsgId: "inactive-css-not-floated",
 131   },
 132   {
 133     info: "shape-margin is valid on floating elements",
 134     property: "shape-margin",
 135     tagName: "div",
 136     rules: ["div { shape-margin: 10px; float: right; }"],
 137     isActive: true,
 138   },
 139   {
 140     info: "shape-margin is invalid on non-floating elements",
 141     property: "shape-margin",
 142     tagName: "div",
 143     rules: ["div { shape-margin: 10px; }"],
 144     isActive: false,
 145     expectedMsgId: "inactive-css-not-floated",
 146   },
 147 ];
 148
 149 function createGridPlacementOnFloatedItemTest(property, value = "2") {
 150   return {
 151     info: `grid placement property ${property} is active on a floated grid item`,
 152     property,
 153     createTestElement: rootNode => {
 154       const grid = document.createElement("div");
 155       grid.style.display = "grid";
 156       grid.style.gridTemplateRows = "repeat(5, 1fr)";
 157       grid.style.gridTemplateColumns = "repeat(5, 1fr)";
 158       grid.style.gridTemplateAreas = "'foo foo foo'";
 159       rootNode.appendChild(grid);
 160
 161       const item = document.createElement("span");
 162       grid.appendChild(item);
 163
 164       return item;
 165     },
 166     rules: [`span { ${property}: ${value}; float: left; }`],
 167     isActive: true,
 168   };
 169 }
 170
 171 function createContainerWithItem(display) {
 172   return rootNode => {
 173     const container = document.createElement("div");
 174     container.style.display = display;
 175     const item = document.createElement("div");
 176     item.classList.add("item");
 177     container.append(item);
 178     rootNode.append(container);
 179     return item;
 180   };
 181 }