float.mjs (5714B)
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 valid on br elements", 96 property: "clear", 97 tagName: "br", 98 rules: ["br { clear: left; }"], 99 isActive: true, 100 }, 101 { 102 info: "clear is invalid on non-block-level elements", 103 property: "clear", 104 tagName: "span", 105 rules: ["span { clear: right; }"], 106 isActive: false, 107 expectedMsgId: "inactive-css-not-block", 108 }, 109 { 110 info: "shape-image-threshold is valid on floating elements", 111 property: "shape-image-threshold", 112 tagName: "div", 113 rules: ["div { shape-image-threshold: 0.5; float: right; }"], 114 isActive: true, 115 }, 116 { 117 info: "shape-image-threshold is invalid on non-floating elements", 118 property: "shape-image-threshold", 119 tagName: "div", 120 rules: ["div { shape-image-threshold: 0.5; }"], 121 isActive: false, 122 expectedMsgId: "inactive-css-not-floated", 123 }, 124 { 125 info: "shape-outside is valid on floating elements", 126 property: "shape-outside", 127 tagName: "div", 128 rules: ["div { shape-outside: circle(); float: right; }"], 129 isActive: true, 130 }, 131 { 132 info: "shape-outside is invalid on non-floating elements", 133 property: "shape-outside", 134 tagName: "div", 135 rules: ["div { shape-outside: circle(); }"], 136 isActive: false, 137 expectedMsgId: "inactive-css-not-floated", 138 }, 139 { 140 info: "shape-margin is valid on floating elements", 141 property: "shape-margin", 142 tagName: "div", 143 rules: ["div { shape-margin: 10px; float: right; }"], 144 isActive: true, 145 }, 146 { 147 info: "shape-margin is invalid on non-floating elements", 148 property: "shape-margin", 149 tagName: "div", 150 rules: ["div { shape-margin: 10px; }"], 151 isActive: false, 152 expectedMsgId: "inactive-css-not-floated", 153 }, 154 ]; 155 156 function createGridPlacementOnFloatedItemTest(property, value = "2") { 157 return { 158 info: `grid placement property ${property} is active on a floated grid item`, 159 property, 160 createTestElement: rootNode => { 161 const grid = document.createElement("div"); 162 grid.style.display = "grid"; 163 grid.style.gridTemplateRows = "repeat(5, 1fr)"; 164 grid.style.gridTemplateColumns = "repeat(5, 1fr)"; 165 grid.style.gridTemplateAreas = "'foo foo foo'"; 166 rootNode.appendChild(grid); 167 168 const item = document.createElement("span"); 169 grid.appendChild(item); 170 171 return item; 172 }, 173 rules: [`span { ${property}: ${value}; float: left; }`], 174 isActive: true, 175 }; 176 } 177 178 function createContainerWithItem(display) { 179 return rootNode => { 180 const container = document.createElement("div"); 181 container.style.display = display; 182 const item = document.createElement("div"); 183 item.classList.add("item"); 184 container.append(item); 185 rootNode.append(container); 186 return item; 187 }; 188 }