OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 #justifyItemsBaseline { | 5 #justifyItemsBaseline { |
6 justify-items: baseline; | 6 justify-items: baseline; |
7 } | 7 } |
8 | 8 |
9 #justifyItemsLastBaseline { | 9 #justifyItemsLastBaseline { |
10 justify-items: last-baseline; | 10 justify-items: last-baseline; |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
43 } | 43 } |
44 | 44 |
45 #justifyItemsFlexStart { | 45 #justifyItemsFlexStart { |
46 justify-items: flex-start; | 46 justify-items: flex-start; |
47 } | 47 } |
48 | 48 |
49 #justifyItemsFlexEnd { | 49 #justifyItemsFlexEnd { |
50 justify-items: flex-end; | 50 justify-items: flex-end; |
51 } | 51 } |
52 | 52 |
53 #justifyItemsEndTrue { | 53 #justifyItemsEndUnsafe { |
54 justify-items: end true; | 54 justify-items: end unsafe; |
55 } | 55 } |
56 | 56 |
57 #justifyItemsCenterTrue { | 57 #justifyItemsCenterUnsafe { |
58 justify-items: center true; | 58 justify-items: center unsafe; |
59 } | 59 } |
60 | 60 |
61 #justifyItemsSelfEndSafe { | 61 #justifyItemsSelfEndSafe { |
62 justify-items: self-end safe; | 62 justify-items: self-end safe; |
63 } | 63 } |
64 | 64 |
65 #justifyItemsSelfStartSafe { | 65 #justifyItemsSelfStartSafe { |
66 justify-items: self-start safe; | 66 justify-items: self-start safe; |
67 } | 67 } |
68 | 68 |
69 #justifyItemsRightSafe { | 69 #justifyItemsRightSafe { |
70 justify-items: right safe; | 70 justify-items: right safe; |
71 } | 71 } |
72 | 72 |
73 #justifyItemsLeftTrue { | 73 #justifyItemsLeftUnsafe { |
74 justify-items: left true; | 74 justify-items: left unsafe; |
75 } | 75 } |
76 | 76 |
77 #justifyItemsFlexStartTrue { | 77 #justifyItemsFlexStartUnsafe { |
78 justify-items: flex-start true; | 78 justify-items: flex-start unsafe; |
79 } | 79 } |
80 | 80 |
81 #justifyItemsFlexEndSafe { | 81 #justifyItemsFlexEndSafe { |
82 justify-items: flex-end safe; | 82 justify-items: flex-end safe; |
83 } | 83 } |
84 | 84 |
85 #justifyItemsLegacyLeft { | 85 #justifyItemsLegacyLeft { |
86 justify-items: legacy left; | 86 justify-items: legacy left; |
87 } | 87 } |
88 | 88 |
(...skipping 26 matching lines...) Expand all Loading... |
115 <div id="justifyItemsStart"></div> | 115 <div id="justifyItemsStart"></div> |
116 <div id="justifyItemsEnd"></div> | 116 <div id="justifyItemsEnd"></div> |
117 <div id="justifyItemsCenter"></div> | 117 <div id="justifyItemsCenter"></div> |
118 <div id="justifyItemsSelfStart"></div> | 118 <div id="justifyItemsSelfStart"></div> |
119 <div id="justifyItemsSelfEnd"></div> | 119 <div id="justifyItemsSelfEnd"></div> |
120 <div id="justifyItemsLeft"></div> | 120 <div id="justifyItemsLeft"></div> |
121 <div id="justifyItemsRight"></div> | 121 <div id="justifyItemsRight"></div> |
122 <div id="justifyItemsFlexStart"></div> | 122 <div id="justifyItemsFlexStart"></div> |
123 <div id="justifyItemsFlexEnd"></div> | 123 <div id="justifyItemsFlexEnd"></div> |
124 | 124 |
125 <div id="justifyItemsEndTrue"></div> | 125 <div id="justifyItemsEndUnsafe"></div> |
126 <div id="justifyItemsCenterTrue"></div> | 126 <div id="justifyItemsCenterUnsafe"></div> |
127 <div id="justifyItemsSelfEndSafe"></div> | 127 <div id="justifyItemsSelfEndSafe"></div> |
128 <div id="justifyItemsSelfStartSafe"></div> | 128 <div id="justifyItemsSelfStartSafe"></div> |
129 <div id="justifyItemsRightSafe"></div> | 129 <div id="justifyItemsRightSafe"></div> |
130 <div id="justifyItemsLeftTrue"></div> | 130 <div id="justifyItemsLeftUnsafe"></div> |
131 <div id="justifyItemsFlexStartTrue"></div> | 131 <div id="justifyItemsFlexStartUnsafe"></div> |
132 <div id="justifyItemsFlexEndSafe"></div> | 132 <div id="justifyItemsFlexEndSafe"></div> |
133 <div id="justifyItemsLegacyLeft"></div> | 133 <div id="justifyItemsLegacyLeft"></div> |
134 <div id="justifyItemsLegacyCenter"></div> | 134 <div id="justifyItemsLegacyCenter"></div> |
135 <div id="justifyItemsLegacyRight"></div> | 135 <div id="justifyItemsLegacyRight"></div> |
136 <div id="justifyItemsLeftLegacy"></div> | 136 <div id="justifyItemsLeftLegacy"></div> |
137 <div id="justifyItemsCenterLegacy"></div> | 137 <div id="justifyItemsCenterLegacy"></div> |
138 <div id="justifyItemsRightLegacy"></div> | 138 <div id="justifyItemsRightLegacy"></div> |
139 <script src="resources/alignment-parsing-utils.js"></script> | 139 <script src="resources/alignment-parsing-utils.js"></script> |
140 <script> | 140 <script> |
141 description('Test that setting and getting justify-items works as expected'); | 141 description('Test that setting and getting justify-items works as expected'); |
(...skipping 28 matching lines...) Expand all Loading... |
170 | 170 |
171 var justifyItemsRight = document.getElementById("justifyItemsRight"); | 171 var justifyItemsRight = document.getElementById("justifyItemsRight"); |
172 shouldBe("getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-item
s')", "'right'"); | 172 shouldBe("getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-item
s')", "'right'"); |
173 | 173 |
174 var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart"); | 174 var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart"); |
175 shouldBe("getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify-
items')", "'flex-start'"); | 175 shouldBe("getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify-
items')", "'flex-start'"); |
176 | 176 |
177 var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd"); | 177 var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd"); |
178 shouldBe("getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-it
ems')", "'flex-end'"); | 178 shouldBe("getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-it
ems')", "'flex-end'"); |
179 | 179 |
180 var justifyItemsEndTrue = document.getElementById("justifyItemsEndTrue"); | 180 var justifyItemsEndUnsafe = document.getElementById("justifyItemsEndUnsafe"); |
181 shouldBe("getComputedStyle(justifyItemsEndTrue, '').getPropertyValue('justify-it
ems')", "'end true'"); | 181 shouldBe("getComputedStyle(justifyItemsEndUnsafe, '').getPropertyValue('justify-
items')", "'end unsafe'"); |
182 | 182 |
183 var justifyItemsCenterTrue = document.getElementById("justifyItemsCenterTrue"); | 183 var justifyItemsCenterUnsafe = document.getElementById("justifyItemsCenterUnsafe
"); |
184 shouldBe("getComputedStyle(justifyItemsCenterTrue, '').getPropertyValue('justify
-items')", "'center true'"); | 184 shouldBe("getComputedStyle(justifyItemsCenterUnsafe, '').getPropertyValue('justi
fy-items')", "'center unsafe'"); |
185 | 185 |
186 var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe")
; | 186 var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe")
; |
187 shouldBe("getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justif
y-items')", "'self-end safe'"); | 187 shouldBe("getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justif
y-items')", "'self-end safe'"); |
188 | 188 |
189 var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSa
fe"); | 189 var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSa
fe"); |
190 shouldBe("getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('just
ify-items')", "'self-start safe'"); | 190 shouldBe("getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('just
ify-items')", "'self-start safe'"); |
191 | 191 |
192 var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe"); | 192 var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe"); |
193 shouldBe("getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify-
items')", "'right safe'"); | 193 shouldBe("getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify-
items')", "'right safe'"); |
194 | 194 |
195 var justifyItemsLeftTrue = document.getElementById("justifyItemsLeftTrue"); | 195 var justifyItemsLeftUnsafe = document.getElementById("justifyItemsLeftUnsafe"); |
196 shouldBe("getComputedStyle(justifyItemsLeftTrue, '').getPropertyValue('justify-i
tems')", "'left true'"); | 196 shouldBe("getComputedStyle(justifyItemsLeftUnsafe, '').getPropertyValue('justify
-items')", "'left unsafe'"); |
197 | 197 |
198 var justifyItemsFlexStartTrue = document.getElementById("justifyItemsFlexStartTr
ue"); | 198 var justifyItemsFlexStartUnsafe = document.getElementById("justifyItemsFlexStart
Unsafe"); |
199 shouldBe("getComputedStyle(justifyItemsFlexStartTrue, '').getPropertyValue('just
ify-items')", "'flex-start true'"); | 199 shouldBe("getComputedStyle(justifyItemsFlexStartUnsafe, '').getPropertyValue('ju
stify-items')", "'flex-start unsafe'"); |
200 | 200 |
201 var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe")
; | 201 var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe")
; |
202 shouldBe("getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justif
y-items')", "'flex-end safe'"); | 202 shouldBe("getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justif
y-items')", "'flex-end safe'"); |
203 | 203 |
204 var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft"); | 204 var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft"); |
205 shouldBe("getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify
-items')", "'legacy left'"); | 205 shouldBe("getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify
-items')", "'legacy left'"); |
206 | 206 |
207 var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter
"); | 207 var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter
"); |
208 shouldBe("getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justi
fy-items')", "'legacy center'"); | 208 shouldBe("getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justi
fy-items')", "'legacy center'"); |
209 | 209 |
(...skipping 15 matching lines...) Expand all Loading... |
225 document.body.appendChild(element); | 225 document.body.appendChild(element); |
226 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st
art'"); | 226 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st
art'"); |
227 | 227 |
228 debug(""); | 228 debug(""); |
229 debug("Test getting and setting justify-items through JS"); | 229 debug("Test getting and setting justify-items through JS"); |
230 element = document.createElement("div"); | 230 element = document.createElement("div"); |
231 document.body.appendChild(element); | 231 document.body.appendChild(element); |
232 element.style.justifyItems = "center"; | 232 element.style.justifyItems = "center"; |
233 checkValues(element, "justifyItems", "justify-items", "center", "center"); | 233 checkValues(element, "justifyItems", "justify-items", "center", "center"); |
234 | 234 |
235 element.style.justifyItems = "true start"; | 235 element.style.justifyItems = "unsafe start"; |
236 checkValues(element, "justifyItems", "justify-items", "start true", "start true
"); | 236 checkValues(element, "justifyItems", "justify-items", "start unsafe", "start un
safe"); |
237 | 237 |
238 element.style.justifyItems = "flex-end safe"; | 238 element.style.justifyItems = "flex-end safe"; |
239 checkValues(element, "justifyItems", "justify-items", "flex-end safe", "flex-en
d safe"); | 239 checkValues(element, "justifyItems", "justify-items", "flex-end safe", "flex-en
d safe"); |
240 | 240 |
241 element.style.justifyItems = "right legacy"; | 241 element.style.justifyItems = "right legacy"; |
242 checkValues(element, "justifyItems", "justify-items", "legacy right", "legacy r
ight"); | 242 checkValues(element, "justifyItems", "justify-items", "legacy right", "legacy r
ight"); |
243 | 243 |
244 element.style.justifyItems = "center legacy"; | 244 element.style.justifyItems = "center legacy"; |
245 checkValues(element, "justifyItems", "justify-items", "legacy center", "legacy
center"); | 245 checkValues(element, "justifyItems", "justify-items", "legacy center", "legacy
center"); |
246 | 246 |
(...skipping 12 matching lines...) Expand all Loading... |
259 checkValues(element, "justifyItems", "justify-items", "auto", "stretch"); | 259 checkValues(element, "justifyItems", "justify-items", "auto", "stretch"); |
260 | 260 |
261 element.style.justifyItems = "self-end"; | 261 element.style.justifyItems = "self-end"; |
262 checkValues(element, "justifyItems", "justify-items", "self-end", "self-end"); | 262 checkValues(element, "justifyItems", "justify-items", "self-end", "self-end"); |
263 | 263 |
264 debug(""); | 264 debug(""); |
265 debug("Test bad combinations of justify-items"); | 265 debug("Test bad combinations of justify-items"); |
266 element = document.createElement("div"); | 266 element = document.createElement("div"); |
267 document.body.appendChild(element); | 267 document.body.appendChild(element); |
268 | 268 |
269 checkBadValues(element, "justifyItems", "justify-items", "true auto"); | 269 checkBadValues(element, "justifyItems", "justify-items", "unsafe auto"); |
270 checkBadValues(element, "justifyItems", "justify-items", "auto safe"); | 270 checkBadValues(element, "justifyItems", "justify-items", "auto safe"); |
271 checkBadValues(element, "justifyItems", "justify-items", "auto left"); | 271 checkBadValues(element, "justifyItems", "justify-items", "auto left"); |
272 checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); | 272 checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); |
273 checkBadValues(element, "justifyItems", "justify-items", "baseline center"); | 273 checkBadValues(element, "justifyItems", "justify-items", "baseline center"); |
274 checkBadValues(element, "justifyItems", "justify-items", "stretch true"); | 274 checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe"); |
275 checkBadValues(element, "justifyItems", "justify-items", "stretch right"); | 275 checkBadValues(element, "justifyItems", "justify-items", "stretch right"); |
276 checkBadValues(element, "justifyItems", "justify-items", "true true"); | 276 checkBadValues(element, "justifyItems", "justify-items", "unsafe unsafe"); |
277 checkBadValues(element, "justifyItems", "justify-items", "true safe"); | 277 checkBadValues(element, "justifyItems", "justify-items", "unsafe safe"); |
278 checkBadValues(element, "justifyItems", "justify-items", "center start"); | 278 checkBadValues(element, "justifyItems", "justify-items", "center start"); |
279 checkBadValues(element, "justifyItems", "justify-items", "stretch true"); | 279 checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe"); |
280 checkBadValues(element, "justifyItems", "justify-items", "safe stretch"); | 280 checkBadValues(element, "justifyItems", "justify-items", "safe stretch"); |
281 checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); | 281 checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); |
282 checkBadValues(element, "justifyItems", "justify-items", "true baseline"); | 282 checkBadValues(element, "justifyItems", "justify-items", "unsafe baseline"); |
283 checkBadValues(element, "justifyItems", "justify-items", "true safe left"); | 283 checkBadValues(element, "justifyItems", "justify-items", "unsafe safe left"); |
284 checkBadValues(element, "justifyItems", "justify-items", "true left safe"); | 284 checkBadValues(element, "justifyItems", "justify-items", "unsafe left safe"); |
285 checkBadValues(element, "justifyItems", "justify-items", "left safe true safe")
; | 285 checkBadValues(element, "justifyItems", "justify-items", "left safe unsafe safe
"); |
286 checkBadValues(element, "justifyItems", "justify-items", "legacy start"); | 286 checkBadValues(element, "justifyItems", "justify-items", "legacy start"); |
287 checkBadValues(element, "justifyItems", "justify-items", "legacy end"); | 287 checkBadValues(element, "justifyItems", "justify-items", "legacy end"); |
288 checkBadValues(element, "justifyItems", "justify-items", "legacy right true"); | 288 checkBadValues(element, "justifyItems", "justify-items", "legacy right unsafe")
; |
289 checkBadValues(element, "justifyItems", "justify-items", "legacy auto"); | 289 checkBadValues(element, "justifyItems", "justify-items", "legacy auto"); |
290 checkBadValues(element, "justifyItems", "justify-items", "legacy stretch"); | 290 checkBadValues(element, "justifyItems", "justify-items", "legacy stretch"); |
291 checkBadValues(element, "justifyItems", "justify-items", "legacy"); | 291 checkBadValues(element, "justifyItems", "justify-items", "legacy"); |
292 checkBadValues(element, "justifyItems", "justify-items", "legacy left right"); | 292 checkBadValues(element, "justifyItems", "justify-items", "legacy left right"); |
293 | 293 |
294 debug(""); | 294 debug(""); |
295 debug("Test the value 'initial'"); | 295 debug("Test the value 'initial'"); |
296 element.style.display = ""; | 296 element.style.display = ""; |
297 checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "s
tart"); | 297 checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "s
tart"); |
298 | 298 |
299 debug(""); | 299 debug(""); |
300 debug("Test the value 'initial' for grid containers"); | 300 debug("Test the value 'initial' for grid containers"); |
301 element.style.display = "grid"; | 301 element.style.display = "grid"; |
302 checkInitialValues(element, "justifyItems", "justify-items", "left safe", "stret
ch"); | 302 checkInitialValues(element, "justifyItems", "justify-items", "left safe", "stret
ch"); |
303 | 303 |
304 debug(""); | 304 debug(""); |
305 debug("Test the value 'initial' for flex containers"); | 305 debug("Test the value 'initial' for flex containers"); |
306 element.style.display = "flex"; | 306 element.style.display = "flex"; |
307 checkInitialValues(element, "justifyItems", "justify-items", "right true", "stre
tch"); | 307 checkInitialValues(element, "justifyItems", "justify-items", "right unsafe", "st
retch"); |
308 | 308 |
309 debug(""); | 309 debug(""); |
310 debug("Test the value 'inherit'"); | 310 debug("Test the value 'inherit'"); |
311 checkInheritValues("justifyItems", "justify-items", "end"); | 311 checkInheritValues("justifyItems", "justify-items", "end"); |
312 checkInheritValues("justifyItems", "justify-items", "left safe"); | 312 checkInheritValues("justifyItems", "justify-items", "left safe"); |
313 checkInheritValues("justifyItems", "justify-items", "legacy center"); | 313 checkInheritValues("justifyItems", "justify-items", "legacy center"); |
314 | 314 |
315 debug(""); | 315 debug(""); |
316 debug("Test the value 'legacy'"); | 316 debug("Test the value 'legacy'"); |
317 checkLegacyValues("justifyItems", "justify-items", "legacy left"); | 317 checkLegacyValues("justifyItems", "justify-items", "legacy left"); |
318 checkLegacyValues("justifyItems", "justify-items", "legacy center"); | 318 checkLegacyValues("justifyItems", "justify-items", "legacy center"); |
319 checkLegacyValues("justifyItems", "justify-items", "legacy right"); | 319 checkLegacyValues("justifyItems", "justify-items", "legacy right"); |
320 | 320 |
321 </script> | 321 </script> |
322 </body> | 322 </body> |
323 </html> | 323 </html> |
OLD | NEW |