implement flexbox wrap-reverse
[WebKit-https.git] / LayoutTests / css3 / flexbox / multiline-pack.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .flexbox {
5     position: relative;
6     display: -webkit-flexbox;
7     background-color: grey;
8     max-width: 100px;
9 }
10 .title {
11     margin-top: 1em;
12 }
13 .ltr {
14     direction: ltr;
15 }
16 .rtl {
17     direction: rtl;
18 }
19 .horizontal-tb {
20     -webkit-writing-mode: horizontal-tb;
21 }
22 .horizontal-bt {
23     -webkit-writing-mode: horizontal-bt;
24 }
25 .vertical-rl {
26     -webkit-writing-mode: vertical-rl;
27 }
28 .vertical-lr {
29     -webkit-writing-mode: vertical-lr;
30 }
31 .row {
32     -webkit-flex-flow: row;
33 }
34 .row-reverse {
35     -webkit-flex-flow: row-reverse;
36 }
37 .column {
38     -webkit-flex-flow: column;
39 }
40 .column-reverse {
41     -webkit-flex-flow: column-reverse;
42 }
43 .wrap {
44     -webkit-flex-wrap: wrap;
45 }
46 .wrap-reverse {
47     -webkit-flex-wrap: wrap-reverse;
48 }
49 .pack-start {
50     -webkit-flex-pack: start;
51 }
52 .pack-end {
53     -webkit-flex-pack: end;
54 }
55 .pack-center {
56     -webkit-flex-pack: center;
57 }
58 .pack-justify {
59     -webkit-flex-pack: justify;
60 }
61 .pack-distribute {
62     -webkit-flex-pack: distribute;
63 }
64 .flexbox > :nth-child(1) {
65     background-color: #0f0;
66 }
67 .flexbox > :nth-child(2) {
68     background-color: #090;
69 }
70 .flexbox > :nth-child(3) {
71     background-color: #00f;
72 }
73 .flexbox > :nth-child(4) {
74     background-color: #009;
75 }
76 </style>
77 <script>
78 if (window.layoutTestController)
79     layoutTestController.dumpAsText();
80 </script>
81 <script src="resources/flexbox.js"></script>
82 <body onload="checkFlexBoxen()">
83
84 <script>
85 var expectations = {
86     'horizontal-tb': {
87         'row': {
88             'ltr': {
89                 'wrap': {
90                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     'start': {
1481                         'flexbox': [80, 20],
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                     'end': {
1488                         'flexbox': [80, 20],
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, 20],
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                     'justify': {
1502                         'flexbox': [80, 20],
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                     'distribute': {
1509                         'flexbox': [80, 20],
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                     'start': {
1518                         'flexbox': [80, 20],
1519                         'child1': [40, 10, 40, 10],
1520                         'child2': [20, 10, 20, 10],
1521                         'child3': [40, 10, 40, 0],
1522                         'child4': [20, 10, 20, 0],
1523                     },
1524                     'end': {
1525                         'flexbox': [80, 20],
1526                         'child1': [40, 10, 20, 10],
1527                         'child2': [20, 10, 0, 10],
1528                         'child3': [40, 10, 20, 0],
1529                         'child4': [20, 10, 0, 0],
1530                     },
1531                     'center': {
1532                         'flexbox': [80, 20],
1533                         'child1': [40, 10, 30, 10],
1534                         'child2': [20, 10, 10, 10],
1535                         'child3': [40, 10, 30, 0],
1536                         'child4': [20, 10, 10, 0],
1537                     },
1538                     'justify': {
1539                         'flexbox': [80, 20],
1540                         'child1': [40, 10, 40, 10],
1541                         'child2': [20, 10, 0, 10],
1542                         'child3': [40, 10, 40, 0],
1543                         'child4': [20, 10, 0, 0],
1544                     },
1545                     'distribute': {
1546                         'flexbox': [80, 20],
1547                         'child1': [40, 10, 35, 10],
1548                         'child2': [20, 10, 5, 10],
1549                         'child3': [40, 10, 35, 0],
1550                         'child4': [20, 10, 5, 0],
1551                     },
1552                 },
1553             },
1554             'rtl': {
1555                 'wrap': {
1556                     'start': {
1557                         'flexbox': [80, 20],
1558                         'child1': [40, 10, 40, 10],
1559                         'child2': [20, 10, 20, 10],
1560                         'child3': [40, 10, 40, 0],
1561                         'child4': [20, 10, 20, 0],
1562                     },
1563                     'end': {
1564                         'flexbox': [80, 20],
1565                         'child1': [40, 10, 20, 10],
1566                         'child2': [20, 10, 0, 10],
1567                         'child3': [40, 10, 20, 0],
1568                         'child4': [20, 10, 0, 0],
1569                     },
1570                     'center': {
1571                         'flexbox': [80, 20],
1572                         'child1': [40, 10, 30, 10],
1573                         'child2': [20, 10, 10, 10],
1574                         'child3': [40, 10, 30, 0],
1575                         'child4': [20, 10, 10, 0],
1576                     },
1577                     'justify': {
1578                         'flexbox': [80, 20],
1579                         'child1': [40, 10, 40, 10],
1580                         'child2': [20, 10, 0, 10],
1581                         'child3': [40, 10, 40, 0],
1582                         'child4': [20, 10, 0, 0],
1583                     },
1584                     'distribute': {
1585                         'flexbox': [80, 20],
1586                         'child1': [40, 10, 35, 10],
1587                         'child2': [20, 10, 5, 10],
1588                         'child3': [40, 10, 35, 0],
1589                         'child4': [20, 10, 5, 0],
1590                     },
1591                 },
1592                 'wrap-reverse': {
1593                     'start': {
1594                         'flexbox': [80, 20],
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                     'end': {
1601                         'flexbox': [80, 20],
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, 20],
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                     'justify': {
1615                         'flexbox': [80, 20],
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                     'distribute': {
1622                         'flexbox': [80, 20],
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     'start': {
1789                         'flexbox': [80, 20],
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                     'end': {
1796                         'flexbox': [80, 20],
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, 20],
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                     'justify': {
1810                         'flexbox': [80, 20],
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                     'distribute': {
1817                         'flexbox': [80, 20],
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                     'start': {
1826                         'flexbox': [80, 20],
1827                         'child1': [40, 10, 0, 10],
1828                         'child2': [20, 10, 40, 10],
1829                         'child3': [40, 10, 0, 0],
1830                         'child4': [20, 10, 40, 0],
1831                     },
1832                     'end': {
1833                         'flexbox': [80, 20],
1834                         'child1': [40, 10, 20, 10],
1835                         'child2': [20, 10, 60, 10],
1836                         'child3': [40, 10, 20, 0],
1837                         'child4': [20, 10, 60, 0],
1838                     },
1839                     'center': {
1840                         'flexbox': [80, 20],
1841                         'child1': [40, 10, 10, 10],
1842                         'child2': [20, 10, 50, 10],
1843                         'child3': [40, 10, 10, 0],
1844                         'child4': [20, 10, 50, 0],
1845                     },
1846                     'justify': {
1847                         'flexbox': [80, 20],
1848                         'child1': [40, 10, 0, 10],
1849                         'child2': [20, 10, 60, 10],
1850                         'child3': [40, 10, 0, 0],
1851                         'child4': [20, 10, 60, 0],
1852                     },
1853                     'distribute': {
1854                         'flexbox': [80, 20],
1855                         'child1': [40, 10, 5, 10],
1856                         'child2': [20, 10, 55, 10],
1857                         'child3': [40, 10, 5, 0],
1858                         'child4': [20, 10, 55, 0],
1859                     },
1860                 },
1861             },
1862             'rtl': {
1863                 'wrap': {
1864                     'start': {
1865                         'flexbox': [80, 20],
1866                         'child1': [40, 10, 0, 10],
1867                         'child2': [20, 10, 40, 10],
1868                         'child3': [40, 10, 0, 0],
1869                         'child4': [20, 10, 40, 0],
1870                     },
1871                     'end': {
1872                         'flexbox': [80, 20],
1873                         'child1': [40, 10, 20, 10],
1874                         'child2': [20, 10, 60, 10],
1875                         'child3': [40, 10, 20, 0],
1876                         'child4': [20, 10, 60, 0],
1877                     },
1878                     'center': {
1879                         'flexbox': [80, 20],
1880                         'child1': [40, 10, 10, 10],
1881                         'child2': [20, 10, 50, 10],
1882                         'child3': [40, 10, 10, 0],
1883                         'child4': [20, 10, 50, 0],
1884                     },
1885                     'justify': {
1886                         'flexbox': [80, 20],
1887                         'child1': [40, 10, 0, 10],
1888                         'child2': [20, 10, 60, 10],
1889                         'child3': [40, 10, 0, 0],
1890                         'child4': [20, 10, 60, 0],
1891                     },
1892                     'distribute': {
1893                         'flexbox': [80, 20],
1894                         'child1': [40, 10, 5, 10],
1895                         'child2': [20, 10, 55, 10],
1896                         'child3': [40, 10, 5, 0],
1897                         'child4': [20, 10, 55, 0],
1898                     },
1899                 },
1900                 'wrap-reverse': {
1901                     'start': {
1902                         'flexbox': [80, 20],
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                     'end': {
1909                         'flexbox': [80, 20],
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, 20],
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                     'justify': {
1923                         'flexbox': [80, 20],
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                     'distribute': {
1930                         'flexbox': [80, 20],
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     'start': {
2099                         'flexbox': [80, 20],
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                     'end': {
2106                         'flexbox': [80, 20],
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, 20],
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                     'justify': {
2120                         'flexbox': [80, 20],
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                     'distribute': {
2127                         'flexbox': [80, 20],
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                     'start': {
2136                         'flexbox': [80, 20],
2137                         'child1': [40, 10, 0, 10],
2138                         'child2': [20, 10, 40, 10],
2139                         'child3': [40, 10, 0, 0],
2140                         'child4': [20, 10, 40, 0],
2141                     },
2142                     'end': {
2143                         'flexbox': [80, 20],
2144                         'child1': [40, 10, 20, 10],
2145                         'child2': [20, 10, 60, 10],
2146                         'child3': [40, 10, 20, 0],
2147                         'child4': [20, 10, 60, 0],
2148                     },
2149                     'center': {
2150                         'flexbox': [80, 20],
2151                         'child1': [40, 10, 10, 10],
2152                         'child2': [20, 10, 50, 10],
2153                         'child3': [40, 10, 10, 0],
2154                         'child4': [20, 10, 50, 0],
2155                     },
2156                     'justify': {
2157                         'flexbox': [80, 20],
2158                         'child1': [40, 10, 0, 10],
2159                         'child2': [20, 10, 60, 10],
2160                         'child3': [40, 10, 0, 0],
2161                         'child4': [20, 10, 60, 0],
2162                     },
2163                     'distribute': {
2164                         'flexbox': [80, 20],
2165                         'child1': [40, 10, 5, 10],
2166                         'child2': [20, 10, 55, 10],
2167                         'child3': [40, 10, 5, 0],
2168                         'child4': [20, 10, 55, 0],
2169                     },
2170                 },
2171             },
2172             'rtl': {
2173                 'wrap': {
2174                     'start': {
2175                         'flexbox': [80, 20],
2176                         'child1': [40, 10, 0, 10],
2177                         'child2': [20, 10, 40, 10],
2178                         'child3': [40, 10, 0, 0],
2179                         'child4': [20, 10, 40, 0],
2180                     },
2181                     'end': {
2182                         'flexbox': [80, 20],
2183                         'child1': [40, 10, 20, 10],
2184                         'child2': [20, 10, 60, 10],
2185                         'child3': [40, 10, 20, 0],
2186                         'child4': [20, 10, 60, 0],
2187                     },
2188                     'center': {
2189                         'flexbox': [80, 20],
2190                         'child1': [40, 10, 10, 10],
2191                         'child2': [20, 10, 50, 10],
2192                         'child3': [40, 10, 10, 0],
2193                         'child4': [20, 10, 50, 0],
2194                     },
2195                     'justify': {
2196                         'flexbox': [80, 20],
2197                         'child1': [40, 10, 0, 10],
2198                         'child2': [20, 10, 60, 10],
2199                         'child3': [40, 10, 0, 0],
2200                         'child4': [20, 10, 60, 0],
2201                     },
2202                     'distribute': {
2203                         'flexbox': [80, 20],
2204                         'child1': [40, 10, 5, 10],
2205                         'child2': [20, 10, 55, 10],
2206                         'child3': [40, 10, 5, 0],
2207                         'child4': [20, 10, 55, 0],
2208                     },
2209                 },
2210                 'wrap-reverse': {
2211                     'start': {
2212                         'flexbox': [80, 20],
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                     'end': {
2219                         'flexbox': [80, 20],
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, 20],
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                     'justify': {
2233                         'flexbox': [80, 20],
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                     'distribute': {
2240                         'flexbox': [80, 20],
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     '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                     '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                     'justify': {
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                     'distribute': {
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                     'start': {
2407                         'flexbox': [80, 20],
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                     'end': {
2414                         'flexbox': [80, 20],
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, 20],
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                     'justify': {
2428                         'flexbox': [80, 20],
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                     'distribute': {
2435                         'flexbox': [80, 20],
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                     'start': {
2444                         'flexbox': [80, 20],
2445                         'child1': [40, 10, 40, 10],
2446                         'child2': [20, 10, 20, 10],
2447                         'child3': [40, 10, 40, 0],
2448                         'child4': [20, 10, 20, 0],
2449                     },
2450                     'end': {
2451                         'flexbox': [80, 20],
2452                         'child1': [40, 10, 20, 10],
2453                         'child2': [20, 10, 0, 10],
2454                         'child3': [40, 10, 20, 0],
2455                         'child4': [20, 10, 0, 0],
2456                     },
2457                     'center': {
2458                         'flexbox': [80, 20],
2459                         'child1': [40, 10, 30, 10],
2460                         'child2': [20, 10, 10, 10],
2461                         'child3': [40, 10, 30, 0],
2462                         'child4': [20, 10, 10, 0],
2463                     },
2464                     'justify': {
2465                         'flexbox': [80, 20],
2466                         'child1': [40, 10, 40, 10],
2467                         'child2': [20, 10, 0, 10],
2468                         'child3': [40, 10, 40, 0],
2469                         'child4': [20, 10, 0, 0],
2470                     },
2471                     'distribute': {
2472                         'flexbox': [80, 20],
2473                         'child1': [40, 10, 35, 10],
2474                         'child2': [20, 10, 5, 10],
2475                         'child3': [40, 10, 35, 0],
2476                         'child4': [20, 10, 5, 0],
2477                     },
2478                 },
2479             },
2480             'rtl': {
2481                 'wrap': {
2482                     'start': {
2483                         'flexbox': [80, 20],
2484                         'child1': [40, 10, 40, 10],
2485                         'child2': [20, 10, 20, 10],
2486                         'child3': [40, 10, 40, 0],
2487                         'child4': [20, 10, 20, 0],
2488                     },
2489                     'end': {
2490                         'flexbox': [80, 20],
2491                         'child1': [40, 10, 20, 10],
2492                         'child2': [20, 10, 0, 10],
2493                         'child3': [40, 10, 20, 0],
2494                         'child4': [20, 10, 0, 0],
2495                     },
2496                     'center': {
2497                         'flexbox': [80, 20],
2498                         'child1': [40, 10, 30, 10],
2499                         'child2': [20, 10, 10, 10],
2500                         'child3': [40, 10, 30, 0],
2501                         'child4': [20, 10, 10, 0],
2502                     },
2503                     'justify': {
2504                         'flexbox': [80, 20],
2505                         'child1': [40, 10, 40, 10],
2506                         'child2': [20, 10, 0, 10],
2507                         'child3': [40, 10, 40, 0],
2508                         'child4': [20, 10, 0, 0],
2509                     },
2510                     'distribute': {
2511                         'flexbox': [80, 20],
2512                         'child1': [40, 10, 35, 10],
2513                         'child2': [20, 10, 5, 10],
2514                         'child3': [40, 10, 35, 0],
2515                         'child4': [20, 10, 5, 0],
2516                     },
2517                 },
2518                 'wrap-reverse': {
2519                     'start': {
2520                         'flexbox': [80, 20],
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                     'end': {
2527                         'flexbox': [80, 20],
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, 20],
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                     'justify': {
2541                         'flexbox': [80, 20],
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                     'distribute': {
2548                         'flexbox': [80, 20],
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 packs = ['start', 'end', 'center', 'justify', 'distribute'];
2587
2588 writingModes.forEach(function(writingMode) {
2589     flexDirections.forEach(function(flexDirection) {
2590         directions.forEach(function(direction) {
2591             wraps.forEach(function(wrap) {
2592                 packs.forEach(function(pack) {
2593                     var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' ' + wrap + ' pack-' + pack;
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][pack];
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>