flex-grid-item-properties.mjs (6342B)
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 ];