?  search:
summary | log | graphiclog1 | graphiclog2 | commit | commitdiff | tree | refs | edit | fork
blame | history | raw | HEAD
Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / css3 / flexbox / multiline-justify-content.html
blob17b82d377f864bf88f1f0c65d6c56b87c6ab1c70
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .flexbox {
5 position: relative;
6 display: flex;
7 background-color: grey;
8 max-width: 100px;
9 align-content: flex-start;
10 }
11 .flexbox > * {
12 flex: none;
13 }
14 .title {
15 margin-top: 1em;
16 }
17 .ltr {
18 direction: ltr;
19 }
20 .rtl {
21 direction: rtl;
22 }
23 .horizontal-tb {
24 -webkit-writing-mode: horizontal-tb;
25 }
26 .horizontal-bt {
27 -webkit-writing-mode: horizontal-bt;
28 }
29 .vertical-rl {
30 -webkit-writing-mode: vertical-rl;
31 }
32 .vertical-lr {
33 -webkit-writing-mode: vertical-lr;
34 }
35 .row {
36 flex-flow: row;
37 }
38 .row-reverse {
39 flex-flow: row-reverse;
40 }
41 .column {
42 flex-flow: column;
43 }
44 .column-reverse {
45 flex-flow: column-reverse;
46 }
47 .wrap {
48 flex-wrap: wrap;
49 }
50 .wrap-reverse {
51 flex-wrap: wrap-reverse;
52 }
53 .justify-content-flex-start {
54 justify-content: flex-start;
55 }
56 .justify-content-flex-end {
57 justify-content: flex-end;
58 }
59 .justify-content-center {
60 justify-content: center;
61 }
62 .justify-content-space-between {
63 justify-content: space-between;
64 }
65 .justify-content-space-around {
66 justify-content: space-around;
67 }
68 .flexbox > :nth-child(1) {
69 background-color: #0f0;
70 }
71 .flexbox > :nth-child(2) {
72 background-color: #090;
73 }
74 .flexbox > :nth-child(3) {
75 background-color: #00f;
76 }
77 .flexbox > :nth-child(4) {
78 background-color: #009;
79 }
80 </style>
81 <script src="../../resources/check-layout.js"></script>
82 <body onload="checkLayout('.flexbox')">
83
84 <script>
85 var expectations = {
86 'horizontal-tb': {
87 'row': {
88 'ltr': {
89 'wrap': {
90 'flex-start': {
91 'flexbox': [80, 20],
92 'child1': [40, 10, 0, 0],
93 'child2': [20, 10, 40, 0],
94 'child3': [40, 10, 0, 10],
95 'child4': [20, 10, 40, 10],
96 },
97 'flex-end': {
98 'flexbox': [80, 20],
99 'child1': [40, 10, 20, 0],
100 'child2': [20, 10, 60, 0],
101 'child3': [40, 10, 20, 10],
102 'child4': [20, 10, 60, 10],
103 },
104 'center': {
105 'flexbox': [80, 20],
106 'child1': [40, 10, 10, 0],
107 'child2': [20, 10, 50, 0],
108 'child3': [40, 10, 10, 10],
109 'child4': [20, 10, 50, 10],
110 },
111 'space-between': {
112 'flexbox': [80, 20],
113 'child1': [40, 10, 0, 0],
114 'child2': [20, 10, 60, 0],
115 'child3': [40, 10, 0, 10],
116 'child4': [20, 10, 60, 10],
117 },
118 'space-around': {
119 'flexbox': [80, 20],
120 'child1': [40, 10, 5, 0],
121 'child2': [20, 10, 55, 0],
122 'child3': [40, 10, 5, 10],
123 'child4': [20, 10, 55, 10],
124 },
125 },
126 'wrap-reverse': {
127 'flex-start': {
128 'flexbox': [80, 20],
129 'child1': [40, 10, 0, 10],
130 'child2': [20, 10, 40, 10],
131 'child3': [40, 10, 0, 0],
132 'child4': [20, 10, 40, 0],
133 },
134 'flex-end': {
135 'flexbox': [80, 20],
136 'child1': [40, 10, 20, 10],
137 'child2': [20, 10, 60, 10],
138 'child3': [40, 10, 20, 0],
139 'child4': [20, 10, 60, 0],
140 },
141 'center': {
142 'flexbox': [80, 20],
143 'child1': [40, 10, 10, 10],
144 'child2': [20, 10, 50, 10],
145 'child3': [40, 10, 10, 0],
146 'child4': [20, 10, 50, 0],
147 },
148 'space-between': {
149 'flexbox': [80, 20],
150 'child1': [40, 10, 0, 10],
151 'child2': [20, 10, 60, 10],
152 'child3': [40, 10, 0, 0],
153 'child4': [20, 10, 60, 0],
154 },
155 'space-around': {
156 'flexbox': [80, 20],
157 'child1': [40, 10, 5, 10],
158 'child2': [20, 10, 55, 10],
159 'child3': [40, 10, 5, 0],
160 'child4': [20, 10, 55, 0],
161 },
162 },
163 },
164 'rtl': {
165 'wrap': {
166 'flex-start': {
167 'flexbox': [80, 20],
168 'child1': [40, 10, 40, 0],
169 'child2': [20, 10, 20, 0],
170 'child3': [40, 10, 40, 10],
171 'child4': [20, 10, 20, 10],
172 },
173 'flex-end': {
174 'flexbox': [80, 20],
175 'child1': [40, 10, 20, 0],
176 'child2': [20, 10, 0, 0],
177 'child3': [40, 10, 20, 10],
178 'child4': [20, 10, 0, 10],
179 },
180 'center': {
181 'flexbox': [80, 20],
182 'child1': [40, 10, 30, 0],
183 'child2': [20, 10, 10, 0],
184 'child3': [40, 10, 30, 10],
185 'child4': [20, 10, 10, 10],
186 },
187 'space-between': {
188 'flexbox': [80, 20],
189 'child1': [40, 10, 40, 0],
190 'child2': [20, 10, 0, 0],
191 'child3': [40, 10, 40, 10],
192 'child4': [20, 10, 0, 10],
193 },
194 'space-around': {
195 'flexbox': [80, 20],
196 'child1': [40, 10, 35, 0],
197 'child2': [20, 10, 5, 0],
198 'child3': [40, 10, 35, 10],
199 'child4': [20, 10, 5, 10],
200 },
201 },
202 'wrap-reverse': {
203 'flex-start': {
204 'flexbox': [80, 20],
205 'child1': [40, 10, 40, 10],
206 'child2': [20, 10, 20, 10],
207 'child3': [40, 10, 40, 0],
208 'child4': [20, 10, 20, 0],
209 },
210 'flex-end': {
211 'flexbox': [80, 20],
212 'child1': [40, 10, 20, 10],
213 'child2': [20, 10, 0, 10],
214 'child3': [40, 10, 20, 0],
215 'child4': [20, 10, 0, 0],
216 },
217 'center': {
218 'flexbox': [80, 20],
219 'child1': [40, 10, 30, 10],
220 'child2': [20, 10, 10, 10],
221 'child3': [40, 10, 30, 0],
222 'child4': [20, 10, 10, 0],
223 },
224 'space-between': {
225 'flexbox': [80, 20],
226 'child1': [40, 10, 40, 10],
227 'child2': [20, 10, 0, 10],
228 'child3': [40, 10, 40, 0],
229 'child4': [20, 10, 0, 0],
230 },
231 'space-around': {
232 'flexbox': [80, 20],
233 'child1': [40, 10, 35, 10],
234 'child2': [20, 10, 5, 10],
235 'child3': [40, 10, 35, 0],
236 'child4': [20, 10, 5, 0],
237 },
238 },
239 },
240 },
241 'column': {
242 'ltr': {
243 'wrap': {
244 'flex-start': {
245 'flexbox': [100, 80],
246 'child1': [10, 40, 0, 0],
247 'child2': [10, 20, 0, 40],
248 'child3': [10, 40, 10, 0],
249 'child4': [10, 20, 10, 40],
250 },
251 'flex-end': {
252 'flexbox': [100, 80],
253 'child1': [10, 40, 0, 20],
254 'child2': [10, 20, 0, 60],
255 'child3': [10, 40, 10, 20],
256 'child4': [10, 20, 10, 60],
257 },
258 'center': {
259 'flexbox': [100, 80],
260 'child1': [10, 40, 0, 10],
261 'child2': [10, 20, 0, 50],
262 'child3': [10, 40, 10, 10],
263 'child4': [10, 20, 10, 50],
264 },
265 'space-between': {
266 'flexbox': [100, 80],
267 'child1': [10, 40, 0, 0],
268 'child2': [10, 20, 0, 60],
269 'child3': [10, 40, 10, 0],
270 'child4': [10, 20, 10, 60],
271 },
272 'space-around': {
273 'flexbox': [100, 80],
274 'child1': [10, 40, 0, 5],
275 'child2': [10, 20, 0, 55],
276 'child3': [10, 40, 10, 5],
277 'child4': [10, 20, 10, 55],
278 },
279 },
280 'wrap-reverse': {
281 'flex-start': {
282 'flexbox': [100, 80],
283 'child1': [10, 40, 90, 0],
284 'child2': [10, 20, 90, 40],
285 'child3': [10, 40, 80, 0],
286 'child4': [10, 20, 80, 40],
287 },
288 'flex-end': {
289 'flexbox': [100, 80],
290 'child1': [10, 40, 90, 20],
291 'child2': [10, 20, 90, 60],
292 'child3': [10, 40, 80, 20],
293 'child4': [10, 20, 80, 60],
294 },
295 'center': {
296 'flexbox': [100, 80],
297 'child1': [10, 40, 90, 10],
298 'child2': [10, 20, 90, 50],
299 'child3': [10, 40, 80, 10],
300 'child4': [10, 20, 80, 50],
301 },
302 'space-between': {
303 'flexbox': [100, 80],
304 'child1': [10, 40, 90, 0],
305 'child2': [10, 20, 90, 60],
306 'child3': [10, 40, 80, 0],
307 'child4': [10, 20, 80, 60],
308 },
309 'space-around': {
310 'flexbox': [100, 80],
311 'child1': [10, 40, 90, 5],
312 'child2': [10, 20, 90, 55],
313 'child3': [10, 40, 80, 5],
314 'child4': [10, 20, 80, 55],
315 },
316 },
317 },
318 'rtl': {
319 'wrap': {
320 'flex-start': {
321 'flexbox': [100, 80],
322 'child1': [10, 40, 90, 0],
323 'child2': [10, 20, 90, 40],
324 'child3': [10, 40, 80, 0],
325 'child4': [10, 20, 80, 40],
326 },
327 'flex-end': {
328 'flexbox': [100, 80],
329 'child1': [10, 40, 90, 20],
330 'child2': [10, 20, 90, 60],
331 'child3': [10, 40, 80, 20],
332 'child4': [10, 20, 80, 60],
333 },
334 'center': {
335 'flexbox': [100, 80],
336 'child1': [10, 40, 90, 10],
337 'child2': [10, 20, 90, 50],
338 'child3': [10, 40, 80, 10],
339 'child4': [10, 20, 80, 50],
340 },
341 'space-between': {
342 'flexbox': [100, 80],
343 'child1': [10, 40, 90, 0],
344 'child2': [10, 20, 90, 60],
345 'child3': [10, 40, 80, 0],
346 'child4': [10, 20, 80, 60],
347 },
348 'space-around': {
349 'flexbox': [100, 80],
350 'child1': [10, 40, 90, 5],
351 'child2': [10, 20, 90, 55],
352 'child3': [10, 40, 80, 5],
353 'child4': [10, 20, 80, 55],
354 },
355 },
356 'wrap-reverse': {
357 'flex-start': {
358 'flexbox': [100, 80],
359 'child1': [10, 40, 0, 0],
360 'child2': [10, 20, 0, 40],
361 'child3': [10, 40, 10, 0],
362 'child4': [10, 20, 10, 40],
363 },
364 'flex-end': {
365 'flexbox': [100, 80],
366 'child1': [10, 40, 0, 20],
367 'child2': [10, 20, 0, 60],
368 'child3': [10, 40, 10, 20],
369 'child4': [10, 20, 10, 60],
370 },
371 'center': {
372 'flexbox': [100, 80],
373 'child1': [10, 40, 0, 10],
374 'child2': [10, 20, 0, 50],
375 'child3': [10, 40, 10, 10],
376 'child4': [10, 20, 10, 50],
377 },
378 'space-between': {
379 'flexbox': [100, 80],
380 'child1': [10, 40, 0, 0],
381 'child2': [10, 20, 0, 60],
382 'child3': [10, 40, 10, 0],
383 'child4': [10, 20, 10, 60],
384 },
385 'space-around': {
386 'flexbox': [100, 80],
387 'child1': [10, 40, 0, 5],
388 'child2': [10, 20, 0, 55],
389 'child3': [10, 40, 10, 5],
390 'child4': [10, 20, 10, 55],
391 },
392 },
393 },
394 },
395 'row-reverse': {
396 'ltr': {
397 'wrap': {
398 'flex-start': {
399 'flexbox': [80, 20],
400 'child1': [40, 10, 40, 0],
401 'child2': [20, 10, 20, 0],
402 'child3': [40, 10, 40, 10],
403 'child4': [20, 10, 20, 10],
404 },
405 'flex-end': {
406 'flexbox': [80, 20],
407 'child1': [40, 10, 20, 0],
408 'child2': [20, 10, 0, 0],
409 'child3': [40, 10, 20, 10],
410 'child4': [20, 10, 0, 10],
411 },
412 'center': {
413 'flexbox': [80, 20],
414 'child1': [40, 10, 30, 0],
415 'child2': [20, 10, 10, 0],
416 'child3': [40, 10, 30, 10],
417 'child4': [20, 10, 10, 10],
418 },
419 'space-between': {
420 'flexbox': [80, 20],
421 'child1': [40, 10, 40, 0],
422 'child2': [20, 10, 0, 0],
423 'child3': [40, 10, 40, 10],
424 'child4': [20, 10, 0, 10],
425 },
426 'space-around': {
427 'flexbox': [80, 20],
428 'child1': [40, 10, 35, 0],
429 'child2': [20, 10, 5, 0],
430 'child3': [40, 10, 35, 10],
431 'child4': [20, 10, 5, 10],
432 },
433 },
434 'wrap-reverse': {
435 'flex-start': {
436 'flexbox': [80, 20],
437 'child1': [40, 10, 40, 10],
438 'child2': [20, 10, 20, 10],
439 'child3': [40, 10, 40, 0],
440 'child4': [20, 10, 20, 0],
441 },
442 'flex-end': {
443 'flexbox': [80, 20],
444 'child1': [40, 10, 20, 10],
445 'child2': [20, 10, 0, 10],
446 'child3': [40, 10, 20, 0],
447 'child4': [20, 10, 0, 0],
448 },
449 'center': {
450 'flexbox': [80, 20],
451 'child1': [40, 10, 30, 10],
452 'child2': [20, 10, 10, 10],
453 'child3': [40, 10, 30, 0],
454 'child4': [20, 10, 10, 0],
455 },
456 'space-between': {
457 'flexbox': [80, 20],
458 'child1': [40, 10, 40, 10],
459 'child2': [20, 10, 0, 10],
460 'child3': [40, 10, 40, 0],
461 'child4': [20, 10, 0, 0],
462 },
463 'space-around': {
464 'flexbox': [80, 20],
465 'child1': [40, 10, 35, 10],
466 'child2': [20, 10, 5, 10],
467 'child3': [40, 10, 35, 0],
468 'child4': [20, 10, 5, 0],
469 },
470 },
471 },
472 'rtl': {
473 'wrap': {
474 'flex-start': {
475 'flexbox': [80, 20],
476 'child1': [40, 10, 0, 0],
477 'child2': [20, 10, 40, 0],
478 'child3': [40, 10, 0, 10],
479 'child4': [20, 10, 40, 10],
480 },
481 'flex-end': {
482 'flexbox': [80, 20],
483 'child1': [40, 10, 20, 0],
484 'child2': [20, 10, 60, 0],
485 'child3': [40, 10, 20, 10],
486 'child4': [20, 10, 60, 10],
487 },
488 'center': {
489 'flexbox': [80, 20],
490 'child1': [40, 10, 10, 0],
491 'child2': [20, 10, 50, 0],
492 'child3': [40, 10, 10, 10],
493 'child4': [20, 10, 50, 10],
494 },
495 'space-between': {
496 'flexbox': [80, 20],
497 'child1': [40, 10, 0, 0],
498 'child2': [20, 10, 60, 0],
499 'child3': [40, 10, 0, 10],
500 'child4': [20, 10, 60, 10],
501 },
502 'space-around': {
503 'flexbox': [80, 20],
504 'child1': [40, 10, 5, 0],
505 'child2': [20, 10, 55, 0],
506 'child3': [40, 10, 5, 10],
507 'child4': [20, 10, 55, 10],
508 },
509 },
510 'wrap-reverse': {
511 'flex-start': {
512 'flexbox': [80, 20],
513 'child1': [40, 10, 0, 10],
514 'child2': [20, 10, 40, 10],
515 'child3': [40, 10, 0, 0],
516 'child4': [20, 10, 40, 0],
517 },
518 'flex-end': {
519 'flexbox': [80, 20],
520 'child1': [40, 10, 20, 10],
521 'child2': [20, 10, 60, 10],
522 'child3': [40, 10, 20, 0],
523 'child4': [20, 10, 60, 0],
524 },
525 'center': {
526 'flexbox': [80, 20],
527 'child1': [40, 10, 10, 10],
528 'child2': [20, 10, 50, 10],
529 'child3': [40, 10, 10, 0],
530 'child4': [20, 10, 50, 0],
531 },
532 'space-between': {
533 'flexbox': [80, 20],
534 'child1': [40, 10, 0, 10],
535 'child2': [20, 10, 60, 10],
536 'child3': [40, 10, 0, 0],
537 'child4': [20, 10, 60, 0],
538 },
539 'space-around': {
540 'flexbox': [80, 20],
541 'child1': [40, 10, 5, 10],
542 'child2': [20, 10, 55, 10],
543 'child3': [40, 10, 5, 0],
544 'child4': [20, 10, 55, 0],
545 },
546 },
547 },
548 },
549 'column-reverse': {
550 'ltr': {
551 'wrap': {
552 'flex-start': {
553 'flexbox': [100, 80],
554 'child1': [10, 40, 0, 40],
555 'child2': [10, 20, 0, 20],
556 'child3': [10, 40, 10, 40],
557 'child4': [10, 20, 10, 20],
558 },
559 'flex-end': {
560 'flexbox': [100, 80],
561 'child1': [10, 40, 0, 20],
562 'child2': [10, 20, 0, 0],
563 'child3': [10, 40, 10, 20],
564 'child4': [10, 20, 10, 0],
565 },
566 'center': {
567 'flexbox': [100, 80],
568 'child1': [10, 40, 0, 30],
569 'child2': [10, 20, 0, 10],
570 'child3': [10, 40, 10, 30],
571 'child4': [10, 20, 10, 10],
572 },
573 'space-between': {
574 'flexbox': [100, 80],
575 'child1': [10, 40, 0, 40],
576 'child2': [10, 20, 0, 0],
577 'child3': [10, 40, 10, 40],
578 'child4': [10, 20, 10, 0],
579 },
580 'space-around': {
581 'flexbox': [100, 80],
582 'child1': [10, 40, 0, 35],
583 'child2': [10, 20, 0, 5],
584 'child3': [10, 40, 10, 35],
585 'child4': [10, 20, 10, 5],
586 },
587 },
588 'wrap-reverse': {
589 'flex-start': {
590 'flexbox': [100, 80],
591 'child1': [10, 40, 90, 40],
592 'child2': [10, 20, 90, 20],
593 'child3': [10, 40, 80, 40],
594 'child4': [10, 20, 80, 20],
595 },
596 'flex-end': {
597 'flexbox': [100, 80],
598 'child1': [10, 40, 90, 20],
599 'child2': [10, 20, 90, 0],
600 'child3': [10, 40, 80, 20],
601 'child4': [10, 20, 80, 0],
602 },
603 'center': {
604 'flexbox': [100, 80],
605 'child1': [10, 40, 90, 30],
606 'child2': [10, 20, 90, 10],
607 'child3': [10, 40, 80, 30],
608 'child4': [10, 20, 80, 10],
609 },
610 'space-between': {
611 'flexbox': [100, 80],
612 'child1': [10, 40, 90, 40],
613 'child2': [10, 20, 90, 0],
614 'child3': [10, 40, 80, 40],
615 'child4': [10, 20, 80, 0],
616 },
617 'space-around': {
618 'flexbox': [100, 80],
619 'child1': [10, 40, 90, 35],
620 'child2': [10, 20, 90, 5],
621 'child3': [10, 40, 80, 35],
622 'child4': [10, 20, 80, 5],
623 },
624 },
625 },
626 'rtl': {
627 'wrap': {
628 'flex-start': {
629 'flexbox': [100, 80],
630 'child1': [10, 40, 90, 40],
631 'child2': [10, 20, 90, 20],
632 'child3': [10, 40, 80, 40],
633 'child4': [10, 20, 80, 20],
634 },
635 'flex-end': {
636 'flexbox': [100, 80],
637 'child1': [10, 40, 90, 20],
638 'child2': [10, 20, 90, 0],
639 'child3': [10, 40, 80, 20],
640 'child4': [10, 20, 80, 0],
641 },
642 'center': {
643 'flexbox': [100, 80],
644 'child1': [10, 40, 90, 30],
645 'child2': [10, 20, 90, 10],
646 'child3': [10, 40, 80, 30],
647 'child4': [10, 20, 80, 10],
648 },
649 'space-between': {
650 'flexbox': [100, 80],
651 'child1': [10, 40, 90, 40],
652 'child2': [10, 20, 90, 0],
653 'child3': [10, 40, 80, 40],
654 'child4': [10, 20, 80, 0],
655 },
656 'space-around': {
657 'flexbox': [100, 80],
658 'child1': [10, 40, 90, 35],
659 'child2': [10, 20, 90, 5],
660 'child3': [10, 40, 80, 35],
661 'child4': [10, 20, 80, 5],
662 },
663 },
664 'wrap-reverse': {
665 'flex-start': {
666 'flexbox': [100, 80],
667 'child1': [10, 40, 0, 40],
668 'child2': [10, 20, 0, 20],
669 'child3': [10, 40, 10, 40],
670 'child4': [10, 20, 10, 20],
671 },
672 'flex-end': {
673 'flexbox': [100, 80],
674 'child1': [10, 40, 0, 20],
675 'child2': [10, 20, 0, 0],
676 'child3': [10, 40, 10, 20],
677 'child4': [10, 20, 10, 0],
678 },
679 'center': {
680 'flexbox': [100, 80],
681 'child1': [10, 40, 0, 30],
682 'child2': [10, 20, 0, 10],
683 'child3': [10, 40, 10, 30],
684 'child4': [10, 20, 10, 10],
685 },
686 'space-between': {
687 'flexbox': [100, 80],
688 'child1': [10, 40, 0, 40],
689 'child2': [10, 20, 0, 0],
690 'child3': [10, 40, 10, 40],
691 'child4': [10, 20, 10, 0],
692 },
693 'space-around': {
694 'flexbox': [100, 80],
695 'child1': [10, 40, 0, 35],
696 'child2': [10, 20, 0, 5],
697 'child3': [10, 40, 10, 35],
698 'child4': [10, 20, 10, 5],
699 },
700 },
701 },
702 },
703 },
704 'horizontal-bt': {
705 'row': {
706 'ltr': {
707 'wrap': {
708 'flex-start': {
709 'flexbox': [80, 20],
710 'child1': [40, 10, 0, 10],
711 'child2': [20, 10, 40, 10],
712 'child3': [40, 10, 0, 0],
713 'child4': [20, 10, 40, 0],
714 },
715 'flex-end': {
716 'flexbox': [80, 20],
717 'child1': [40, 10, 20, 10],
718 'child2': [20, 10, 60, 10],
719 'child3': [40, 10, 20, 0],
720 'child4': [20, 10, 60, 0],
721 },
722 'center': {
723 'flexbox': [80, 20],
724 'child1': [40, 10, 10, 10],
725 'child2': [20, 10, 50, 10],
726 'child3': [40, 10, 10, 0],
727 'child4': [20, 10, 50, 0],
728 },
729 'space-between': {
730 'flexbox': [80, 20],
731 'child1': [40, 10, 0, 10],
732 'child2': [20, 10, 60, 10],
733 'child3': [40, 10, 0, 0],
734 'child4': [20, 10, 60, 0],
735 },
736 'space-around': {
737 'flexbox': [80, 20],
738 'child1': [40, 10, 5, 10],
739 'child2': [20, 10, 55, 10],
740 'child3': [40, 10, 5, 0],
741 'child4': [20, 10, 55, 0],
742 },
743 },
744 'wrap-reverse': {
745 'flex-start': {
746 'flexbox': [80, 20],
747 'child1': [40, 10, 0, 0],
748 'child2': [20, 10, 40, 0],
749 'child3': [40, 10, 0, 10],
750 'child4': [20, 10, 40, 10],
751 },
752 'flex-end': {
753 'flexbox': [80, 20],
754 'child1': [40, 10, 20, 0],
755 'child2': [20, 10, 60, 0],
756 'child3': [40, 10, 20, 10],
757 'child4': [20, 10, 60, 10],
758 },
759 'center': {
760 'flexbox': [80, 20],
761 'child1': [40, 10, 10, 0],
762 'child2': [20, 10, 50, 0],
763 'child3': [40, 10, 10, 10],
764 'child4': [20, 10, 50, 10],
765 },
766 'space-between': {
767 'flexbox': [80, 20],
768 'child1': [40, 10, 0, 0],
769 'child2': [20, 10, 60, 0],
770 'child3': [40, 10, 0, 10],
771 'child4': [20, 10, 60, 10],
772 },
773 'space-around': {
774 'flexbox': [80, 20],
775 'child1': [40, 10, 5, 0],
776 'child2': [20, 10, 55, 0],
777 'child3': [40, 10, 5, 10],
778 'child4': [20, 10, 55, 10],
779 },
780 },
781 },
782 'rtl': {
783 'wrap': {
784 'flex-start': {
785 'flexbox': [80, 20],
786 'child1': [40, 10, 40, 10],
787 'child2': [20, 10, 20, 10],
788 'child3': [40, 10, 40, 0],
789 'child4': [20, 10, 20, 0],
790 },
791 'flex-end': {
792 'flexbox': [80, 20],
793 'child1': [40, 10, 20, 10],
794 'child2': [20, 10, 0, 10],
795 'child3': [40, 10, 20, 0],
796 'child4': [20, 10, 0, 0],
797 },
798 'center': {
799 'flexbox': [80, 20],
800 'child1': [40, 10, 30, 10],
801 'child2': [20, 10, 10, 10],
802 'child3': [40, 10, 30, 0],
803 'child4': [20, 10, 10, 0],
804 },
805 'space-between': {
806 'flexbox': [80, 20],
807 'child1': [40, 10, 40, 10],
808 'child2': [20, 10, 0, 10],
809 'child3': [40, 10, 40, 0],
810 'child4': [20, 10, 0, 0],
811 },
812 'space-around': {
813 'flexbox': [80, 20],
814 'child1': [40, 10, 35, 10],
815 'child2': [20, 10, 5, 10],
816 'child3': [40, 10, 35, 0],
817 'child4': [20, 10, 5, 0],
818 },
819 },
820 'wrap-reverse': {
821 'flex-start': {
822 'flexbox': [80, 20],
823 'child1': [40, 10, 40, 0],
824 'child2': [20, 10, 20, 0],
825 'child3': [40, 10, 40, 10],
826 'child4': [20, 10, 20, 10],
827 },
828 'flex-end': {
829 'flexbox': [80, 20],
830 'child1': [40, 10, 20, 0],
831 'child2': [20, 10, 0, 0],
832 'child3': [40, 10, 20, 10],
833 'child4': [20, 10, 0, 10],
834 },
835 'center': {
836 'flexbox': [80, 20],
837 'child1': [40, 10, 30, 0],
838 'child2': [20, 10, 10, 0],
839 'child3': [40, 10, 30, 10],
840 'child4': [20, 10, 10, 10],
841 },
842 'space-between': {
843 'flexbox': [80, 20],
844 'child1': [40, 10, 40, 0],
845 'child2': [20, 10, 0, 0],
846 'child3': [40, 10, 40, 10],
847 'child4': [20, 10, 0, 10],
848 },
849 'space-around': {
850 'flexbox': [80, 20],
851 'child1': [40, 10, 35, 0],
852 'child2': [20, 10, 5, 0],
853 'child3': [40, 10, 35, 10],
854 'child4': [20, 10, 5, 10],
855 },
856 },
857 },
858 },
859 'column': {
860 'ltr': {
861 'wrap': {
862 'flex-start': {
863 'flexbox': [100, 80],
864 'child1': [10, 40, 0, 40],
865 'child2': [10, 20, 0, 20],
866 'child3': [10, 40, 10, 40],
867 'child4': [10, 20, 10, 20],
868 },
869 'flex-end': {
870 'flexbox': [100, 80],
871 'child1': [10, 40, 0, 20],
872 'child2': [10, 20, 0, 0],
873 'child3': [10, 40, 10, 20],
874 'child4': [10, 20, 10, 0],
875 },
876 'center': {
877 'flexbox': [100, 80],
878 'child1': [10, 40, 0, 30],
879 'child2': [10, 20, 0, 10],
880 'child3': [10, 40, 10, 30],
881 'child4': [10, 20, 10, 10],
882 },
883 'space-between': {
884 'flexbox': [100, 80],
885 'child1': [10, 40, 0, 40],
886 'child2': [10, 20, 0, 0],
887 'child3': [10, 40, 10, 40],
888 'child4': [10, 20, 10, 0],
889 },
890 'space-around': {
891 'flexbox': [100, 80],
892 'child1': [10, 40, 0, 35],
893 'child2': [10, 20, 0, 5],
894 'child3': [10, 40, 10, 35],
895 'child4': [10, 20, 10, 5],
896 },
897 },
898 'wrap-reverse': {
899 'flex-start': {
900 'flexbox': [100, 80],
901 'child1': [10, 40, 90, 40],
902 'child2': [10, 20, 90, 20],
903 'child3': [10, 40, 80, 40],
904 'child4': [10, 20, 80, 20],
905 },
906 'flex-end': {
907 'flexbox': [100, 80],
908 'child1': [10, 40, 90, 20],
909 'child2': [10, 20, 90, 0],
910 'child3': [10, 40, 80, 20],
911 'child4': [10, 20, 80, 0],
912 },
913 'center': {
914 'flexbox': [100, 80],
915 'child1': [10, 40, 90, 30],
916 'child2': [10, 20, 90, 10],
917 'child3': [10, 40, 80, 30],
918 'child4': [10, 20, 80, 10],
919 },
920 'space-between': {
921 'flexbox': [100, 80],
922 'child1': [10, 40, 90, 40],
923 'child2': [10, 20, 90, 0],
924 'child3': [10, 40, 80, 40],
925 'child4': [10, 20, 80, 0],
926 },
927 'space-around': {
928 'flexbox': [100, 80],
929 'child1': [10, 40, 90, 35],
930 'child2': [10, 20, 90, 5],
931 'child3': [10, 40, 80, 35],
932 'child4': [10, 20, 80, 5],
933 },
934 },
935 },
936 'rtl': {
937 'wrap': {
938 'flex-start': {
939 'flexbox': [100, 80],
940 'child1': [10, 40, 90, 40],
941 'child2': [10, 20, 90, 20],
942 'child3': [10, 40, 80, 40],
943 'child4': [10, 20, 80, 20],
944 },
945 'flex-end': {
946 'flexbox': [100, 80],
947 'child1': [10, 40, 90, 20],
948 'child2': [10, 20, 90, 0],
949 'child3': [10, 40, 80, 20],
950 'child4': [10, 20, 80, 0],
951 },
952 'center': {
953 'flexbox': [100, 80],
954 'child1': [10, 40, 90, 30],
955 'child2': [10, 20, 90, 10],
956 'child3': [10, 40, 80, 30],
957 'child4': [10, 20, 80, 10],
958 },
959 'space-between': {
960 'flexbox': [100, 80],
961 'child1': [10, 40, 90, 40],
962 'child2': [10, 20, 90, 0],
963 'child3': [10, 40, 80, 40],
964 'child4': [10, 20, 80, 0],
965 },
966 'space-around': {
967 'flexbox': [100, 80],
968 'child1': [10, 40, 90, 35],
969 'child2': [10, 20, 90, 5],
970 'child3': [10, 40, 80, 35],
971 'child4': [10, 20, 80, 5],
972 },
973 },
974 'wrap-reverse': {
975 'flex-start': {
976 'flexbox': [100, 80],
977 'child1': [10, 40, 0, 40],
978 'child2': [10, 20, 0, 20],
979 'child3': [10, 40, 10, 40],
980 'child4': [10, 20, 10, 20],
981 },
982 'flex-end': {
983 'flexbox': [100, 80],
984 'child1': [10, 40, 0, 20],
985 'child2': [10, 20, 0, 0],
986 'child3': [10, 40, 10, 20],
987 'child4': [10, 20, 10, 0],
988 },
989 'center': {
990 'flexbox': [100, 80],
991 'child1': [10, 40, 0, 30],
992 'child2': [10, 20, 0, 10],
993 'child3': [10, 40, 10, 30],
994 'child4': [10, 20, 10, 10],
995 },
996 'space-between': {
997 'flexbox': [100, 80],
998 'child1': [10, 40, 0, 40],
999 'child2': [10, 20, 0, 0],
1000 'child3': [10, 40, 10, 40],
1001 'child4': [10, 20, 10, 0],
1002 },
1003 'space-around': {
1004 'flexbox': [100, 80],
1005 'child1': [10, 40, 0, 35],
1006 'child2': [10, 20, 0, 5],
1007 'child3': [10, 40, 10, 35],
1008 'child4': [10, 20, 10, 5],
1009 },
1010 },
1011 },
1012 },
1013 'row-reverse': {
1014 'ltr': {
1015 'wrap': {
1016 'flex-start': {
1017 'flexbox': [80, 20],
1018 'child1': [40, 10, 40, 10],
1019 'child2': [20, 10, 20, 10],
1020 'child3': [40, 10, 40, 0],
1021 'child4': [20, 10, 20, 0],
1022 },
1023 'flex-end': {
1024 'flexbox': [80, 20],
1025 'child1': [40, 10, 20, 10],
1026 'child2': [20, 10, 0, 10],
1027 'child3': [40, 10, 20, 0],
1028 'child4': [20, 10, 0, 0],
1029 },
1030 'center': {
1031 'flexbox': [80, 20],
1032 'child1': [40, 10, 30, 10],
1033 'child2': [20, 10, 10, 10],
1034 'child3': [40, 10, 30, 0],
1035 'child4': [20, 10, 10, 0],
1036 },
1037 'space-between': {
1038 'flexbox': [80, 20],
1039 'child1': [40, 10, 40, 10],
1040 'child2': [20, 10, 0, 10],
1041 'child3': [40, 10, 40, 0],
1042 'child4': [20, 10, 0, 0],
1043 },
1044 'space-around': {
1045 'flexbox': [80, 20],
1046 'child1': [40, 10, 35, 10],
1047 'child2': [20, 10, 5, 10],
1048 'child3': [40, 10, 35, 0],
1049 'child4': [20, 10, 5, 0],
1050 },
1051 },
1052 'wrap-reverse': {
1053 'flex-start': {
1054 'flexbox': [80, 20],
1055 'child1': [40, 10, 40, 0],
1056 'child2': [20, 10, 20, 0],
1057 'child3': [40, 10, 40, 10],
1058 'child4': [20, 10, 20, 10],
1059 },
1060 'flex-end': {
1061 'flexbox': [80, 20],
1062 'child1': [40, 10, 20, 0],
1063 'child2': [20, 10, 0, 0],
1064 'child3': [40, 10, 20, 10],
1065 'child4': [20, 10, 0, 10],
1066 },
1067 'center': {
1068 'flexbox': [80, 20],
1069 'child1': [40, 10, 30, 0],
1070 'child2': [20, 10, 10, 0],
1071 'child3': [40, 10, 30, 10],
1072 'child4': [20, 10, 10, 10],
1073 },
1074 'space-between': {
1075 'flexbox': [80, 20],
1076 'child1': [40, 10, 40, 0],
1077 'child2': [20, 10, 0, 0],
1078 'child3': [40, 10, 40, 10],
1079 'child4': [20, 10, 0, 10],
1080 },
1081 'space-around': {
1082 'flexbox': [80, 20],
1083 'child1': [40, 10, 35, 0],
1084 'child2': [20, 10, 5, 0],
1085 'child3': [40, 10, 35, 10],
1086 'child4': [20, 10, 5, 10],
1087 },
1088 },
1089 },
1090 'rtl': {
1091 'wrap': {
1092 'flex-start': {
1093 'flexbox': [80, 20],
1094 'child1': [40, 10, 0, 10],
1095 'child2': [20, 10, 40, 10],
1096 'child3': [40, 10, 0, 0],
1097 'child4': [20, 10, 40, 0],
1098 },
1099 'flex-end': {
1100 'flexbox': [80, 20],
1101 'child1': [40, 10, 20, 10],
1102 'child2': [20, 10, 60, 10],
1103 'child3': [40, 10, 20, 0],
1104 'child4': [20, 10, 60, 0],
1105 },
1106 'center': {
1107 'flexbox': [80, 20],
1108 'child1': [40, 10, 10, 10],
1109 'child2': [20, 10, 50, 10],
1110 'child3': [40, 10, 10, 0],
1111 'child4': [20, 10, 50, 0],
1112 },
1113 'space-between': {
1114 'flexbox': [80, 20],
1115 'child1': [40, 10, 0, 10],
1116 'child2': [20, 10, 60, 10],
1117 'child3': [40, 10, 0, 0],
1118 'child4': [20, 10, 60, 0],
1119 },
1120 'space-around': {
1121 'flexbox': [80, 20],
1122 'child1': [40, 10, 5, 10],
1123 'child2': [20, 10, 55, 10],
1124 'child3': [40, 10, 5, 0],
1125 'child4': [20, 10, 55, 0],
1126 },
1127 },
1128 'wrap-reverse': {
1129 'flex-start': {
1130 'flexbox': [80, 20],
1131 'child1': [40, 10, 0, 0],
1132 'child2': [20, 10, 40, 0],
1133 'child3': [40, 10, 0, 10],
1134 'child4': [20, 10, 40, 10],
1135 },
1136 'flex-end': {
1137 'flexbox': [80, 20],
1138 'child1': [40, 10, 20, 0],
1139 'child2': [20, 10, 60, 0],
1140 'child3': [40, 10, 20, 10],
1141 'child4': [20, 10, 60, 10],
1142 },
1143 'center': {
1144 'flexbox': [80, 20],
1145 'child1': [40, 10, 10, 0],
1146 'child2': [20, 10, 50, 0],
1147 'child3': [40, 10, 10, 10],
1148 'child4': [20, 10, 50, 10],
1149 },
1150 'space-between': {
1151 'flexbox': [80, 20],
1152 'child1': [40, 10, 0, 0],
1153 'child2': [20, 10, 60, 0],
1154 'child3': [40, 10, 0, 10],
1155 'child4': [20, 10, 60, 10],
1156 },
1157 'space-around': {
1158 'flexbox': [80, 20],
1159 'child1': [40, 10, 5, 0],
1160 'child2': [20, 10, 55, 0],
1161 'child3': [40, 10, 5, 10],
1162 'child4': [20, 10, 55, 10],
1163 },
1164 },
1165 },
1166 },
1167 'column-reverse': {
1168 'ltr': {
1169 'wrap': {
1170 'flex-start': {
1171 'flexbox': [100, 80],
1172 'child1': [10, 40, 0, 0],
1173 'child2': [10, 20, 0, 40],
1174 'child3': [10, 40, 10, 0],
1175 'child4': [10, 20, 10, 40],
1176 },
1177 'flex-end': {
1178 'flexbox': [100, 80],
1179 'child1': [10, 40, 0, 20],
1180 'child2': [10, 20, 0, 60],
1181 'child3': [10, 40, 10, 20],
1182 'child4': [10, 20, 10, 60],
1183 },
1184 'center': {
1185 'flexbox': [100, 80],
1186 'child1': [10, 40, 0, 10],
1187 'child2': [10, 20, 0, 50],
1188 'child3': [10, 40, 10, 10],
1189 'child4': [10, 20, 10, 50],
1190 },
1191 'space-between': {
1192 'flexbox': [100, 80],
1193 'child1': [10, 40, 0, 0],
1194 'child2': [10, 20, 0, 60],
1195 'child3': [10, 40, 10, 0],
1196 'child4': [10, 20, 10, 60],
1197 },
1198 'space-around': {
1199 'flexbox': [100, 80],
1200 'child1': [10, 40, 0, 5],
1201 'child2': [10, 20, 0, 55],
1202 'child3': [10, 40, 10, 5],
1203 'child4': [10, 20, 10, 55],
1204 },
1205 },
1206 'wrap-reverse': {
1207 'flex-start': {
1208 'flexbox': [100, 80],
1209 'child1': [10, 40, 90, 0],
1210 'child2': [10, 20, 90, 40],
1211 'child3': [10, 40, 80, 0],
1212 'child4': [10, 20, 80, 40],
1213 },
1214 'flex-end': {
1215 'flexbox': [100, 80],
1216 'child1': [10, 40, 90, 20],
1217 'child2': [10, 20, 90, 60],
1218 'child3': [10, 40, 80, 20],
1219 'child4': [10, 20, 80, 60],
1220 },
1221 'center': {
1222 'flexbox': [100, 80],
1223 'child1': [10, 40, 90, 10],
1224 'child2': [10, 20, 90, 50],
1225 'child3': [10, 40, 80, 10],
1226 'child4': [10, 20, 80, 50],
1227 },
1228 'space-between': {
1229 'flexbox': [100, 80],
1230 'child1': [10, 40, 90, 0],
1231 'child2': [10, 20, 90, 60],
1232 'child3': [10, 40, 80, 0],
1233 'child4': [10, 20, 80, 60],
1234 },
1235 'space-around': {
1236 'flexbox': [100, 80],
1237 'child1': [10, 40, 90, 5],
1238 'child2': [10, 20, 90, 55],
1239 'child3': [10, 40, 80, 5],
1240 'child4': [10, 20, 80, 55],
1241 },
1242 },
1243 },
1244 'rtl': {
1245 'wrap': {
1246 'flex-start': {
1247 'flexbox': [100, 80],
1248 'child1': [10, 40, 90, 0],
1249 'child2': [10, 20, 90, 40],
1250 'child3': [10, 40, 80, 0],
1251 'child4': [10, 20, 80, 40],
1252 },
1253 'flex-end': {
1254 'flexbox': [100, 80],
1255 'child1': [10, 40, 90, 20],
1256 'child2': [10, 20, 90, 60],
1257 'child3': [10, 40, 80, 20],
1258 'child4': [10, 20, 80, 60],
1259 },
1260 'center': {
1261 'flexbox': [100, 80],
1262 'child1': [10, 40, 90, 10],
1263 'child2': [10, 20, 90, 50],
1264 'child3': [10, 40, 80, 10],
1265 'child4': [10, 20, 80, 50],
1266 },
1267 'space-between': {
1268 'flexbox': [100, 80],
1269 'child1': [10, 40, 90, 0],
1270 'child2': [10, 20, 90, 60],
1271 'child3': [10, 40, 80, 0],
1272 'child4': [10, 20, 80, 60],
1273 },
1274 'space-around': {
1275 'flexbox': [100, 80],
1276 'child1': [10, 40, 90, 5],
1277 'child2': [10, 20, 90, 55],
1278 'child3': [10, 40, 80, 5],
1279 'child4': [10, 20, 80, 55],
1280 },
1281 },
1282 'wrap-reverse': {
1283 'flex-start': {
1284 'flexbox': [100, 80],
1285 'child1': [10, 40, 0, 0],
1286 'child2': [10, 20, 0, 40],
1287 'child3': [10, 40, 10, 0],
1288 'child4': [10, 20, 10, 40],
1289 },
1290 'flex-end': {
1291 'flexbox': [100, 80],
1292 'child1': [10, 40, 0, 20],
1293 'child2': [10, 20, 0, 60],
1294 'child3': [10, 40, 10, 20],
1295 'child4': [10, 20, 10, 60],
1296 },
1297 'center': {
1298 'flexbox': [100, 80],
1299 'child1': [10, 40, 0, 10],
1300 'child2': [10, 20, 0, 50],
1301 'child3': [10, 40, 10, 10],
1302 'child4': [10, 20, 10, 50],
1303 },
1304 'space-between': {
1305 'flexbox': [100, 80],
1306 'child1': [10, 40, 0, 0],
1307 'child2': [10, 20, 0, 60],
1308 'child3': [10, 40, 10, 0],
1309 'child4': [10, 20, 10, 60],
1310 },
1311 'space-around': {
1312 'flexbox': [100, 80],
1313 'child1': [10, 40, 0, 5],
1314 'child2': [10, 20, 0, 55],
1315 'child3': [10, 40, 10, 5],
1316 'child4': [10, 20, 10, 55],
1317 },
1318 },
1319 },
1320 },
1321 },
1322 'vertical-rl': {
1323 'row': {
1324 'ltr': {
1325 'wrap': {
1326 'flex-start': {
1327 'flexbox': [20, 80],
1328 'child1': [10, 40, 10, 0],
1329 'child2': [10, 20, 10, 40],
1330 'child3': [10, 40, 0, 0],
1331 'child4': [10, 20, 0, 40],
1332 },
1333 'flex-end': {
1334 'flexbox': [20, 80],
1335 'child1': [10, 40, 10, 20],
1336 'child2': [10, 20, 10, 60],
1337 'child3': [10, 40, 0, 20],
1338 'child4': [10, 20, 0, 60],
1339 },
1340 'center': {
1341 'flexbox': [20, 80],
1342 'child1': [10, 40, 10, 10],
1343 'child2': [10, 20, 10, 50],
1344 'child3': [10, 40, 0, 10],
1345 'child4': [10, 20, 0, 50],
1346 },
1347 'space-between': {
1348 'flexbox': [20, 80],
1349 'child1': [10, 40, 10, 0],
1350 'child2': [10, 20, 10, 60],
1351 'child3': [10, 40, 0, 0],
1352 'child4': [10, 20, 0, 60],
1353 },
1354 'space-around': {
1355 'flexbox': [20, 80],
1356 'child1': [10, 40, 10, 5],
1357 'child2': [10, 20, 10, 55],
1358 'child3': [10, 40, 0, 5],
1359 'child4': [10, 20, 0, 55],
1360 },
1361 },
1362 'wrap-reverse': {
1363 'flex-start': {
1364 'flexbox': [20, 80],
1365 'child1': [10, 40, 0, 0],
1366 'child2': [10, 20, 0, 40],
1367 'child3': [10, 40, 10, 0],
1368 'child4': [10, 20, 10, 40],
1369 },
1370 'flex-end': {
1371 'flexbox': [20, 80],
1372 'child1': [10, 40, 0, 20],
1373 'child2': [10, 20, 0, 60],
1374 'child3': [10, 40, 10, 20],
1375 'child4': [10, 20, 10, 60],
1376 },
1377 'center': {
1378 'flexbox': [20, 80],
1379 'child1': [10, 40, 0, 10],
1380 'child2': [10, 20, 0, 50],
1381 'child3': [10, 40, 10, 10],
1382 'child4': [10, 20, 10, 50],
1383 },
1384 'space-between': {
1385 'flexbox': [20, 80],
1386 'child1': [10, 40, 0, 0],
1387 'child2': [10, 20, 0, 60],
1388 'child3': [10, 40, 10, 0],
1389 'child4': [10, 20, 10, 60],
1390 },
1391 'space-around': {
1392 'flexbox': [20, 80],
1393 'child1': [10, 40, 0, 5],
1394 'child2': [10, 20, 0, 55],
1395 'child3': [10, 40, 10, 5],
1396 'child4': [10, 20, 10, 55],
1397 },
1398 },
1399 },
1400 'rtl': {
1401 'wrap': {
1402 'flex-start': {
1403 'flexbox': [20, 80],
1404 'child1': [10, 40, 10, 40],
1405 'child2': [10, 20, 10, 20],
1406 'child3': [10, 40, 0, 40],
1407 'child4': [10, 20, 0, 20],
1408 },
1409 'flex-end': {
1410 'flexbox': [20, 80],
1411 'child1': [10, 40, 10, 20],
1412 'child2': [10, 20, 10, 0],
1413 'child3': [10, 40, 0, 20],
1414 'child4': [10, 20, 0, 0],
1415 },
1416 'center': {
1417 'flexbox': [20, 80],
1418 'child1': [10, 40, 10, 30],
1419 'child2': [10, 20, 10, 10],
1420 'child3': [10, 40, 0, 30],
1421 'child4': [10, 20, 0, 10],
1422 },
1423 'space-between': {
1424 'flexbox': [20, 80],
1425 'child1': [10, 40, 10, 40],
1426 'child2': [10, 20, 10, 0],
1427 'child3': [10, 40, 0, 40],
1428 'child4': [10, 20, 0, 0],
1429 },
1430 'space-around': {
1431 'flexbox': [20, 80],
1432 'child1': [10, 40, 10, 35],
1433 'child2': [10, 20, 10, 5],
1434 'child3': [10, 40, 0, 35],
1435 'child4': [10, 20, 0, 5],
1436 },
1437 },
1438 'wrap-reverse': {
1439 'flex-start': {
1440 'flexbox': [20, 80],
1441 'child1': [10, 40, 0, 40],
1442 'child2': [10, 20, 0, 20],
1443 'child3': [10, 40, 10, 40],
1444 'child4': [10, 20, 10, 20],
1445 },
1446 'flex-end': {
1447 'flexbox': [20, 80],
1448 'child1': [10, 40, 0, 20],
1449 'child2': [10, 20, 0, 0],
1450 'child3': [10, 40, 10, 20],
1451 'child4': [10, 20, 10, 0],
1452 },
1453 'center': {
1454 'flexbox': [20, 80],
1455 'child1': [10, 40, 0, 30],
1456 'child2': [10, 20, 0, 10],
1457 'child3': [10, 40, 10, 30],
1458 'child4': [10, 20, 10, 10],
1459 },
1460 'space-between': {
1461 'flexbox': [20, 80],
1462 'child1': [10, 40, 0, 40],
1463 'child2': [10, 20, 0, 0],
1464 'child3': [10, 40, 10, 40],
1465 'child4': [10, 20, 10, 0],
1466 },
1467 'space-around': {
1468 'flexbox': [20, 80],
1469 'child1': [10, 40, 0, 35],
1470 'child2': [10, 20, 0, 5],
1471 'child3': [10, 40, 10, 35],
1472 'child4': [10, 20, 10, 5],
1473 },
1474 },
1475 },
1476 },
1477 'column': {
1478 'ltr': {
1479 'wrap': {
1480 'flex-start': {
1481 'flexbox': [80, 10],
1482 'child1': [40, 10, 40, 0],
1483 'child2': [20, 10, 20, 0],
1484 'child3': [40, 10, 40, 10],
1485 'child4': [20, 10, 20, 10],
1486 },
1487 'flex-end': {
1488 'flexbox': [80, 10],
1489 'child1': [40, 10, 20, 0],
1490 'child2': [20, 10, 0, 0],
1491 'child3': [40, 10, 20, 10],
1492 'child4': [20, 10, 0, 10],
1493 },
1494 'center': {
1495 'flexbox': [80, 10],
1496 'child1': [40, 10, 30, 0],
1497 'child2': [20, 10, 10, 0],
1498 'child3': [40, 10, 30, 10],
1499 'child4': [20, 10, 10, 10],
1500 },
1501 'space-between': {
1502 'flexbox': [80, 10],
1503 'child1': [40, 10, 40, 0],
1504 'child2': [20, 10, 0, 0],
1505 'child3': [40, 10, 40, 10],
1506 'child4': [20, 10, 0, 10],
1507 },
1508 'space-around': {
1509 'flexbox': [80, 10],
1510 'child1': [40, 10, 35, 0],
1511 'child2': [20, 10, 5, 0],
1512 'child3': [40, 10, 35, 10],
1513 'child4': [20, 10, 5, 10],
1514 },
1515 },
1516 'wrap-reverse': {
1517 'flex-start': {
1518 'flexbox': [80, 10],
1519 'child1': [40, 10, 40, 0],
1520 'child2': [20, 10, 20, 0],
1521 'child3': [40, 10, 40, -10],
1522 'child4': [20, 10, 20, -10],
1523 },
1524 'flex-end': {
1525 'flexbox': [80, 10],
1526 'child1': [40, 10, 20, 0],
1527 'child2': [20, 10, 0, 0],
1528 'child3': [40, 10, 20, -10],
1529 'child4': [20, 10, 0, -10],
1530 },
1531 'center': {
1532 'flexbox': [80, 10],
1533 'child1': [40, 10, 30, 0],
1534 'child2': [20, 10, 10, 0],
1535 'child3': [40, 10, 30, -10],
1536 'child4': [20, 10, 10, -10],
1537 },
1538 'space-between': {
1539 'flexbox': [80, 10],
1540 'child1': [40, 10, 40, 0],
1541 'child2': [20, 10, 0, 0],
1542 'child3': [40, 10, 40, -10],
1543 'child4': [20, 10, 0, -10],
1544 },
1545 'space-around': {
1546 'flexbox': [80, 10],
1547 'child1': [40, 10, 35, 0],
1548 'child2': [20, 10, 5, 0],
1549 'child3': [40, 10, 35, -10],
1550 'child4': [20, 10, 5, -10],
1551 },
1552 },
1553 },
1554 'rtl': {
1555 'wrap': {
1556 'flex-start': {
1557 'flexbox': [80, 10],
1558 'child1': [40, 10, 40, 0],
1559 'child2': [20, 10, 20, 0],
1560 'child3': [40, 10, 40, -10],
1561 'child4': [20, 10, 20, -10],
1562 },
1563 'flex-end': {
1564 'flexbox': [80, 10],
1565 'child1': [40, 10, 20, 0],
1566 'child2': [20, 10, 0, 0],
1567 'child3': [40, 10, 20, -10],
1568 'child4': [20, 10, 0, -10],
1569 },
1570 'center': {
1571 'flexbox': [80, 10],
1572 'child1': [40, 10, 30, 0],
1573 'child2': [20, 10, 10, 0],
1574 'child3': [40, 10, 30, -10],
1575 'child4': [20, 10, 10, -10],
1576 },
1577 'space-between': {
1578 'flexbox': [80, 10],
1579 'child1': [40, 10, 40, 0],
1580 'child2': [20, 10, 0, 0],
1581 'child3': [40, 10, 40, -10],
1582 'child4': [20, 10, 0, -10],
1583 },
1584 'space-around': {
1585 'flexbox': [80, 10],
1586 'child1': [40, 10, 35, 0],
1587 'child2': [20, 10, 5, 0],
1588 'child3': [40, 10, 35, -10],
1589 'child4': [20, 10, 5, -10],
1590 },
1591 },
1592 'wrap-reverse': {
1593 'flex-start': {
1594 'flexbox': [80, 10],
1595 'child1': [40, 10, 40, 0],
1596 'child2': [20, 10, 20, 0],
1597 'child3': [40, 10, 40, 10],
1598 'child4': [20, 10, 20, 10],
1599 },
1600 'flex-end': {
1601 'flexbox': [80, 10],
1602 'child1': [40, 10, 20, 0],
1603 'child2': [20, 10, 0, 0],
1604 'child3': [40, 10, 20, 10],
1605 'child4': [20, 10, 0, 10],
1606 },
1607 'center': {
1608 'flexbox': [80, 10],
1609 'child1': [40, 10, 30, 0],
1610 'child2': [20, 10, 10, 0],
1611 'child3': [40, 10, 30, 10],
1612 'child4': [20, 10, 10, 10],
1613 },
1614 'space-between': {
1615 'flexbox': [80, 10],
1616 'child1': [40, 10, 40, 0],
1617 'child2': [20, 10, 0, 0],
1618 'child3': [40, 10, 40, 10],
1619 'child4': [20, 10, 0, 10],
1620 },
1621 'space-around': {
1622 'flexbox': [80, 10],
1623 'child1': [40, 10, 35, 0],
1624 'child2': [20, 10, 5, 0],
1625 'child3': [40, 10, 35, 10],
1626 'child4': [20, 10, 5, 10],
1627 },
1628 },
1629 },
1630 },
1631 'row-reverse': {
1632 'ltr': {
1633 'wrap': {
1634 'flex-start': {
1635 'flexbox': [20, 80],
1636 'child1': [10, 40, 10, 40],
1637 'child2': [10, 20, 10, 20],
1638 'child3': [10, 40, 0, 40],
1639 'child4': [10, 20, 0, 20],
1640 },
1641 'flex-end': {
1642 'flexbox': [20, 80],
1643 'child1': [10, 40, 10, 20],
1644 'child2': [10, 20, 10, 0],
1645 'child3': [10, 40, 0, 20],
1646 'child4': [10, 20, 0, 0],
1647 },
1648 'center': {
1649 'flexbox': [20, 80],
1650 'child1': [10, 40, 10, 30],
1651 'child2': [10, 20, 10, 10],
1652 'child3': [10, 40, 0, 30],
1653 'child4': [10, 20, 0, 10],
1654 },
1655 'space-between': {
1656 'flexbox': [20, 80],
1657 'child1': [10, 40, 10, 40],
1658 'child2': [10, 20, 10, 0],
1659 'child3': [10, 40, 0, 40],
1660 'child4': [10, 20, 0, 0],
1661 },
1662 'space-around': {
1663 'flexbox': [20, 80],
1664 'child1': [10, 40, 10, 35],
1665 'child2': [10, 20, 10, 5],
1666 'child3': [10, 40, 0, 35],
1667 'child4': [10, 20, 0, 5],
1668 },
1669 },
1670 'wrap-reverse': {
1671 'flex-start': {
1672 'flexbox': [20, 80],
1673 'child1': [10, 40, 0, 40],
1674 'child2': [10, 20, 0, 20],
1675 'child3': [10, 40, 10, 40],
1676 'child4': [10, 20, 10, 20],
1677 },
1678 'flex-end': {
1679 'flexbox': [20, 80],
1680 'child1': [10, 40, 0, 20],
1681 'child2': [10, 20, 0, 0],
1682 'child3': [10, 40, 10, 20],
1683 'child4': [10, 20, 10, 0],
1684 },
1685 'center': {
1686 'flexbox': [20, 80],
1687 'child1': [10, 40, 0, 30],
1688 'child2': [10, 20, 0, 10],
1689 'child3': [10, 40, 10, 30],
1690 'child4': [10, 20, 10, 10],
1691 },
1692 'space-between': {
1693 'flexbox': [20, 80],
1694 'child1': [10, 40, 0, 40],
1695 'child2': [10, 20, 0, 0],
1696 'child3': [10, 40, 10, 40],
1697 'child4': [10, 20, 10, 0],
1698 },
1699 'space-around': {
1700 'flexbox': [20, 80],
1701 'child1': [10, 40, 0, 35],
1702 'child2': [10, 20, 0, 5],
1703 'child3': [10, 40, 10, 35],
1704 'child4': [10, 20, 10, 5],
1705 },
1706 },
1707 },
1708 'rtl': {
1709 'wrap': {
1710 'flex-start': {
1711 'flexbox': [20, 80],
1712 'child1': [10, 40, 10, 0],
1713 'child2': [10, 20, 10, 40],
1714 'child3': [10, 40, 0, 0],
1715 'child4': [10, 20, 0, 40],
1716 },
1717 'flex-end': {
1718 'flexbox': [20, 80],
1719 'child1': [10, 40, 10, 20],
1720 'child2': [10, 20, 10, 60],
1721 'child3': [10, 40, 0, 20],
1722 'child4': [10, 20, 0, 60],
1723 },
1724 'center': {
1725 'flexbox': [20, 80],
1726 'child1': [10, 40, 10, 10],
1727 'child2': [10, 20, 10, 50],
1728 'child3': [10, 40, 0, 10],
1729 'child4': [10, 20, 0, 50],
1730 },
1731 'space-between': {
1732 'flexbox': [20, 80],
1733 'child1': [10, 40, 10, 0],
1734 'child2': [10, 20, 10, 60],
1735 'child3': [10, 40, 0, 0],
1736 'child4': [10, 20, 0, 60],
1737 },
1738 'space-around': {
1739 'flexbox': [20, 80],
1740 'child1': [10, 40, 10, 5],
1741 'child2': [10, 20, 10, 55],
1742 'child3': [10, 40, 0, 5],
1743 'child4': [10, 20, 0, 55],
1744 },
1745 },
1746 'wrap-reverse': {
1747 'flex-start': {
1748 'flexbox': [20, 80],
1749 'child1': [10, 40, 0, 0],
1750 'child2': [10, 20, 0, 40],
1751 'child3': [10, 40, 10, 0],
1752 'child4': [10, 20, 10, 40],
1753 },
1754 'flex-end': {
1755 'flexbox': [20, 80],
1756 'child1': [10, 40, 0, 20],
1757 'child2': [10, 20, 0, 60],
1758 'child3': [10, 40, 10, 20],
1759 'child4': [10, 20, 10, 60],
1760 },
1761 'center': {
1762 'flexbox': [20, 80],
1763 'child1': [10, 40, 0, 10],
1764 'child2': [10, 20, 0, 50],
1765 'child3': [10, 40, 10, 10],
1766 'child4': [10, 20, 10, 50],
1767 },
1768 'space-between': {
1769 'flexbox': [20, 80],
1770 'child1': [10, 40, 0, 0],
1771 'child2': [10, 20, 0, 60],
1772 'child3': [10, 40, 10, 0],
1773 'child4': [10, 20, 10, 60],
1774 },
1775 'space-around': {
1776 'flexbox': [20, 80],
1777 'child1': [10, 40, 0, 5],
1778 'child2': [10, 20, 0, 55],
1779 'child3': [10, 40, 10, 5],
1780 'child4': [10, 20, 10, 55],
1781 },
1782 },
1783 },
1784 },
1785 'column-reverse': {
1786 'ltr': {
1787 'wrap': {
1788 'flex-start': {
1789 'flexbox': [80, 10],
1790 'child1': [40, 10, 0, 0],
1791 'child2': [20, 10, 40, 0],
1792 'child3': [40, 10, 0, 10],
1793 'child4': [20, 10, 40, 10],
1794 },
1795 'flex-end': {
1796 'flexbox': [80, 10],
1797 'child1': [40, 10, 20, 0],
1798 'child2': [20, 10, 60, 0],
1799 'child3': [40, 10, 20, 10],
1800 'child4': [20, 10, 60, 10],
1801 },
1802 'center': {
1803 'flexbox': [80, 10],
1804 'child1': [40, 10, 10, 0],
1805 'child2': [20, 10, 50, 0],
1806 'child3': [40, 10, 10, 10],
1807 'child4': [20, 10, 50, 10],
1808 },
1809 'space-between': {
1810 'flexbox': [80, 10],
1811 'child1': [40, 10, 0, 0],
1812 'child2': [20, 10, 60, 0],
1813 'child3': [40, 10, 0, 10],
1814 'child4': [20, 10, 60, 10],
1815 },
1816 'space-around': {
1817 'flexbox': [80, 10],
1818 'child1': [40, 10, 5, 0],
1819 'child2': [20, 10, 55, 0],
1820 'child3': [40, 10, 5, 10],
1821 'child4': [20, 10, 55, 10],
1822 },
1823 },
1824 'wrap-reverse': {
1825 'flex-start': {
1826 'flexbox': [80, 10],
1827 'child1': [40, 10, 0, 0],
1828 'child2': [20, 10, 40, 0],
1829 'child3': [40, 10, 0, -10],
1830 'child4': [20, 10, 40, -10],
1831 },
1832 'flex-end': {
1833 'flexbox': [80, 10],
1834 'child1': [40, 10, 20, 0],
1835 'child2': [20, 10, 60, 0],
1836 'child3': [40, 10, 20, -10],
1837 'child4': [20, 10, 60, -10],
1838 },
1839 'center': {
1840 'flexbox': [80, 10],
1841 'child1': [40, 10, 10, 0],
1842 'child2': [20, 10, 50, 0],
1843 'child3': [40, 10, 10, -10],
1844 'child4': [20, 10, 50, -10],
1845 },
1846 'space-between': {
1847 'flexbox': [80, 10],
1848 'child1': [40, 10, 0, 0],
1849 'child2': [20, 10, 60, 0],
1850 'child3': [40, 10, 0, -10],
1851 'child4': [20, 10, 60, -10],
1852 },
1853 'space-around': {
1854 'flexbox': [80, 10],
1855 'child1': [40, 10, 5, 0],
1856 'child2': [20, 10, 55, 0],
1857 'child3': [40, 10, 5, -10],
1858 'child4': [20, 10, 55, -10],
1859 },
1860 },
1861 },
1862 'rtl': {
1863 'wrap': {
1864 'flex-start': {
1865 'flexbox': [80, 10],
1866 'child1': [40, 10, 0, 0],
1867 'child2': [20, 10, 40, 0],
1868 'child3': [40, 10, 0, -10],
1869 'child4': [20, 10, 40, -10],
1870 },
1871 'flex-end': {
1872 'flexbox': [80, 10],
1873 'child1': [40, 10, 20, 0],
1874 'child2': [20, 10, 60, 0],
1875 'child3': [40, 10, 20, -10],
1876 'child4': [20, 10, 60, -10],
1877 },
1878 'center': {
1879 'flexbox': [80, 10],
1880 'child1': [40, 10, 10, 0],
1881 'child2': [20, 10, 50, 0],
1882 'child3': [40, 10, 10, -10],
1883 'child4': [20, 10, 50, -10],
1884 },
1885 'space-between': {
1886 'flexbox': [80, 10],
1887 'child1': [40, 10, 0, 0],
1888 'child2': [20, 10, 60, 0],
1889 'child3': [40, 10, 0, -10],
1890 'child4': [20, 10, 60, -10],
1891 },
1892 'space-around': {
1893 'flexbox': [80, 10],
1894 'child1': [40, 10, 5, 0],
1895 'child2': [20, 10, 55, 0],
1896 'child3': [40, 10, 5, -10],
1897 'child4': [20, 10, 55, -10],
1898 },
1899 },
1900 'wrap-reverse': {
1901 'flex-start': {
1902 'flexbox': [80, 10],
1903 'child1': [40, 10, 0, 0],
1904 'child2': [20, 10, 40, 0],
1905 'child3': [40, 10, 0, 10],
1906 'child4': [20, 10, 40, 10],
1907 },
1908 'flex-end': {
1909 'flexbox': [80, 10],
1910 'child1': [40, 10, 20, 0],
1911 'child2': [20, 10, 60, 0],
1912 'child3': [40, 10, 20, 10],
1913 'child4': [20, 10, 60, 10],
1914 },
1915 'center': {
1916 'flexbox': [80, 10],
1917 'child1': [40, 10, 10, 0],
1918 'child2': [20, 10, 50, 0],
1919 'child3': [40, 10, 10, 10],
1920 'child4': [20, 10, 50, 10],
1921 },
1922 'space-between': {
1923 'flexbox': [80, 10],
1924 'child1': [40, 10, 0, 0],
1925 'child2': [20, 10, 60, 0],
1926 'child3': [40, 10, 0, 10],
1927 'child4': [20, 10, 60, 10],
1928 },
1929 'space-around': {
1930 'flexbox': [80, 10],
1931 'child1': [40, 10, 5, 0],
1932 'child2': [20, 10, 55, 0],
1933 'child3': [40, 10, 5, 10],
1934 'child4': [20, 10, 55, 10],
1935 },
1936 },
1937 },
1938 },
1939 },
1940 'vertical-lr': {
1941 'row': {
1942 'ltr': {
1943 'wrap': {
1944 'flex-start': {
1945 'flexbox': [20, 80],
1946 'child1': [10, 40, 0, 0],
1947 'child2': [10, 20, 0, 40],
1948 'child3': [10, 40, 10, 0],
1949 'child4': [10, 20, 10, 40],
1950 },
1951 'flex-end': {
1952 'flexbox': [20, 80],
1953 'child1': [10, 40, 0, 20],
1954 'child2': [10, 20, 0, 60],
1955 'child3': [10, 40, 10, 20],
1956 'child4': [10, 20, 10, 60],
1957 },
1958 'center': {
1959 'flexbox': [20, 80],
1960 'child1': [10, 40, 0, 10],
1961 'child2': [10, 20, 0, 50],
1962 'child3': [10, 40, 10, 10],
1963 'child4': [10, 20, 10, 50],
1964 },
1965 'space-between': {
1966 'flexbox': [20, 80],
1967 'child1': [10, 40, 0, 0],
1968 'child2': [10, 20, 0, 60],
1969 'child3': [10, 40, 10, 0],
1970 'child4': [10, 20, 10, 60],
1971 },
1972 'space-around': {
1973 'flexbox': [20, 80],
1974 'child1': [10, 40, 0, 5],
1975 'child2': [10, 20, 0, 55],
1976 'child3': [10, 40, 10, 5],
1977 'child4': [10, 20, 10, 55],
1978 },
1979 },
1980 'wrap-reverse': {
1981 'flex-start': {
1982 'flexbox': [20, 80],
1983 'child1': [10, 40, 10, 0],
1984 'child2': [10, 20, 10, 40],
1985 'child3': [10, 40, 0, 0],
1986 'child4': [10, 20, 0, 40],
1987 },
1988 'flex-end': {
1989 'flexbox': [20, 80],
1990 'child1': [10, 40, 10, 20],
1991 'child2': [10, 20, 10, 60],
1992 'child3': [10, 40, 0, 20],
1993 'child4': [10, 20, 0, 60],
1994 },
1995 'center': {
1996 'flexbox': [20, 80],
1997 'child1': [10, 40, 10, 10],
1998 'child2': [10, 20, 10, 50],
1999 'child3': [10, 40, 0, 10],
2000 'child4': [10, 20, 0, 50],
2001 },
2002 'space-between': {
2003 'flexbox': [20, 80],
2004 'child1': [10, 40, 10, 0],
2005 'child2': [10, 20, 10, 60],
2006 'child3': [10, 40, 0, 0],
2007 'child4': [10, 20, 0, 60],
2008 },
2009 'space-around': {
2010 'flexbox': [20, 80],
2011 'child1': [10, 40, 10, 5],
2012 'child2': [10, 20, 10, 55],
2013 'child3': [10, 40, 0, 5],
2014 'child4': [10, 20, 0, 55],
2015 },
2016 },
2017 },
2018 'rtl': {
2019 'wrap': {
2020 'flex-start': {
2021 'flexbox': [20, 80],
2022 'child1': [10, 40, 0, 40],
2023 'child2': [10, 20, 0, 20],
2024 'child3': [10, 40, 10, 40],
2025 'child4': [10, 20, 10, 20],
2026 },
2027 'flex-end': {
2028 'flexbox': [20, 80],
2029 'child1': [10, 40, 0, 20],
2030 'child2': [10, 20, 0, 0],
2031 'child3': [10, 40, 10, 20],
2032 'child4': [10, 20, 10, 0],
2033 },
2034 'center': {
2035 'flexbox': [20, 80],
2036 'child1': [10, 40, 0, 30],
2037 'child2': [10, 20, 0, 10],
2038 'child3': [10, 40, 10, 30],
2039 'child4': [10, 20, 10, 10],
2040 },
2041 'space-between': {
2042 'flexbox': [20, 80],
2043 'child1': [10, 40, 0, 40],
2044 'child2': [10, 20, 0, 0],
2045 'child3': [10, 40, 10, 40],
2046 'child4': [10, 20, 10, 0],
2047 },
2048 'space-around': {
2049 'flexbox': [20, 80],
2050 'child1': [10, 40, 0, 35],
2051 'child2': [10, 20, 0, 5],
2052 'child3': [10, 40, 10, 35],
2053 'child4': [10, 20, 10, 5],
2054 },
2055 },
2056 'wrap-reverse': {
2057 'flex-start': {
2058 'flexbox': [20, 80],
2059 'child1': [10, 40, 10, 40],
2060 'child2': [10, 20, 10, 20],
2061 'child3': [10, 40, 0, 40],
2062 'child4': [10, 20, 0, 20],
2063 },
2064 'flex-end': {
2065 'flexbox': [20, 80],
2066 'child1': [10, 40, 10, 20],
2067 'child2': [10, 20, 10, 0],
2068 'child3': [10, 40, 0, 20],
2069 'child4': [10, 20, 0, 0],
2070 },
2071 'center': {
2072 'flexbox': [20, 80],
2073 'child1': [10, 40, 10, 30],
2074 'child2': [10, 20, 10, 10],
2075 'child3': [10, 40, 0, 30],
2076 'child4': [10, 20, 0, 10],
2077 },
2078 'space-between': {
2079 'flexbox': [20, 80],
2080 'child1': [10, 40, 10, 40],
2081 'child2': [10, 20, 10, 0],
2082 'child3': [10, 40, 0, 40],
2083 'child4': [10, 20, 0, 0],
2084 },
2085 'space-around': {
2086 'flexbox': [20, 80],
2087 'child1': [10, 40, 10, 35],
2088 'child2': [10, 20, 10, 5],
2089 'child3': [10, 40, 0, 35],
2090 'child4': [10, 20, 0, 5],
2091 },
2092 },
2093 },
2094 },
2095 'column': {
2096 'ltr': {
2097 'wrap': {
2098 'flex-start': {
2099 'flexbox': [80, 10],
2100 'child1': [40, 10, 0, 0],
2101 'child2': [20, 10, 40, 0],
2102 'child3': [40, 10, 0, 10],
2103 'child4': [20, 10, 40, 10],
2104 },
2105 'flex-end': {
2106 'flexbox': [80, 10],
2107 'child1': [40, 10, 20, 0],
2108 'child2': [20, 10, 60, 0],
2109 'child3': [40, 10, 20, 10],
2110 'child4': [20, 10, 60, 10],
2111 },
2112 'center': {
2113 'flexbox': [80, 10],
2114 'child1': [40, 10, 10, 0],
2115 'child2': [20, 10, 50, 0],
2116 'child3': [40, 10, 10, 10],
2117 'child4': [20, 10, 50, 10],
2118 },
2119 'space-between': {
2120 'flexbox': [80, 10],
2121 'child1': [40, 10, 0, 0],
2122 'child2': [20, 10, 60, 0],
2123 'child3': [40, 10, 0, 10],
2124 'child4': [20, 10, 60, 10],
2125 },
2126 'space-around': {
2127 'flexbox': [80, 10],
2128 'child1': [40, 10, 5, 0],
2129 'child2': [20, 10, 55, 0],
2130 'child3': [40, 10, 5, 10],
2131 'child4': [20, 10, 55, 10],
2132 },
2133 },
2134 'wrap-reverse': {
2135 'flex-start': {
2136 'flexbox': [80, 10],
2137 'child1': [40, 10, 0, 0],
2138 'child2': [20, 10, 40, 0],
2139 'child3': [40, 10, 0, -10],
2140 'child4': [20, 10, 40, -10],
2141 },
2142 'flex-end': {
2143 'flexbox': [80, 10],
2144 'child1': [40, 10, 20, 0],
2145 'child2': [20, 10, 60, 0],
2146 'child3': [40, 10, 20, -10],
2147 'child4': [20, 10, 60, -10],
2148 },
2149 'center': {
2150 'flexbox': [80, 10],
2151 'child1': [40, 10, 10, 0],
2152 'child2': [20, 10, 50, 0],
2153 'child3': [40, 10, 10, -10],
2154 'child4': [20, 10, 50, -10],
2155 },
2156 'space-between': {
2157 'flexbox': [80, 10],
2158 'child1': [40, 10, 0, 0],
2159 'child2': [20, 10, 60, 0],
2160 'child3': [40, 10, 0, -10],
2161 'child4': [20, 10, 60, -10],
2162 },
2163 'space-around': {
2164 'flexbox': [80, 10],
2165 'child1': [40, 10, 5, 0],
2166 'child2': [20, 10, 55, 0],
2167 'child3': [40, 10, 5, -10],
2168 'child4': [20, 10, 55, -10],
2169 },
2170 },
2171 },
2172 'rtl': {
2173 'wrap': {
2174 'flex-start': {
2175 'flexbox': [80, 10],
2176 'child1': [40, 10, 0, 0],
2177 'child2': [20, 10, 40, 0],
2178 'child3': [40, 10, 0, -10],
2179 'child4': [20, 10, 40, -10],
2180 },
2181 'flex-end': {
2182 'flexbox': [80, 10],
2183 'child1': [40, 10, 20, 0],
2184 'child2': [20, 10, 60, 0],
2185 'child3': [40, 10, 20, -10],
2186 'child4': [20, 10, 60, -10],
2187 },
2188 'center': {
2189 'flexbox': [80, 10],
2190 'child1': [40, 10, 10, 0],
2191 'child2': [20, 10, 50, 0],
2192 'child3': [40, 10, 10, -10],
2193 'child4': [20, 10, 50, -10],
2194 },
2195 'space-between': {
2196 'flexbox': [80, 10],
2197 'child1': [40, 10, 0, 0],
2198 'child2': [20, 10, 60, 0],
2199 'child3': [40, 10, 0, -10],
2200 'child4': [20, 10, 60, -10],
2201 },
2202 'space-around': {
2203 'flexbox': [80, 10],
2204 'child1': [40, 10, 5, 0],
2205 'child2': [20, 10, 55, 0],
2206 'child3': [40, 10, 5, -10],
2207 'child4': [20, 10, 55, -10],
2208 },
2209 },
2210 'wrap-reverse': {
2211 'flex-start': {
2212 'flexbox': [80, 10],
2213 'child1': [40, 10, 0, 0],
2214 'child2': [20, 10, 40, 0],
2215 'child3': [40, 10, 0, 10],
2216 'child4': [20, 10, 40, 10],
2217 },
2218 'flex-end': {
2219 'flexbox': [80, 10],
2220 'child1': [40, 10, 20, 0],
2221 'child2': [20, 10, 60, 0],
2222 'child3': [40, 10, 20, 10],
2223 'child4': [20, 10, 60, 10],
2224 },
2225 'center': {
2226 'flexbox': [80, 10],
2227 'child1': [40, 10, 10, 0],
2228 'child2': [20, 10, 50, 0],
2229 'child3': [40, 10, 10, 10],
2230 'child4': [20, 10, 50, 10],
2231 },
2232 'space-between': {
2233 'flexbox': [80, 10],
2234 'child1': [40, 10, 0, 0],
2235 'child2': [20, 10, 60, 0],
2236 'child3': [40, 10, 0, 10],
2237 'child4': [20, 10, 60, 10],
2238 },
2239 'space-around': {
2240 'flexbox': [80, 10],
2241 'child1': [40, 10, 5, 0],
2242 'child2': [20, 10, 55, 0],
2243 'child3': [40, 10, 5, 10],
2244 'child4': [20, 10, 55, 10],
2245 },
2246 },
2247 },
2248 },
2249 'row-reverse': {
2250 'ltr': {
2251 'wrap': {
2252 'flex-start': {
2253 'flexbox': [20, 80],
2254 'child1': [10, 40, 0, 40],
2255 'child2': [10, 20, 0, 20],
2256 'child3': [10, 40, 10, 40],
2257 'child4': [10, 20, 10, 20],
2258 },
2259 'flex-end': {
2260 'flexbox': [20, 80],
2261 'child1': [10, 40, 0, 20],
2262 'child2': [10, 20, 0, 0],
2263 'child3': [10, 40, 10, 20],
2264 'child4': [10, 20, 10, 0],
2265 },
2266 'center': {
2267 'flexbox': [20, 80],
2268 'child1': [10, 40, 0, 30],
2269 'child2': [10, 20, 0, 10],
2270 'child3': [10, 40, 10, 30],
2271 'child4': [10, 20, 10, 10],
2272 },
2273 'space-between': {
2274 'flexbox': [20, 80],
2275 'child1': [10, 40, 0, 40],
2276 'child2': [10, 20, 0, 0],
2277 'child3': [10, 40, 10, 40],
2278 'child4': [10, 20, 10, 0],
2279 },
2280 'space-around': {
2281 'flexbox': [20, 80],
2282 'child1': [10, 40, 0, 35],
2283 'child2': [10, 20, 0, 5],
2284 'child3': [10, 40, 10, 35],
2285 'child4': [10, 20, 10, 5],
2286 },
2287 },
2288 'wrap-reverse': {
2289 'flex-start': {
2290 'flexbox': [20, 80],
2291 'child1': [10, 40, 10, 40],
2292 'child2': [10, 20, 10, 20],
2293 'child3': [10, 40, 0, 40],
2294 'child4': [10, 20, 0, 20],
2295 },
2296 'flex-end': {
2297 'flexbox': [20, 80],
2298 'child1': [10, 40, 10, 20],
2299 'child2': [10, 20, 10, 0],
2300 'child3': [10, 40, 0, 20],
2301 'child4': [10, 20, 0, 0],
2302 },
2303 'center': {
2304 'flexbox': [20, 80],
2305 'child1': [10, 40, 10, 30],
2306 'child2': [10, 20, 10, 10],
2307 'child3': [10, 40, 0, 30],
2308 'child4': [10, 20, 0, 10],
2309 },
2310 'space-between': {
2311 'flexbox': [20, 80],
2312 'child1': [10, 40, 10, 40],
2313 'child2': [10, 20, 10, 0],
2314 'child3': [10, 40, 0, 40],
2315 'child4': [10, 20, 0, 0],
2316 },
2317 'space-around': {
2318 'flexbox': [20, 80],
2319 'child1': [10, 40, 10, 35],
2320 'child2': [10, 20, 10, 5],
2321 'child3': [10, 40, 0, 35],
2322 'child4': [10, 20, 0, 5],
2323 },
2324 },
2325 },
2326 'rtl': {
2327 'wrap': {
2328 'flex-start': {
2329 'flexbox': [20, 80],
2330 'child1': [10, 40, 0, 0],
2331 'child2': [10, 20, 0, 40],
2332 'child3': [10, 40, 10, 0],
2333 'child4': [10, 20, 10, 40],
2334 },
2335 'flex-end': {
2336 'flexbox': [20, 80],
2337 'child1': [10, 40, 0, 20],
2338 'child2': [10, 20, 0, 60],
2339 'child3': [10, 40, 10, 20],
2340 'child4': [10, 20, 10, 60],
2341 },
2342 'center': {
2343 'flexbox': [20, 80],
2344 'child1': [10, 40, 0, 10],
2345 'child2': [10, 20, 0, 50],
2346 'child3': [10, 40, 10, 10],
2347 'child4': [10, 20, 10, 50],
2348 },
2349 'space-between': {
2350 'flexbox': [20, 80],
2351 'child1': [10, 40, 0, 0],
2352 'child2': [10, 20, 0, 60],
2353 'child3': [10, 40, 10, 0],
2354 'child4': [10, 20, 10, 60],
2355 },
2356 'space-around': {
2357 'flexbox': [20, 80],
2358 'child1': [10, 40, 0, 5],
2359 'child2': [10, 20, 0, 55],
2360 'child3': [10, 40, 10, 5],
2361 'child4': [10, 20, 10, 55],
2362 },
2363 },
2364 'wrap-reverse': {
2365 'flex-start': {
2366 'flexbox': [20, 80],
2367 'child1': [10, 40, 10, 0],
2368 'child2': [10, 20, 10, 40],
2369 'child3': [10, 40, 0, 0],
2370 'child4': [10, 20, 0, 40],
2371 },
2372 'flex-end': {
2373 'flexbox': [20, 80],
2374 'child1': [10, 40, 10, 20],
2375 'child2': [10, 20, 10, 60],
2376 'child3': [10, 40, 0, 20],
2377 'child4': [10, 20, 0, 60],
2378 },
2379 'center': {
2380 'flexbox': [20, 80],
2381 'child1': [10, 40, 10, 10],
2382 'child2': [10, 20, 10, 50],
2383 'child3': [10, 40, 0, 10],
2384 'child4': [10, 20, 0, 50],
2385 },
2386 'space-between': {
2387 'flexbox': [20, 80],
2388 'child1': [10, 40, 10, 0],
2389 'child2': [10, 20, 10, 60],
2390 'child3': [10, 40, 0, 0],
2391 'child4': [10, 20, 0, 60],
2392 },
2393 'space-around': {
2394 'flexbox': [20, 80],
2395 'child1': [10, 40, 10, 5],
2396 'child2': [10, 20, 10, 55],
2397 'child3': [10, 40, 0, 5],
2398 'child4': [10, 20, 0, 55],
2399 },
2400 },
2401 },
2402 },
2403 'column-reverse': {
2404 'ltr': {
2405 'wrap': {
2406 'flex-start': {
2407 'flexbox': [80, 10],
2408 'child1': [40, 10, 40, 0],
2409 'child2': [20, 10, 20, 0],
2410 'child3': [40, 10, 40, 10],
2411 'child4': [20, 10, 20, 10],
2412 },
2413 'flex-end': {
2414 'flexbox': [80, 10],
2415 'child1': [40, 10, 20, 0],
2416 'child2': [20, 10, 0, 0],
2417 'child3': [40, 10, 20, 10],
2418 'child4': [20, 10, 0, 10],
2419 },
2420 'center': {
2421 'flexbox': [80, 10],
2422 'child1': [40, 10, 30, 0],
2423 'child2': [20, 10, 10, 0],
2424 'child3': [40, 10, 30, 10],
2425 'child4': [20, 10, 10, 10],
2426 },
2427 'space-between': {
2428 'flexbox': [80, 10],
2429 'child1': [40, 10, 40, 0],
2430 'child2': [20, 10, 0, 0],
2431 'child3': [40, 10, 40, 10],
2432 'child4': [20, 10, 0, 10],
2433 },
2434 'space-around': {
2435 'flexbox': [80, 10],
2436 'child1': [40, 10, 35, 0],
2437 'child2': [20, 10, 5, 0],
2438 'child3': [40, 10, 35, 10],
2439 'child4': [20, 10, 5, 10],
2440 },
2441 },
2442 'wrap-reverse': {
2443 'flex-start': {
2444 'flexbox': [80, 10],
2445 'child1': [40, 10, 40, 0],
2446 'child2': [20, 10, 20, 0],
2447 'child3': [40, 10, 40, -10],
2448 'child4': [20, 10, 20, -10],
2449 },
2450 'flex-end': {
2451 'flexbox': [80, 10],
2452 'child1': [40, 10, 20, 0],
2453 'child2': [20, 10, 0, 0],
2454 'child3': [40, 10, 20, -10],
2455 'child4': [20, 10, 0, -10],
2456 },
2457 'center': {
2458 'flexbox': [80, 10],
2459 'child1': [40, 10, 30, 0],
2460 'child2': [20, 10, 10, 0],
2461 'child3': [40, 10, 30, -10],
2462 'child4': [20, 10, 10, -10],
2463 },
2464 'space-between': {
2465 'flexbox': [80, 10],
2466 'child1': [40, 10, 40, 0],
2467 'child2': [20, 10, 0, 0],
2468 'child3': [40, 10, 40, -10],
2469 'child4': [20, 10, 0, -10],
2470 },
2471 'space-around': {
2472 'flexbox': [80, 10],
2473 'child1': [40, 10, 35, 0],
2474 'child2': [20, 10, 5, 0],
2475 'child3': [40, 10, 35, -10],
2476 'child4': [20, 10, 5, -10],
2477 },
2478 },
2479 },
2480 'rtl': {
2481 'wrap': {
2482 'flex-start': {
2483 'flexbox': [80, 10],
2484 'child1': [40, 10, 40, 0],
2485 'child2': [20, 10, 20, 0],
2486 'child3': [40, 10, 40, -10],
2487 'child4': [20, 10, 20, -10],
2488 },
2489 'flex-end': {
2490 'flexbox': [80, 10],
2491 'child1': [40, 10, 20, 0],
2492 'child2': [20, 10, 0, 0],
2493 'child3': [40, 10, 20, -10],
2494 'child4': [20, 10, 0, -10],
2495 },
2496 'center': {
2497 'flexbox': [80, 10],
2498 'child1': [40, 10, 30, 0],
2499 'child2': [20, 10, 10, 0],
2500 'child3': [40, 10, 30, -10],
2501 'child4': [20, 10, 10, -10],
2502 },
2503 'space-between': {
2504 'flexbox': [80, 10],
2505 'child1': [40, 10, 40, 0],
2506 'child2': [20, 10, 0, 0],
2507 'child3': [40, 10, 40, -10],
2508 'child4': [20, 10, 0, -10],
2509 },
2510 'space-around': {
2511 'flexbox': [80, 10],
2512 'child1': [40, 10, 35, 0],
2513 'child2': [20, 10, 5, 0],
2514 'child3': [40, 10, 35, -10],
2515 'child4': [20, 10, 5, -10],
2516 },
2517 },
2518 'wrap-reverse': {
2519 'flex-start': {
2520 'flexbox': [80, 10],
2521 'child1': [40, 10, 40, 0],
2522 'child2': [20, 10, 20, 0],
2523 'child3': [40, 10, 40, 10],
2524 'child4': [20, 10, 20, 10],
2525 },
2526 'flex-end': {
2527 'flexbox': [80, 10],
2528 'child1': [40, 10, 20, 0],
2529 'child2': [20, 10, 0, 0],
2530 'child3': [40, 10, 20, 10],
2531 'child4': [20, 10, 0, 10],
2532 },
2533 'center': {
2534 'flexbox': [80, 10],
2535 'child1': [40, 10, 30, 0],
2536 'child2': [20, 10, 10, 0],
2537 'child3': [40, 10, 30, 10],
2538 'child4': [20, 10, 10, 10],
2539 },
2540 'space-between': {
2541 'flexbox': [80, 10],
2542 'child1': [40, 10, 40, 0],
2543 'child2': [20, 10, 0, 0],
2544 'child3': [40, 10, 40, 10],
2545 'child4': [20, 10, 0, 10],
2546 },
2547 'space-around': {
2548 'flexbox': [80, 10],
2549 'child1': [40, 10, 35, 0],
2550 'child2': [20, 10, 5, 0],
2551 'child3': [40, 10, 35, 10],
2552 'child4': [20, 10, 5, 10],
2553 },
2554 },
2555 },
2556 },
2557 },
2558 };
2559
2560 function mainAxisDirection(writingMode, flexDirection)
2561 {
2562 if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1)
2563 || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1))
2564 return 'width';
2565 return 'height';
2566 }
2567
2568 function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength, expectations)
2569 {
2570 var child = document.createElement('div');
2571 child.setAttribute('style', mainAxis + ': ' + preferredSize + 'px;'
2572 + crossAxis + ': ' + crossAxisLength + 'px;');
2573
2574 child.setAttribute("data-expected-width", expectations[0]);
2575 child.setAttribute("data-expected-height", expectations[1]);
2576 child.setAttribute("data-offset-x", expectations[2]);
2577 child.setAttribute("data-offset-y", expectations[3]);
2578
2579 flexbox.appendChild(child);
2580 }
2581
2582 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
2583 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
2584 var directions = ['ltr', 'rtl'];
2585 var wraps = ['wrap', 'wrap-reverse'];
2586 var justifyContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'];
2587
2588 writingModes.forEach(function(writingMode) {
2589 flexDirections.forEach(function(flexDirection) {
2590 directions.forEach(function(direction) {
2591 wraps.forEach(function(wrap) {
2592 justifyContents.forEach(function(justifyContent) {
2593 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' ' + wrap + ' justify-content-' + justifyContent;
2594 var title = document.createElement('div');
2595 title.className = 'title';
2596 title.innerHTML = flexboxClassName;
2597 document.body.appendChild(title);
2598
2599 var mainAxis = mainAxisDirection(writingMode, flexDirection);
2600 var crossAxis = (mainAxis == 'width') ? 'height' : 'width';
2601
2602 var flexbox = document.createElement('div');
2603 flexbox.className = 'flexbox ' + flexboxClassName;
2604 flexbox.setAttribute('style', mainAxis + ': 80px');
2605
2606 var baselineMargin = (flexDirection.indexOf('row') != -1) ? '-webkit-margin-before: 5px' : '-webkit-margin-start: 5px';
2607
2608 var testExpectations = expectations[writingMode][flexDirection][direction][wrap][justifyContent];
2609 addChild(flexbox, mainAxis, crossAxis, 40, '10', testExpectations['child1']);
2610 addChild(flexbox, mainAxis, crossAxis, 20, '10', testExpectations['child2']);
2611 addChild(flexbox, mainAxis, crossAxis, 40, '10', testExpectations['child3']);
2612 addChild(flexbox, mainAxis, crossAxis, 20, '10', testExpectations['child4']);
2613
2614 flexbox.setAttribute("data-expected-width", testExpectations.flexbox[0]);
2615 flexbox.setAttribute("data-expected-height", testExpectations.flexbox[1]);
2616
2617 document.body.appendChild(flexbox);
2618 })
2619 })
2620 })
2621 })
2622 })
2623 </script>
2624 </body>
2625 </html>