OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 #justifyItemsBaseline { | |
6 justify-items: baseline; | |
7 } | |
8 | |
9 #justifyItemsLastBaseline { | |
10 justify-items: last-baseline; | |
11 } | |
12 | |
13 #justifyItemsStretch { | |
14 justify-items: stretch; | |
15 } | |
16 | |
17 #justifyItemsStart { | |
18 justify-items: start; | |
19 } | |
20 | |
21 #justifyItemsEnd { | |
22 justify-items: end; | |
23 } | |
24 | |
25 #justifyItemsCenter { | |
26 justify-items: center; | |
27 } | |
28 | |
29 #justifyItemsSelfStart { | |
30 justify-items: self-start; | |
31 } | |
32 | |
33 #justifyItemsSelfEnd { | |
34 justify-items: self-end; | |
35 } | |
36 | |
37 #justifyItemsLeft { | |
38 justify-items: left; | |
39 } | |
40 | |
41 #justifyItemsRight { | |
42 justify-items: right; | |
43 } | |
44 | |
45 #justifyItemsFlexStart { | |
46 justify-items: flex-start; | |
47 } | |
48 | |
49 #justifyItemsFlexEnd { | |
50 justify-items: flex-end; | |
51 } | |
52 | |
53 #justifyItemsEndTrue { | |
54 justify-items: end true; | |
55 } | |
56 | |
57 #justifyItemsCenterTrue { | |
58 justify-items: center true; | |
59 } | |
60 | |
61 #justifyItemsSelfEndSafe { | |
62 justify-items: self-end safe; | |
63 } | |
64 | |
65 #justifyItemsSelfStartSafe { | |
66 justify-items: self-start safe; | |
67 } | |
68 | |
69 #justifyItemsRightSafe { | |
70 justify-items: right safe; | |
71 } | |
72 | |
73 #justifyItemsLeftTrue { | |
74 justify-items: left true; | |
75 } | |
76 | |
77 #justifyItemsFlexStartTrue { | |
78 justify-items: flex-start true; | |
79 } | |
80 | |
81 #justifyItemsFlexEndSafe { | |
82 justify-items: flex-end safe; | |
83 } | |
84 | |
85 #justifyItemsLegacyLeft { | |
86 justify-items: legacy left; | |
87 } | |
88 | |
89 #justifyItemsLegacyCenter { | |
90 justify-items: legacy center; | |
91 } | |
92 | |
93 #justifyItemsLegacyRight { | |
94 justify-items: legacy right; | |
95 } | |
Julien - ping for review
2014/06/26 17:37:20
Your test coverage still doesn't cover the case [
jfernandez
2014/06/26 22:36:05
Done.
| |
96 </style> | |
97 <script src="../../resources/js-test.js"></script> | |
98 </head> | |
99 <body> | |
100 <div id="justifyItemsBaseline"></div> | |
101 <div id="justifyItemsLastBaseline"></div> | |
102 <div id="justifyItemsStretch"></div> | |
103 <div id="justifyItemsStart"></div> | |
104 <div id="justifyItemsEnd"></div> | |
105 <div id="justifyItemsCenter"></div> | |
106 <div id="justifyItemsSelfStart"></div> | |
107 <div id="justifyItemsSelfEnd"></div> | |
108 <div id="justifyItemsLeft"></div> | |
109 <div id="justifyItemsRight"></div> | |
110 <div id="justifyItemsFlexStart"></div> | |
111 <div id="justifyItemsFlexEnd"></div> | |
112 | |
113 <div id="justifyItemsEndTrue"></div> | |
114 <div id="justifyItemsCenterTrue"></div> | |
115 <div id="justifyItemsSelfEndSafe"></div> | |
116 <div id="justifyItemsSelfStartSafe"></div> | |
117 <div id="justifyItemsRightSafe"></div> | |
118 <div id="justifyItemsLeftTrue"></div> | |
119 <div id="justifyItemsFlexStartTrue"></div> | |
120 <div id="justifyItemsFlexEndSafe"></div> | |
121 <div id="justifyItemsLegacyLeft"></div> | |
122 <div id="justifyItemsLegacyCenter"></div> | |
123 <div id="justifyItemsLegacyRight"></div> | |
124 <script> | |
125 description('Test that setting and getting justify-items works as expected'); | |
126 | |
127 debug("Test getting justify-items set through CSS"); | |
128 var justifyItemsBaseline = document.getElementById("justifyItemsBaseline"); | |
129 shouldBe("getComputedStyle(justifyItemsBaseline, '').getPropertyValue('justify-i tems')", "'baseline'"); | |
130 | |
131 var justifyItemsLastBaseline = document.getElementById("justifyItemsLastBaseline "); | |
132 shouldBe("getComputedStyle(justifyItemsLastBaseline, '').getPropertyValue('justi fy-items')", "'last-baseline'"); | |
133 | |
134 var justifyItemsStretch = document.getElementById("justifyItemsStretch"); | |
135 shouldBe("getComputedStyle(justifyItemsStretch, '').getPropertyValue('justify-it ems')", "'stretch'"); | |
136 | |
137 var justifyItemsStart = document.getElementById("justifyItemsStart"); | |
138 shouldBe("getComputedStyle(justifyItemsStart, '').getPropertyValue('justify-item s')", "'start'"); | |
139 | |
140 var justifyItemsEnd = document.getElementById("justifyItemsEnd"); | |
141 shouldBe("getComputedStyle(justifyItemsEnd, '').getPropertyValue('justify-items' )", "'end'"); | |
142 | |
143 var justifyItemsCenter = document.getElementById("justifyItemsCenter"); | |
144 shouldBe("getComputedStyle(justifyItemsCenter, '').getPropertyValue('justify-ite ms')", "'center'"); | |
145 | |
146 var justifyItemsSelfEnd = document.getElementById("justifyItemsSelfEnd"); | |
147 shouldBe("getComputedStyle(justifyItemsSelfEnd, '').getPropertyValue('justify-it ems')", "'self-end'"); | |
148 | |
149 var justifyItemsSelfStart = document.getElementById("justifyItemsSelfStart"); | |
150 shouldBe("getComputedStyle(justifyItemsSelfStart, '').getPropertyValue('justify- items')", "'self-start'"); | |
151 | |
152 var justifyItemsLeft = document.getElementById("justifyItemsLeft"); | |
153 shouldBe("getComputedStyle(justifyItemsLeft, '').getPropertyValue('justify-items ')", "'left'"); | |
154 | |
155 var justifyItemsRight = document.getElementById("justifyItemsRight"); | |
156 shouldBe("getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-item s')", "'right'"); | |
157 | |
158 var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart"); | |
159 shouldBe("getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify- items')", "'flex-start'"); | |
160 | |
161 var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd"); | |
162 shouldBe("getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-it ems')", "'flex-end'"); | |
163 | |
164 var justifyItemsEndTrue = document.getElementById("justifyItemsEndTrue"); | |
165 shouldBe("getComputedStyle(justifyItemsEndTrue, '').getPropertyValue('justify-it ems')", "'end true'"); | |
166 | |
167 var justifyItemsCenterTrue = document.getElementById("justifyItemsCenterTrue"); | |
168 shouldBe("getComputedStyle(justifyItemsCenterTrue, '').getPropertyValue('justify -items')", "'center true'"); | |
169 | |
170 var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe") ; | |
171 shouldBe("getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justif y-items')", "'self-end safe'"); | |
172 | |
173 var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSa fe"); | |
174 shouldBe("getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('just ify-items')", "'self-start safe'"); | |
175 | |
176 var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe"); | |
177 shouldBe("getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify- items')", "'right safe'"); | |
178 | |
179 var justifyItemsLeftTrue = document.getElementById("justifyItemsLeftTrue"); | |
180 shouldBe("getComputedStyle(justifyItemsLeftTrue, '').getPropertyValue('justify-i tems')", "'left true'"); | |
181 | |
182 var justifyItemsFlexStartTrue = document.getElementById("justifyItemsFlexStartTr ue"); | |
183 shouldBe("getComputedStyle(justifyItemsFlexStartTrue, '').getPropertyValue('just ify-items')", "'flex-start true'"); | |
184 | |
185 var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe") ; | |
186 shouldBe("getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justif y-items')", "'flex-end safe'"); | |
187 | |
188 var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft"); | |
189 shouldBe("getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify -items')", "'legacy left'"); | |
190 | |
191 var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter "); | |
192 shouldBe("getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justi fy-items')", "'legacy center'"); | |
193 | |
194 var justifyItemsLegacyRight = document.getElementById("justifyItemsLegacyRight") ; | |
195 shouldBe("getComputedStyle(justifyItemsLegacyRight, '').getPropertyValue('justif y-items')", "'legacy right'"); | |
196 | |
197 debug(""); | |
198 debug("Test initial value of justify-items through JS"); | |
199 element = document.createElement("div"); | |
200 document.body.appendChild(element); | |
201 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
202 | |
203 debug(""); | |
204 debug("Test getting and setting justify-items through JS"); | |
205 element = document.createElement("div"); | |
206 document.body.appendChild(element); | |
207 element.style.justifyItems = "center"; | |
208 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'ce nter'"); | |
209 shouldBe("element.style.justifyItems", "'center'"); | |
210 | |
211 element.style.justifyItems = "true start"; | |
212 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art true'"); | |
213 shouldBe("element.style.justifyItems", "'start true'"); | |
214 | |
215 element.style.justifyItems = "flex-end safe"; | |
216 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'fl ex-end safe'"); | |
217 shouldBe("element.style.justifyItems", "'flex-end safe'"); | |
Julien - ping for review
2014/06/26 17:37:20
Nit: Refactor these 2 lines repeated a lot into a
jfernandez
2014/06/26 22:36:05
Done.
| |
218 | |
219 element.style.justifyItems = "legacy center"; | |
220 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'le gacy center'"); | |
221 shouldBe("element.style.justifyItems", "'legacy center'"); | |
222 | |
223 element.style.justifyItems = "left legacy"; | |
224 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'le gacy left'"); | |
225 shouldBe("element.style.justifyItems", "'legacy left'"); | |
226 | |
227 element.style.justifyItems = "auto"; | |
228 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
229 shouldBe("element.style.justifyItems", "'auto'"); | |
230 | |
231 element.style.display = "flex"; | |
232 element.style.justifyItems = "auto"; | |
233 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st retch'"); | |
234 shouldBe("element.style.justifyItems", "'auto'"); | |
235 | |
236 element.style.display = "grid"; | |
237 element.style.justifyItems = "auto"; | |
238 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st retch'"); | |
239 shouldBe("element.style.justifyItems", "'auto'"); | |
240 | |
241 element.style.justifyItems = "self-end"; | |
242 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'se lf-end'"); | |
243 shouldBe("element.style.justifyItems", "'self-end'"); | |
244 | |
245 debug(""); | |
246 debug("Test bad combinaisons of justify-items"); | |
247 element = document.createElement("div"); | |
248 document.body.appendChild(element); | |
249 element.style.justifyItems = "true auto"; | |
250 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
251 shouldBe("element.style.justifyItems", "''"); | |
252 | |
253 element.style.justifyItems = "auto safe"; | |
254 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
255 shouldBe("element.style.justifyItems", "''"); | |
256 | |
257 element.style.justifyItems = "auto left"; | |
258 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
259 shouldBe("element.style.justifyItems", "''"); | |
260 | |
261 element.style.justifyItems = "baseline safe"; | |
262 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
263 shouldBe("element.style.justifyItems", "''"); | |
264 | |
265 element.style.justifyItems = "baseline center"; | |
266 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
267 shouldBe("element.style.justifyItems", "''"); | |
268 | |
269 element.style.justifyItems = "stretch true"; | |
270 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
271 shouldBe("element.style.justifyItems", "''"); | |
272 | |
273 element.style.justifyItems = "stretch right"; | |
274 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
275 shouldBe("element.style.justifyItems", "''"); | |
276 | |
277 element.style.justifyItems = "true true"; | |
278 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
279 shouldBe("element.style.justifyItems", "''"); | |
280 | |
281 element.style.justifyItems = "true safe"; | |
282 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
283 shouldBe("element.style.justifyItems", "''"); | |
284 | |
285 element.style.justifyItems = "center start"; | |
286 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
287 shouldBe("element.style.justifyItems", "''"); | |
288 | |
289 element.style.justifyItems = "stretch true"; | |
290 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
291 shouldBe("element.style.justifyItems", "''"); | |
292 | |
293 element.style.justifyItems = "safe stretch"; | |
294 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
295 shouldBe("element.style.justifyItems", "''"); | |
296 | |
297 element.style.justifyItems = "baseline safe"; | |
298 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
299 shouldBe("element.style.justifyItems", "''"); | |
300 | |
301 element.style.justifyItems = "true baseline"; | |
302 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
303 shouldBe("element.style.justifyItems", "''"); | |
304 | |
305 element.style.justifyItems = "true safe left"; | |
306 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
307 shouldBe("element.style.justifyItems", "''"); | |
308 | |
309 element.style.justifyItems = "true left safe"; | |
310 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
311 shouldBe("element.style.justifyItems", "''"); | |
312 | |
313 element.style.justifyItems = "left safe true safe"; | |
314 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
315 shouldBe("element.style.justifyItems", "''"); | |
316 | |
317 element.style.justifyItems = "legacy start"; | |
318 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
319 shouldBe("element.style.justifyItems", "''"); | |
320 | |
321 element.style.justifyItems = "legacy end"; | |
322 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
323 shouldBe("element.style.justifyItems", "''"); | |
324 | |
325 element.style.justifyItems = "legacy right true"; | |
326 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
327 shouldBe("element.style.justifyItems", "''"); | |
328 | |
329 element.style.justifyItems = "legacy auto"; | |
330 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
331 shouldBe("element.style.justifyItems", "''"); | |
332 | |
333 element.style.justifyItems = "legacy stretch"; | |
334 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
335 shouldBe("element.style.justifyItems", "''"); | |
336 | |
337 element.style.justifyItems = "legacy"; | |
338 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
339 shouldBe("element.style.justifyItems", "''"); | |
340 | |
341 element.style.justifyItems = "legacy left right"; | |
342 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
343 shouldBe("element.style.justifyItems", "''"); | |
344 | |
345 debug(""); | |
346 debug("Test the value 'initial'"); | |
347 element.style.justifyItems = "center"; | |
348 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'ce nter'"); | |
349 shouldBe("element.style.justifyItems", "'center'"); | |
350 element.style.justifyItems = "initial"; | |
351 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); | |
352 shouldBe("element.style.justifyItems", "'initial'"); | |
353 | |
354 debug(""); | |
355 debug("Test the value 'initial' for grid containers"); | |
356 element.style.display = "grid"; | |
357 element.style.justifyItems = "center"; | |
358 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'ce nter'"); | |
359 shouldBe("element.style.justifyItems", "'center'"); | |
360 element.style.justifyItems = "initial"; | |
361 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st retch'"); | |
362 shouldBe("element.style.justifyItems", "'initial'"); | |
363 | |
364 debug(""); | |
365 debug("Test the value 'initial' for flex containers"); | |
366 element.style.display = "flex"; | |
367 element.style.justifyItems = "center"; | |
368 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'ce nter'"); | |
369 shouldBe("element.style.justifyItems", "'center'"); | |
370 element.style.justifyItems = "initial"; | |
371 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st retch'"); | |
372 shouldBe("element.style.justifyItems", "'initial'"); | |
373 | |
374 debug(""); | |
375 debug("Test the value 'inherit'"); | |
376 parentElement = document.createElement("div"); | |
377 document.body.appendChild(parentElement); | |
378 parentElement.style.justifyItems = "end"; | |
379 shouldBe("getComputedStyle(parentElement, '').getPropertyValue('justify-items')" , "'end'"); | |
380 shouldBe("parentElement.style.justifyItems", "'end'"); | |
381 | |
382 element = document.createElement("div"); | |
383 parentElement.appendChild(element); | |
384 element.style.justifyItems = "inherit"; | |
385 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'en d'"); | |
386 shouldBe("element.style.justifyItems", "'inherit'"); | |
387 | |
388 debug(""); | |
389 debug("Test the value 'legacy'"); | |
390 parentElement = document.createElement("div"); | |
391 document.body.appendChild(parentElement); | |
392 parentElement.style.justifyItems = "legacy right"; | |
393 shouldBe("getComputedStyle(parentElement, '').getPropertyValue('justify-items')" , "'legacy right'"); | |
394 shouldBe("parentElement.style.justifyItems", "'legacy right'"); | |
395 | |
396 element = document.createElement("div"); | |
397 parentElement.appendChild(element); | |
398 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'le gacy right'"); | |
399 shouldBe("element.style.justifyItems", "''"); | |
400 | |
401 </script> | |
402 </body> | |
403 </html> | |
OLD | NEW |