implement flexbox wrap-reverse
[WebKit-https.git] / LayoutTests / css3 / flexbox / multiline-align.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .flexbox {
5     position: relative;
6     display: -webkit-flexbox;
7     background-color: grey;
8     max-width: 600px;
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 .flexbox > :nth-child(1) {
50     background-color: #0f0;
51 }
52 .flexbox > :nth-child(2) {
53     background-color: #0d0;
54 }
55 .flexbox > :nth-child(3) {
56     background-color: #0b0;
57 }
58 .flexbox > :nth-child(4) {
59     background-color: #090;
60 }
61 .flexbox > :nth-child(5) {
62     background-color: #070;
63 }
64 .flexbox > :nth-child(6) {
65     background-color: #050;
66 }
67 .flexbox > :nth-child(7) {
68     background-color: #030;
69 }
70
71 .flexbox > :nth-child(8) {
72     background-color: #00f;
73 }
74 .flexbox > :nth-child(9) {
75     background-color: #00d;
76 }
77 .flexbox > :nth-child(10) {
78     background-color: #00b;
79 }
80 .flexbox > :nth-child(11) {
81     background-color: #009;
82 }
83 .flexbox > :nth-child(12) {
84     background-color: #007;
85 }
86 .flexbox > :nth-child(13) {
87     background-color: #005;
88 }
89 .flexbox > :nth-child(14) {
90     background-color: #003;
91 }
92 </style>
93 <script>
94 if (window.layoutTestController)
95     layoutTestController.dumpAsText();
96 </script>
97 <script src="resources/flexbox.js"></script>
98 <body onload="checkFlexBoxen()">
99
100 <script>
101 var expectations = {
102     'horizontal-tb': {
103         'row': {
104             'ltr': {
105                 'wrap': {
106                     'flexbox': [70, 60],
107                     'child1': [10, 10, 0, 0],
108                     'child2': [10, 10, 10, 10],
109                     'child3': [10, 10, 20, 20],
110                     'child4': [10, 10, 30, 5],
111                     'child5': [10, 10, 40, 5],
112                     'child6': [10, 30, 50, 0],
113                     'child7': [10, 30, 60, 0],
114                     'child8': [10, 10, 0, 30],
115                     'child9': [10, 10, 10, 40],
116                     'child10': [10, 10, 20, 50],
117                     'child11': [10, 10, 30, 35],
118                     'child12': [10, 10, 40, 35],
119                     'child13': [10, 30, 50, 30],
120                     'child14': [10, 30, 60, 30],
121                 },
122                 'wrap-reverse': {
123                     'flexbox': [70, 60],
124                     'child1': [10, 10, 0, 50],
125                     'child2': [10, 10, 10, 40],
126                     'child3': [10, 10, 20, 30],
127                     'child4': [10, 10, 30, 50],
128                     'child5': [10, 10, 40, 50],
129                     'child6': [10, 30, 50, 30],
130                     'child7': [10, 30, 60, 30],
131                     'child8': [10, 10, 0, 20],
132                     'child9': [10, 10, 10, 10],
133                     'child10': [10, 10, 20, 0],
134                     'child11': [10, 10, 30, 20],
135                     'child12': [10, 10, 40, 20],
136                     'child13': [10, 30, 50, 0],
137                     'child14': [10, 30, 60, 0],
138                 },
139             },
140             'rtl': {
141                 'wrap': {
142                     'flexbox': [70, 60],
143                     'child1': [10, 10, 60, 0],
144                     'child2': [10, 10, 50, 10],
145                     'child3': [10, 10, 40, 20],
146                     'child4': [10, 10, 30, 5],
147                     'child5': [10, 10, 20, 5],
148                     'child6': [10, 30, 10, 0],
149                     'child7': [10, 30, 0, 0],
150                     'child8': [10, 10, 60, 30],
151                     'child9': [10, 10, 50, 40],
152                     'child10': [10, 10, 40, 50],
153                     'child11': [10, 10, 30, 35],
154                     'child12': [10, 10, 20, 35],
155                     'child13': [10, 30, 10, 30],
156                     'child14': [10, 30, 0, 30],
157                 },
158                 'wrap-reverse': {
159                     'flexbox': [70, 60],
160                     'child1': [10, 10, 60, 50],
161                     'child2': [10, 10, 50, 40],
162                     'child3': [10, 10, 40, 30],
163                     'child4': [10, 10, 30, 50],
164                     'child5': [10, 10, 20, 50],
165                     'child6': [10, 30, 10, 30],
166                     'child7': [10, 30, 0, 30],
167                     'child8': [10, 10, 60, 20],
168                     'child9': [10, 10, 50, 10],
169                     'child10': [10, 10, 40, 0],
170                     'child11': [10, 10, 30, 20],
171                     'child12': [10, 10, 20, 20],
172                     'child13': [10, 30, 10, 0],
173                     'child14': [10, 30, 0, 0],
174                 },
175             },
176         },
177         'column': {
178             'ltr': {
179                 'wrap': {
180                     'flexbox': [600, 70],
181                     'child1': [10, 10, 0, 0],
182                     'child2': [10, 10, 10, 10],
183                     'child3': [10, 10, 20, 20],
184                     'child4': [10, 10, 5, 30],
185                     'child5': [10, 10, 5, 40],
186                     'child6': [30, 10, 0, 50],
187                     'child7': [30, 10, 0, 60],
188                     'child8': [10, 10, 30, 0],
189                     'child9': [10, 10, 40, 10],
190                     'child10': [10, 10, 50, 20],
191                     'child11': [10, 10, 35, 30],
192                     'child12': [10, 10, 35, 40],
193                     'child13': [30, 10, 30, 50],
194                     'child14': [30, 10, 30, 60],
195                 },
196                 'wrap-reverse': {
197                     'flexbox': [600, 70],
198                     'child1': [10, 10, 590, 0],
199                     'child2': [10, 10, 580, 10],
200                     'child3': [10, 10, 570, 20],
201                     'child4': [10, 10, 590, 30],
202                     'child5': [10, 10, 590, 40],
203                     'child6': [30, 10, 570, 50],
204                     'child7': [30, 10, 570, 60],
205                     'child8': [10, 10, 560, 0],
206                     'child9': [10, 10, 550, 10],
207                     'child10': [10, 10, 540, 20],
208                     'child11': [10, 10, 560, 30],
209                     'child12': [10, 10, 560, 40],
210                     'child13': [30, 10, 540, 50],
211                     'child14': [30, 10, 540, 60],
212                 },
213             },
214             'rtl': {
215                 'wrap': {
216                     'flexbox': [600, 70],
217                     'child1': [10, 10, 590, 0],
218                     'child2': [10, 10, 580, 10],
219                     'child3': [10, 10, 570, 20],
220                     'child4': [10, 10, 585, 30],
221                     'child5': [10, 10, 585, 40],
222                     'child6': [30, 10, 570, 50],
223                     'child7': [30, 10, 570, 60],
224                     'child8': [10, 10, 560, 0],
225                     'child9': [10, 10, 550, 10],
226                     'child10': [10, 10, 540, 20],
227                     'child11': [10, 10, 555, 30],
228                     'child12': [10, 10, 555, 40],
229                     'child13': [30, 10, 540, 50],
230                     'child14': [30, 10, 540, 60],
231                 },
232                 'wrap-reverse': {
233                     'flexbox': [600, 70],
234                     'child1': [10, 10, 0, 0],
235                     'child2': [10, 10, 10, 10],
236                     'child3': [10, 10, 20, 20],
237                     'child4': [10, 10, 0, 30],
238                     'child5': [10, 10, 0, 40],
239                     'child6': [30, 10, 0, 50],
240                     'child7': [30, 10, 0, 60],
241                     'child8': [10, 10, 30, 0],
242                     'child9': [10, 10, 40, 10],
243                     'child10': [10, 10, 50, 20],
244                     'child11': [10, 10, 30, 30],
245                     'child12': [10, 10, 30, 40],
246                     'child13': [30, 10, 30, 50],
247                     'child14': [30, 10, 30, 60],
248                 },
249             },
250         },
251         'row-reverse': {
252             'ltr': {
253                 'wrap': {
254                     'flexbox': [70, 60],
255                     'child1': [10, 10, 60, 0],
256                     'child2': [10, 10, 50, 10],
257                     'child3': [10, 10, 40, 20],
258                     'child4': [10, 10, 30, 5],
259                     'child5': [10, 10, 20, 5],
260                     'child6': [10, 30, 10, 0],
261                     'child7': [10, 30, 0, 0],
262                     'child8': [10, 10, 60, 30],
263                     'child9': [10, 10, 50, 40],
264                     'child10': [10, 10, 40, 50],
265                     'child11': [10, 10, 30, 35],
266                     'child12': [10, 10, 20, 35],
267                     'child13': [10, 30, 10, 30],
268                     'child14': [10, 30, 0, 30],
269                 },
270                 'wrap-reverse': {
271                     'flexbox': [70, 60],
272                     'child1': [10, 10, 60, 50],
273                     'child2': [10, 10, 50, 40],
274                     'child3': [10, 10, 40, 30],
275                     'child4': [10, 10, 30, 50],
276                     'child5': [10, 10, 20, 50],
277                     'child6': [10, 30, 10, 30],
278                     'child7': [10, 30, 0, 30],
279                     'child8': [10, 10, 60, 20],
280                     'child9': [10, 10, 50, 10],
281                     'child10': [10, 10, 40, 0],
282                     'child11': [10, 10, 30, 20],
283                     'child12': [10, 10, 20, 20],
284                     'child13': [10, 30, 10, 0],
285                     'child14': [10, 30, 0, 0],
286                 },
287             },
288             'rtl': {
289                 'wrap': {
290                     'flexbox': [70, 60],
291                     'child1': [10, 10, 0, 0],
292                     'child2': [10, 10, 10, 10],
293                     'child3': [10, 10, 20, 20],
294                     'child4': [10, 10, 30, 5],
295                     'child5': [10, 10, 40, 5],
296                     'child6': [10, 30, 50, 0],
297                     'child7': [10, 30, 60, 0],
298                     'child8': [10, 10, 0, 30],
299                     'child9': [10, 10, 10, 40],
300                     'child10': [10, 10, 20, 50],
301                     'child11': [10, 10, 30, 35],
302                     'child12': [10, 10, 40, 35],
303                     'child13': [10, 30, 50, 30],
304                     'child14': [10, 30, 60, 30],
305                 },
306                 'wrap-reverse': {
307                     'flexbox': [70, 60],
308                     'child1': [10, 10, 0, 50],
309                     'child2': [10, 10, 10, 40],
310                     'child3': [10, 10, 20, 30],
311                     'child4': [10, 10, 30, 50],
312                     'child5': [10, 10, 40, 50],
313                     'child6': [10, 30, 50, 30],
314                     'child7': [10, 30, 60, 30],
315                     'child8': [10, 10, 0, 20],
316                     'child9': [10, 10, 10, 10],
317                     'child10': [10, 10, 20, 0],
318                     'child11': [10, 10, 30, 20],
319                     'child12': [10, 10, 40, 20],
320                     'child13': [10, 30, 50, 0],
321                     'child14': [10, 30, 60, 0],
322                 },
323             },
324         },
325         'column-reverse': {
326             'ltr': {
327                 'wrap': {
328                     'flexbox': [600, 70],
329                     'child1': [10, 10, 0, 60],
330                     'child2': [10, 10, 10, 50],
331                     'child3': [10, 10, 20, 40],
332                     'child4': [10, 10, 5, 30],
333                     'child5': [10, 10, 5, 20],
334                     'child6': [30, 10, 0, 10],
335                     'child7': [30, 10, 0, 0],
336                     'child8': [10, 10, 30, 60],
337                     'child9': [10, 10, 40, 50],
338                     'child10': [10, 10, 50, 40],
339                     'child11': [10, 10, 35, 30],
340                     'child12': [10, 10, 35, 20],
341                     'child13': [30, 10, 30, 10],
342                     'child14': [30, 10, 30, 0],
343                 },
344                 'wrap-reverse': {
345                     'flexbox': [600, 70],
346                     'child1': [10, 10, 590, 60],
347                     'child2': [10, 10, 580, 50],
348                     'child3': [10, 10, 570, 40],
349                     'child4': [10, 10, 590, 30],
350                     'child5': [10, 10, 590, 20],
351                     'child6': [30, 10, 570, 10],
352                     'child7': [30, 10, 570, 0],
353                     'child8': [10, 10, 560, 60],
354                     'child9': [10, 10, 550, 50],
355                     'child10': [10, 10, 540, 40],
356                     'child11': [10, 10, 560, 30],
357                     'child12': [10, 10, 560, 20],
358                     'child13': [30, 10, 540, 10],
359                     'child14': [30, 10, 540, 0],
360                 },
361             },
362             'rtl': {
363                 'wrap': {
364                     'flexbox': [600, 70],
365                     'child1': [10, 10, 590, 60],
366                     'child2': [10, 10, 580, 50],
367                     'child3': [10, 10, 570, 40],
368                     'child4': [10, 10, 585, 30],
369                     'child5': [10, 10, 585, 20],
370                     'child6': [30, 10, 570, 10],
371                     'child7': [30, 10, 570, 0],
372                     'child8': [10, 10, 560, 60],
373                     'child9': [10, 10, 550, 50],
374                     'child10': [10, 10, 540, 40],
375                     'child11': [10, 10, 555, 30],
376                     'child12': [10, 10, 555, 20],
377                     'child13': [30, 10, 540, 10],
378                     'child14': [30, 10, 540, 0],
379                 },
380                 'wrap-reverse': {
381                     'flexbox': [600, 70],
382                     'child1': [10, 10, 0, 60],
383                     'child2': [10, 10, 10, 50],
384                     'child3': [10, 10, 20, 40],
385                     'child4': [10, 10, 0, 30],
386                     'child5': [10, 10, 0, 20],
387                     'child6': [30, 10, 0, 10],
388                     'child7': [30, 10, 0, 0],
389                     'child8': [10, 10, 30, 60],
390                     'child9': [10, 10, 40, 50],
391                     'child10': [10, 10, 50, 40],
392                     'child11': [10, 10, 30, 30],
393                     'child12': [10, 10, 30, 20],
394                     'child13': [30, 10, 30, 10],
395                     'child14': [30, 10, 30, 0],
396                 },
397             },
398         },
399     },
400     'horizontal-bt': {
401         'row': {
402             'ltr': {
403                 'wrap': {
404                     'flexbox': [70, 60],
405                     'child1': [10, 10, 0, 50],
406                     'child2': [10, 10, 10, 40],
407                     'child3': [10, 10, 20, 30],
408                     'child4': [10, 10, 30, 45],
409                     'child5': [10, 10, 40, 45],
410                     'child6': [10, 30, 50, 30],
411                     'child7': [10, 30, 60, 30],
412                     'child8': [10, 10, 0, 20],
413                     'child9': [10, 10, 10, 10],
414                     'child10': [10, 10, 20, 0],
415                     'child11': [10, 10, 30, 15],
416                     'child12': [10, 10, 40, 15],
417                     'child13': [10, 30, 50, 0],
418                     'child14': [10, 30, 60, 0],
419                 },
420                 'wrap-reverse': {
421                     'flexbox': [70, 60],
422                     'child1': [10, 10, 0, 0],
423                     'child2': [10, 10, 10, 10],
424                     'child3': [10, 10, 20, 20],
425                     'child4': [10, 10, 30, 0],
426                     'child5': [10, 10, 40, 0],
427                     'child6': [10, 30, 50, 0],
428                     'child7': [10, 30, 60, 0],
429                     'child8': [10, 10, 0, 30],
430                     'child9': [10, 10, 10, 40],
431                     'child10': [10, 10, 20, 50],
432                     'child11': [10, 10, 30, 30],
433                     'child12': [10, 10, 40, 30],
434                     'child13': [10, 30, 50, 30],
435                     'child14': [10, 30, 60, 30],
436                 },
437             },
438             'rtl': {
439                 'wrap': {
440                     'flexbox': [70, 60],
441                     'child1': [10, 10, 60, 50],
442                     'child2': [10, 10, 50, 40],
443                     'child3': [10, 10, 40, 30],
444                     'child4': [10, 10, 30, 45],
445                     'child5': [10, 10, 20, 45],
446                     'child6': [10, 30, 10, 30],
447                     'child7': [10, 30, 0, 30],
448                     'child8': [10, 10, 60, 20],
449                     'child9': [10, 10, 50, 10],
450                     'child10': [10, 10, 40, 0],
451                     'child11': [10, 10, 30, 15],
452                     'child12': [10, 10, 20, 15],
453                     'child13': [10, 30, 10, 0],
454                     'child14': [10, 30, 0, 0],
455                 },
456                 'wrap-reverse': {
457                     'flexbox': [70, 60],
458                     'child1': [10, 10, 60, 0],
459                     'child2': [10, 10, 50, 10],
460                     'child3': [10, 10, 40, 20],
461                     'child4': [10, 10, 30, 0],
462                     'child5': [10, 10, 20, 0],
463                     'child6': [10, 30, 10, 0],
464                     'child7': [10, 30, 0, 0],
465                     'child8': [10, 10, 60, 30],
466                     'child9': [10, 10, 50, 40],
467                     'child10': [10, 10, 40, 50],
468                     'child11': [10, 10, 30, 30],
469                     'child12': [10, 10, 20, 30],
470                     'child13': [10, 30, 10, 30],
471                     'child14': [10, 30, 0, 30],
472                 },
473             },
474         },
475         'column': {
476             'ltr': {
477                 'wrap': {
478                     'flexbox': [600, 70],
479                     'child1': [10, 10, 0, 60],
480                     'child2': [10, 10, 10, 50],
481                     'child3': [10, 10, 20, 40],
482                     'child4': [10, 10, 5, 30],
483                     'child5': [10, 10, 5, 20],
484                     'child6': [30, 10, 0, 10],
485                     'child7': [30, 10, 0, 0],
486                     'child8': [10, 10, 30, 60],
487                     'child9': [10, 10, 40, 50],
488                     'child10': [10, 10, 50, 40],
489                     'child11': [10, 10, 35, 30],
490                     'child12': [10, 10, 35, 20],
491                     'child13': [30, 10, 30, 10],
492                     'child14': [30, 10, 30, 0],
493                 },
494                 'wrap-reverse': {
495                     'flexbox': [600, 70],
496                     'child1': [10, 10, 590, 60],
497                     'child2': [10, 10, 580, 50],
498                     'child3': [10, 10, 570, 40],
499                     'child4': [10, 10, 590, 30],
500                     'child5': [10, 10, 590, 20],
501                     'child6': [30, 10, 570, 10],
502                     'child7': [30, 10, 570, 0],
503                     'child8': [10, 10, 560, 60],
504                     'child9': [10, 10, 550, 50],
505                     'child10': [10, 10, 540, 40],
506                     'child11': [10, 10, 560, 30],
507                     'child12': [10, 10, 560, 20],
508                     'child13': [30, 10, 540, 10],
509                     'child14': [30, 10, 540, 0],
510                 },
511             },
512             'rtl': {
513                 'wrap': {
514                     'flexbox': [600, 70],
515                     'child1': [10, 10, 590, 60],
516                     'child2': [10, 10, 580, 50],
517                     'child3': [10, 10, 570, 40],
518                     'child4': [10, 10, 585, 30],
519                     'child5': [10, 10, 585, 20],
520                     'child6': [30, 10, 570, 10],
521                     'child7': [30, 10, 570, 0],
522                     'child8': [10, 10, 560, 60],
523                     'child9': [10, 10, 550, 50],
524                     'child10': [10, 10, 540, 40],
525                     'child11': [10, 10, 555, 30],
526                     'child12': [10, 10, 555, 20],
527                     'child13': [30, 10, 540, 10],
528                     'child14': [30, 10, 540, 0],
529                 },
530                 'wrap-reverse': {
531                     'flexbox': [600, 70],
532                     'child1': [10, 10, 0, 60],
533                     'child2': [10, 10, 10, 50],
534                     'child3': [10, 10, 20, 40],
535                     'child4': [10, 10, 0, 30],
536                     'child5': [10, 10, 0, 20],
537                     'child6': [30, 10, 0, 10],
538                     'child7': [30, 10, 0, 0],
539                     'child8': [10, 10, 30, 60],
540                     'child9': [10, 10, 40, 50],
541                     'child10': [10, 10, 50, 40],
542                     'child11': [10, 10, 30, 30],
543                     'child12': [10, 10, 30, 20],
544                     'child13': [30, 10, 30, 10],
545                     'child14': [30, 10, 30, 0],
546                 },
547             },
548         },
549         'row-reverse': {
550             'ltr': {
551                 'wrap': {
552                     'flexbox': [70, 60],
553                     'child1': [10, 10, 60, 50],
554                     'child2': [10, 10, 50, 40],
555                     'child3': [10, 10, 40, 30],
556                     'child4': [10, 10, 30, 45],
557                     'child5': [10, 10, 20, 45],
558                     'child6': [10, 30, 10, 30],
559                     'child7': [10, 30, 0, 30],
560                     'child8': [10, 10, 60, 20],
561                     'child9': [10, 10, 50, 10],
562                     'child10': [10, 10, 40, 0],
563                     'child11': [10, 10, 30, 15],
564                     'child12': [10, 10, 20, 15],
565                     'child13': [10, 30, 10, 0],
566                     'child14': [10, 30, 0, 0],
567                 },
568                 'wrap-reverse': {
569                     'flexbox': [70, 60],
570                     'child1': [10, 10, 60, 0],
571                     'child2': [10, 10, 50, 10],
572                     'child3': [10, 10, 40, 20],
573                     'child4': [10, 10, 30, 0],
574                     'child5': [10, 10, 20, 0],
575                     'child6': [10, 30, 10, 0],
576                     'child7': [10, 30, 0, 0],
577                     'child8': [10, 10, 60, 30],
578                     'child9': [10, 10, 50, 40],
579                     'child10': [10, 10, 40, 50],
580                     'child11': [10, 10, 30, 30],
581                     'child12': [10, 10, 20, 30],
582                     'child13': [10, 30, 10, 30],
583                     'child14': [10, 30, 0, 30],
584                 },
585             },
586             'rtl': {
587                 'wrap': {
588                     'flexbox': [70, 60],
589                     'child1': [10, 10, 0, 50],
590                     'child2': [10, 10, 10, 40],
591                     'child3': [10, 10, 20, 30],
592                     'child4': [10, 10, 30, 45],
593                     'child5': [10, 10, 40, 45],
594                     'child6': [10, 30, 50, 30],
595                     'child7': [10, 30, 60, 30],
596                     'child8': [10, 10, 0, 20],
597                     'child9': [10, 10, 10, 10],
598                     'child10': [10, 10, 20, 0],
599                     'child11': [10, 10, 30, 15],
600                     'child12': [10, 10, 40, 15],
601                     'child13': [10, 30, 50, 0],
602                     'child14': [10, 30, 60, 0],
603                 },
604                 'wrap-reverse': {
605                     'flexbox': [70, 60],
606                     'child1': [10, 10, 0, 0],
607                     'child2': [10, 10, 10, 10],
608                     'child3': [10, 10, 20, 20],
609                     'child4': [10, 10, 30, 0],
610                     'child5': [10, 10, 40, 0],
611                     'child6': [10, 30, 50, 0],
612                     'child7': [10, 30, 60, 0],
613                     'child8': [10, 10, 0, 30],
614                     'child9': [10, 10, 10, 40],
615                     'child10': [10, 10, 20, 50],
616                     'child11': [10, 10, 30, 30],
617                     'child12': [10, 10, 40, 30],
618                     'child13': [10, 30, 50, 30],
619                     'child14': [10, 30, 60, 30],
620                 },
621             },
622         },
623         'column-reverse': {
624             'ltr': {
625                 'wrap': {
626                     'flexbox': [600, 70],
627                     'child1': [10, 10, 0, 0],
628                     'child2': [10, 10, 10, 10],
629                     'child3': [10, 10, 20, 20],
630                     'child4': [10, 10, 5, 30],
631                     'child5': [10, 10, 5, 40],
632                     'child6': [30, 10, 0, 50],
633                     'child7': [30, 10, 0, 60],
634                     'child8': [10, 10, 30, 0],
635                     'child9': [10, 10, 40, 10],
636                     'child10': [10, 10, 50, 20],
637                     'child11': [10, 10, 35, 30],
638                     'child12': [10, 10, 35, 40],
639                     'child13': [30, 10, 30, 50],
640                     'child14': [30, 10, 30, 60],
641                 },
642                 'wrap-reverse': {
643                     'flexbox': [600, 70],
644                     'child1': [10, 10, 590, 0],
645                     'child2': [10, 10, 580, 10],
646                     'child3': [10, 10, 570, 20],
647                     'child4': [10, 10, 590, 30],
648                     'child5': [10, 10, 590, 40],
649                     'child6': [30, 10, 570, 50],
650                     'child7': [30, 10, 570, 60],
651                     'child8': [10, 10, 560, 0],
652                     'child9': [10, 10, 550, 10],
653                     'child10': [10, 10, 540, 20],
654                     'child11': [10, 10, 560, 30],
655                     'child12': [10, 10, 560, 40],
656                     'child13': [30, 10, 540, 50],
657                     'child14': [30, 10, 540, 60],
658                 },
659             },
660             'rtl': {
661                 'wrap': {
662                     'flexbox': [600, 70],
663                     'child1': [10, 10, 590, 0],
664                     'child2': [10, 10, 580, 10],
665                     'child3': [10, 10, 570, 20],
666                     'child4': [10, 10, 585, 30],
667                     'child5': [10, 10, 585, 40],
668                     'child6': [30, 10, 570, 50],
669                     'child7': [30, 10, 570, 60],
670                     'child8': [10, 10, 560, 0],
671                     'child9': [10, 10, 550, 10],
672                     'child10': [10, 10, 540, 20],
673                     'child11': [10, 10, 555, 30],
674                     'child12': [10, 10, 555, 40],
675                     'child13': [30, 10, 540, 50],
676                     'child14': [30, 10, 540, 60],
677                 },
678                 'wrap-reverse': {
679                     'flexbox': [600, 70],
680                     'child1': [10, 10, 0, 0],
681                     'child2': [10, 10, 10, 10],
682                     'child3': [10, 10, 20, 20],
683                     'child4': [10, 10, 0, 30],
684                     'child5': [10, 10, 0, 40],
685                     'child6': [30, 10, 0, 50],
686                     'child7': [30, 10, 0, 60],
687                     'child8': [10, 10, 30, 0],
688                     'child9': [10, 10, 40, 10],
689                     'child10': [10, 10, 50, 20],
690                     'child11': [10, 10, 30, 30],
691                     'child12': [10, 10, 30, 40],
692                     'child13': [30, 10, 30, 50],
693                     'child14': [30, 10, 30, 60],
694                 },
695             },
696         },
697     },
698     'vertical-rl': {
699         'row': {
700             'ltr': {
701                 'wrap': {
702                     'flexbox': [60, 70],
703                     'child1': [10, 10, 50, 0],
704                     'child2': [10, 10, 40, 10],
705                     'child3': [10, 10, 30, 20],
706                     'child4': [10, 10, 45, 30],
707                     'child5': [10, 10, 45, 40],
708                     'child6': [30, 10, 30, 50],
709                     'child7': [30, 10, 30, 60],
710                     'child8': [10, 10, 20, 0],
711                     'child9': [10, 10, 10, 10],
712                     'child10': [10, 10, 0, 20],
713                     'child11': [10, 10, 15, 30],
714                     'child12': [10, 10, 15, 40],
715                     'child13': [30, 10, 0, 50],
716                     'child14': [30, 10, 0, 60],
717                 },
718                 'wrap-reverse': {
719                     'flexbox': [60, 70],
720                     'child1': [10, 10, 0, 0],
721                     'child2': [10, 10, 10, 10],
722                     'child3': [10, 10, 20, 20],
723                     'child4': [10, 10, 0, 30],
724                     'child5': [10, 10, 0, 40],
725                     'child6': [30, 10, 0, 50],
726                     'child7': [30, 10, 0, 60],
727                     'child8': [10, 10, 30, 0],
728                     'child9': [10, 10, 40, 10],
729                     'child10': [10, 10, 50, 20],
730                     'child11': [10, 10, 30, 30],
731                     'child12': [10, 10, 30, 40],
732                     'child13': [30, 10, 30, 50],
733                     'child14': [30, 10, 30, 60],
734                 },
735             },
736             'rtl': {
737                 'wrap': {
738                     'flexbox': [60, 70],
739                     'child1': [10, 10, 50, 60],
740                     'child2': [10, 10, 40, 50],
741                     'child3': [10, 10, 30, 40],
742                     'child4': [10, 10, 45, 30],
743                     'child5': [10, 10, 45, 20],
744                     'child6': [30, 10, 30, 10],
745                     'child7': [30, 10, 30, 0],
746                     'child8': [10, 10, 20, 60],
747                     'child9': [10, 10, 10, 50],
748                     'child10': [10, 10, 0, 40],
749                     'child11': [10, 10, 15, 30],
750                     'child12': [10, 10, 15, 20],
751                     'child13': [30, 10, 0, 10],
752                     'child14': [30, 10, 0, 0],
753                 },
754                 'wrap-reverse': {
755                     'flexbox': [60, 70],
756                     'child1': [10, 10, 0, 60],
757                     'child2': [10, 10, 10, 50],
758                     'child3': [10, 10, 20, 40],
759                     'child4': [10, 10, 0, 30],
760                     'child5': [10, 10, 0, 20],
761                     'child6': [30, 10, 0, 10],
762                     'child7': [30, 10, 0, 0],
763                     'child8': [10, 10, 30, 60],
764                     'child9': [10, 10, 40, 50],
765                     'child10': [10, 10, 50, 40],
766                     'child11': [10, 10, 30, 30],
767                     'child12': [10, 10, 30, 20],
768                     'child13': [30, 10, 30, 10],
769                     'child14': [30, 10, 30, 0],
770                 },
771             },
772         },
773         'column': {
774             'ltr': {
775                 'wrap': {
776                     'flexbox': [70, 60],
777                     'child1': [10, 10, 60, 0],
778                     'child2': [10, 10, 50, 10],
779                     'child3': [10, 10, 40, 20],
780                     'child4': [10, 10, 30, 5],
781                     'child5': [10, 10, 20, 5],
782                     'child6': [10, 30, 10, 0],
783                     'child7': [10, 30, 0, 0],
784                     'child8': [10, 10, 60, 30],
785                     'child9': [10, 10, 50, 40],
786                     'child10': [10, 10, 40, 50],
787                     'child11': [10, 10, 30, 35],
788                     'child12': [10, 10, 20, 35],
789                     'child13': [10, 30, 10, 30],
790                     'child14': [10, 30, 0, 30],
791                 },
792                 'wrap-reverse': {
793                     'flexbox': [70, 60],
794                     'child1': [10, 10, 60, 50],
795                     'child2': [10, 10, 50, 40],
796                     'child3': [10, 10, 40, 30],
797                     'child4': [10, 10, 30, 50],
798                     'child5': [10, 10, 20, 50],
799                     'child6': [10, 30, 10, 30],
800                     'child7': [10, 30, 0, 30],
801                     'child8': [10, 10, 60, 20],
802                     'child9': [10, 10, 50, 10],
803                     'child10': [10, 10, 40, 0],
804                     'child11': [10, 10, 30, 20],
805                     'child12': [10, 10, 20, 20],
806                     'child13': [10, 30, 10, 0],
807                     'child14': [10, 30, 0, 0],
808                 },
809             },
810             'rtl': {
811                 'wrap': {
812                     'flexbox': [70, 60],
813                     'child1': [10, 10, 60, 50],
814                     'child2': [10, 10, 50, 40],
815                     'child3': [10, 10, 40, 30],
816                     'child4': [10, 10, 30, 45],
817                     'child5': [10, 10, 20, 45],
818                     'child6': [10, 30, 10, 30],
819                     'child7': [10, 30, 0, 30],
820                     'child8': [10, 10, 60, 20],
821                     'child9': [10, 10, 50, 10],
822                     'child10': [10, 10, 40, 0],
823                     'child11': [10, 10, 30, 15],
824                     'child12': [10, 10, 20, 15],
825                     'child13': [10, 30, 10, 0],
826                     'child14': [10, 30, 0, 0],
827                 },
828                 'wrap-reverse': {
829                     'flexbox': [70, 60],
830                     'child1': [10, 10, 60, 0],
831                     'child2': [10, 10, 50, 10],
832                     'child3': [10, 10, 40, 20],
833                     'child4': [10, 10, 30, 0],
834                     'child5': [10, 10, 20, 0],
835                     'child6': [10, 30, 10, 0],
836                     'child7': [10, 30, 0, 0],
837                     'child8': [10, 10, 60, 30],
838                     'child9': [10, 10, 50, 40],
839                     'child10': [10, 10, 40, 50],
840                     'child11': [10, 10, 30, 30],
841                     'child12': [10, 10, 20, 30],
842                     'child13': [10, 30, 10, 30],
843                     'child14': [10, 30, 0, 30],
844                 },
845             },
846         },
847         'row-reverse': {
848             'ltr': {
849                 'wrap': {
850                     'flexbox': [60, 70],
851                     'child1': [10, 10, 50, 60],
852                     'child2': [10, 10, 40, 50],
853                     'child3': [10, 10, 30, 40],
854                     'child4': [10, 10, 45, 30],
855                     'child5': [10, 10, 45, 20],
856                     'child6': [30, 10, 30, 10],
857                     'child7': [30, 10, 30, 0],
858                     'child8': [10, 10, 20, 60],
859                     'child9': [10, 10, 10, 50],
860                     'child10': [10, 10, 0, 40],
861                     'child11': [10, 10, 15, 30],
862                     'child12': [10, 10, 15, 20],
863                     'child13': [30, 10, 0, 10],
864                     'child14': [30, 10, 0, 0],
865                 },
866                 'wrap-reverse': {
867                     'flexbox': [60, 70],
868                     'child1': [10, 10, 0, 60],
869                     'child2': [10, 10, 10, 50],
870                     'child3': [10, 10, 20, 40],
871                     'child4': [10, 10, 0, 30],
872                     'child5': [10, 10, 0, 20],
873                     'child6': [30, 10, 0, 10],
874                     'child7': [30, 10, 0, 0],
875                     'child8': [10, 10, 30, 60],
876                     'child9': [10, 10, 40, 50],
877                     'child10': [10, 10, 50, 40],
878                     'child11': [10, 10, 30, 30],
879                     'child12': [10, 10, 30, 20],
880                     'child13': [30, 10, 30, 10],
881                     'child14': [30, 10, 30, 0],
882                 },
883             },
884             'rtl': {
885                 'wrap': {
886                     'flexbox': [60, 70],
887                     'child1': [10, 10, 50, 0],
888                     'child2': [10, 10, 40, 10],
889                     'child3': [10, 10, 30, 20],
890                     'child4': [10, 10, 45, 30],
891                     'child5': [10, 10, 45, 40],
892                     'child6': [30, 10, 30, 50],
893                     'child7': [30, 10, 30, 60],
894                     'child8': [10, 10, 20, 0],
895                     'child9': [10, 10, 10, 10],
896                     'child10': [10, 10, 0, 20],
897                     'child11': [10, 10, 15, 30],
898                     'child12': [10, 10, 15, 40],
899                     'child13': [30, 10, 0, 50],
900                     'child14': [30, 10, 0, 60],
901                 },
902                 'wrap-reverse': {
903                     'flexbox': [60, 70],
904                     'child1': [10, 10, 0, 0],
905                     'child2': [10, 10, 10, 10],
906                     'child3': [10, 10, 20, 20],
907                     'child4': [10, 10, 0, 30],
908                     'child5': [10, 10, 0, 40],
909                     'child6': [30, 10, 0, 50],
910                     'child7': [30, 10, 0, 60],
911                     'child8': [10, 10, 30, 0],
912                     'child9': [10, 10, 40, 10],
913                     'child10': [10, 10, 50, 20],
914                     'child11': [10, 10, 30, 30],
915                     'child12': [10, 10, 30, 40],
916                     'child13': [30, 10, 30, 50],
917                     'child14': [30, 10, 30, 60],
918                 },
919             },
920         },
921         'column-reverse': {
922             'ltr': {
923                 'wrap': {
924                     'flexbox': [70, 60],
925                     'child1': [10, 10, 0, 0],
926                     'child2': [10, 10, 10, 10],
927                     'child3': [10, 10, 20, 20],
928                     'child4': [10, 10, 30, 5],
929                     'child5': [10, 10, 40, 5],
930                     'child6': [10, 30, 50, 0],
931                     'child7': [10, 30, 60, 0],
932                     'child8': [10, 10, 0, 30],
933                     'child9': [10, 10, 10, 40],
934                     'child10': [10, 10, 20, 50],
935                     'child11': [10, 10, 30, 35],
936                     'child12': [10, 10, 40, 35],
937                     'child13': [10, 30, 50, 30],
938                     'child14': [10, 30, 60, 30],
939                 },
940                 'wrap-reverse': {
941                     'flexbox': [70, 60],
942                     'child1': [10, 10, 0, 50],
943                     'child2': [10, 10, 10, 40],
944                     'child3': [10, 10, 20, 30],
945                     'child4': [10, 10, 30, 50],
946                     'child5': [10, 10, 40, 50],
947                     'child6': [10, 30, 50, 30],
948                     'child7': [10, 30, 60, 30],
949                     'child8': [10, 10, 0, 20],
950                     'child9': [10, 10, 10, 10],
951                     'child10': [10, 10, 20, 0],
952                     'child11': [10, 10, 30, 20],
953                     'child12': [10, 10, 40, 20],
954                     'child13': [10, 30, 50, 0],
955                     'child14': [10, 30, 60, 0],
956                 },
957             },
958             'rtl': {
959                 'wrap': {
960                     'flexbox': [70, 60],
961                     'child1': [10, 10, 0, 50],
962                     'child2': [10, 10, 10, 40],
963                     'child3': [10, 10, 20, 30],
964                     'child4': [10, 10, 30, 45],
965                     'child5': [10, 10, 40, 45],
966                     'child6': [10, 30, 50, 30],
967                     'child7': [10, 30, 60, 30],
968                     'child8': [10, 10, 0, 20],
969                     'child9': [10, 10, 10, 10],
970                     'child10': [10, 10, 20, 0],
971                     'child11': [10, 10, 30, 15],
972                     'child12': [10, 10, 40, 15],
973                     'child13': [10, 30, 50, 0],
974                     'child14': [10, 30, 60, 0],
975                 },
976                 'wrap-reverse': {
977                     'flexbox': [70, 60],
978                     'child1': [10, 10, 0, 0],
979                     'child2': [10, 10, 10, 10],
980                     'child3': [10, 10, 20, 20],
981                     'child4': [10, 10, 30, 0],
982                     'child5': [10, 10, 40, 0],
983                     'child6': [10, 30, 50, 0],
984                     'child7': [10, 30, 60, 0],
985                     'child8': [10, 10, 0, 30],
986                     'child9': [10, 10, 10, 40],
987                     'child10': [10, 10, 20, 50],
988                     'child11': [10, 10, 30, 30],
989                     'child12': [10, 10, 40, 30],
990                     'child13': [10, 30, 50, 30],
991                     'child14': [10, 30, 60, 30],
992                 },
993             },
994         },
995     },
996     'vertical-lr': {
997         'row': {
998             'ltr': {
999                 'wrap': {
1000                     'flexbox': [60, 70],
1001                     'child1': [10, 10, 0, 0],
1002                     'child2': [10, 10, 10, 10],
1003                     'child3': [10, 10, 20, 20],
1004                     'child4': [10, 10, 5, 30],
1005                     'child5': [10, 10, 5, 40],
1006                     'child6': [30, 10, 0, 50],
1007                     'child7': [30, 10, 0, 60],
1008                     'child8': [10, 10, 30, 0],
1009                     'child9': [10, 10, 40, 10],
1010                     'child10': [10, 10, 50, 20],
1011                     'child11': [10, 10, 35, 30],
1012                     'child12': [10, 10, 35, 40],
1013                     'child13': [30, 10, 30, 50],
1014                     'child14': [30, 10, 30, 60],
1015                 },
1016                 'wrap-reverse': {
1017                     'flexbox': [60, 70],
1018                     'child1': [10, 10, 50, 0],
1019                     'child2': [10, 10, 40, 10],
1020                     'child3': [10, 10, 30, 20],
1021                     'child4': [10, 10, 50, 30],
1022                     'child5': [10, 10, 50, 40],
1023                     'child6': [30, 10, 30, 50],
1024                     'child7': [30, 10, 30, 60],
1025                     'child8': [10, 10, 20, 0],
1026                     'child9': [10, 10, 10, 10],
1027                     'child10': [10, 10, 0, 20],
1028                     'child11': [10, 10, 20, 30],
1029                     'child12': [10, 10, 20, 40],
1030                     'child13': [30, 10, 0, 50],
1031                     'child14': [30, 10, 0, 60],
1032                 },
1033             },
1034             'rtl': {
1035                 'wrap': {
1036                     'flexbox': [60, 70],
1037                     'child1': [10, 10, 0, 60],
1038                     'child2': [10, 10, 10, 50],
1039                     'child3': [10, 10, 20, 40],
1040                     'child4': [10, 10, 5, 30],
1041                     'child5': [10, 10, 5, 20],
1042                     'child6': [30, 10, 0, 10],
1043                     'child7': [30, 10, 0, 0],
1044                     'child8': [10, 10, 30, 60],
1045                     'child9': [10, 10, 40, 50],
1046                     'child10': [10, 10, 50, 40],
1047                     'child11': [10, 10, 35, 30],
1048                     'child12': [10, 10, 35, 20],
1049                     'child13': [30, 10, 30, 10],
1050                     'child14': [30, 10, 30, 0],
1051                 },
1052                 'wrap-reverse': {
1053                     'flexbox': [60, 70],
1054                     'child1': [10, 10, 50, 60],
1055                     'child2': [10, 10, 40, 50],
1056                     'child3': [10, 10, 30, 40],
1057                     'child4': [10, 10, 50, 30],
1058                     'child5': [10, 10, 50, 20],
1059                     'child6': [30, 10, 30, 10],
1060                     'child7': [30, 10, 30, 0],
1061                     'child8': [10, 10, 20, 60],
1062                     'child9': [10, 10, 10, 50],
1063                     'child10': [10, 10, 0, 40],
1064                     'child11': [10, 10, 20, 30],
1065                     'child12': [10, 10, 20, 20],
1066                     'child13': [30, 10, 0, 10],
1067                     'child14': [30, 10, 0, 0],
1068                 },
1069             },
1070         },
1071         'column': {
1072             'ltr': {
1073                 'wrap': {
1074                     'flexbox': [70, 60],
1075                     'child1': [10, 10, 0, 0],
1076                     'child2': [10, 10, 10, 10],
1077                     'child3': [10, 10, 20, 20],
1078                     'child4': [10, 10, 30, 5],
1079                     'child5': [10, 10, 40, 5],
1080                     'child6': [10, 30, 50, 0],
1081                     'child7': [10, 30, 60, 0],
1082                     'child8': [10, 10, 0, 30],
1083                     'child9': [10, 10, 10, 40],
1084                     'child10': [10, 10, 20, 50],
1085                     'child11': [10, 10, 30, 35],
1086                     'child12': [10, 10, 40, 35],
1087                     'child13': [10, 30, 50, 30],
1088                     'child14': [10, 30, 60, 30],
1089                 },
1090                 'wrap-reverse': {
1091                     'flexbox': [70, 60],
1092                     'child1': [10, 10, 0, 50],
1093                     'child2': [10, 10, 10, 40],
1094                     'child3': [10, 10, 20, 30],
1095                     'child4': [10, 10, 30, 50],
1096                     'child5': [10, 10, 40, 50],
1097                     'child6': [10, 30, 50, 30],
1098                     'child7': [10, 30, 60, 30],
1099                     'child8': [10, 10, 0, 20],
1100                     'child9': [10, 10, 10, 10],
1101                     'child10': [10, 10, 20, 0],
1102                     'child11': [10, 10, 30, 20],
1103                     'child12': [10, 10, 40, 20],
1104                     'child13': [10, 30, 50, 0],
1105                     'child14': [10, 30, 60, 0],
1106                 },
1107             },
1108             'rtl': {
1109                 'wrap': {
1110                     'flexbox': [70, 60],
1111                     'child1': [10, 10, 0, 50],
1112                     'child2': [10, 10, 10, 40],
1113                     'child3': [10, 10, 20, 30],
1114                     'child4': [10, 10, 30, 45],
1115                     'child5': [10, 10, 40, 45],
1116                     'child6': [10, 30, 50, 30],
1117                     'child7': [10, 30, 60, 30],
1118                     'child8': [10, 10, 0, 20],
1119                     'child9': [10, 10, 10, 10],
1120                     'child10': [10, 10, 20, 0],
1121                     'child11': [10, 10, 30, 15],
1122                     'child12': [10, 10, 40, 15],
1123                     'child13': [10, 30, 50, 0],
1124                     'child14': [10, 30, 60, 0],
1125                 },
1126                 'wrap-reverse': {
1127                     'flexbox': [70, 60],
1128                     'child1': [10, 10, 0, 0],
1129                     'child2': [10, 10, 10, 10],
1130                     'child3': [10, 10, 20, 20],
1131                     'child4': [10, 10, 30, 0],
1132                     'child5': [10, 10, 40, 0],
1133                     'child6': [10, 30, 50, 0],
1134                     'child7': [10, 30, 60, 0],
1135                     'child8': [10, 10, 0, 30],
1136                     'child9': [10, 10, 10, 40],
1137                     'child10': [10, 10, 20, 50],
1138                     'child11': [10, 10, 30, 30],
1139                     'child12': [10, 10, 40, 30],
1140                     'child13': [10, 30, 50, 30],
1141                     'child14': [10, 30, 60, 30],
1142                 },
1143             },
1144         },
1145         'row-reverse': {
1146             'ltr': {
1147                 'wrap': {
1148                     'flexbox': [60, 70],
1149                     'child1': [10, 10, 0, 60],
1150                     'child2': [10, 10, 10, 50],
1151                     'child3': [10, 10, 20, 40],
1152                     'child4': [10, 10, 5, 30],
1153                     'child5': [10, 10, 5, 20],
1154                     'child6': [30, 10, 0, 10],
1155                     'child7': [30, 10, 0, 0],
1156                     'child8': [10, 10, 30, 60],
1157                     'child9': [10, 10, 40, 50],
1158                     'child10': [10, 10, 50, 40],
1159                     'child11': [10, 10, 35, 30],
1160                     'child12': [10, 10, 35, 20],
1161                     'child13': [30, 10, 30, 10],
1162                     'child14': [30, 10, 30, 0],
1163                 },
1164                 'wrap-reverse': {
1165                     'flexbox': [60, 70],
1166                     'child1': [10, 10, 50, 60],
1167                     'child2': [10, 10, 40, 50],
1168                     'child3': [10, 10, 30, 40],
1169                     'child4': [10, 10, 50, 30],
1170                     'child5': [10, 10, 50, 20],
1171                     'child6': [30, 10, 30, 10],
1172                     'child7': [30, 10, 30, 0],
1173                     'child8': [10, 10, 20, 60],
1174                     'child9': [10, 10, 10, 50],
1175                     'child10': [10, 10, 0, 40],
1176                     'child11': [10, 10, 20, 30],
1177                     'child12': [10, 10, 20, 20],
1178                     'child13': [30, 10, 0, 10],
1179                     'child14': [30, 10, 0, 0],
1180                 },
1181             },
1182             'rtl': {
1183                 'wrap': {
1184                     'flexbox': [60, 70],
1185                     'child1': [10, 10, 0, 0],
1186                     'child2': [10, 10, 10, 10],
1187                     'child3': [10, 10, 20, 20],
1188                     'child4': [10, 10, 5, 30],
1189                     'child5': [10, 10, 5, 40],
1190                     'child6': [30, 10, 0, 50],
1191                     'child7': [30, 10, 0, 60],
1192                     'child8': [10, 10, 30, 0],
1193                     'child9': [10, 10, 40, 10],
1194                     'child10': [10, 10, 50, 20],
1195                     'child11': [10, 10, 35, 30],
1196                     'child12': [10, 10, 35, 40],
1197                     'child13': [30, 10, 30, 50],
1198                     'child14': [30, 10, 30, 60],
1199                 },
1200                 'wrap-reverse': {
1201                     'flexbox': [60, 70],
1202                     'child1': [10, 10, 50, 0],
1203                     'child2': [10, 10, 40, 10],
1204                     'child3': [10, 10, 30, 20],
1205                     'child4': [10, 10, 50, 30],
1206                     'child5': [10, 10, 50, 40],
1207                     'child6': [30, 10, 30, 50],
1208                     'child7': [30, 10, 30, 60],
1209                     'child8': [10, 10, 20, 0],
1210                     'child9': [10, 10, 10, 10],
1211                     'child10': [10, 10, 0, 20],
1212                     'child11': [10, 10, 20, 30],
1213                     'child12': [10, 10, 20, 40],
1214                     'child13': [30, 10, 0, 50],
1215                     'child14': [30, 10, 0, 60],
1216                 },
1217             },
1218         },
1219         'column-reverse': {
1220             'ltr': {
1221                 'wrap': {
1222                     'flexbox': [70, 60],
1223                     'child1': [10, 10, 60, 0],
1224                     'child2': [10, 10, 50, 10],
1225                     'child3': [10, 10, 40, 20],
1226                     'child4': [10, 10, 30, 5],
1227                     'child5': [10, 10, 20, 5],
1228                     'child6': [10, 30, 10, 0],
1229                     'child7': [10, 30, 0, 0],
1230                     'child8': [10, 10, 60, 30],
1231                     'child9': [10, 10, 50, 40],
1232                     'child10': [10, 10, 40, 50],
1233                     'child11': [10, 10, 30, 35],
1234                     'child12': [10, 10, 20, 35],
1235                     'child13': [10, 30, 10, 30],
1236                     'child14': [10, 30, 0, 30],
1237                 },
1238                 'wrap-reverse': {
1239                     'flexbox': [70, 60],
1240                     'child1': [10, 10, 60, 50],
1241                     'child2': [10, 10, 50, 40],
1242                     'child3': [10, 10, 40, 30],
1243                     'child4': [10, 10, 30, 50],
1244                     'child5': [10, 10, 20, 50],
1245                     'child6': [10, 30, 10, 30],
1246                     'child7': [10, 30, 0, 30],
1247                     'child8': [10, 10, 60, 20],
1248                     'child9': [10, 10, 50, 10],
1249                     'child10': [10, 10, 40, 0],
1250                     'child11': [10, 10, 30, 20],
1251                     'child12': [10, 10, 20, 20],
1252                     'child13': [10, 30, 10, 0],
1253                     'child14': [10, 30, 0, 0],
1254                 },
1255             },
1256             'rtl': {
1257                 'wrap': {
1258                     'flexbox': [70, 60],
1259                     'child1': [10, 10, 60, 50],
1260                     'child2': [10, 10, 50, 40],
1261                     'child3': [10, 10, 40, 30],
1262                     'child4': [10, 10, 30, 45],
1263                     'child5': [10, 10, 20, 45],
1264                     'child6': [10, 30, 10, 30],
1265                     'child7': [10, 30, 0, 30],
1266                     'child8': [10, 10, 60, 20],
1267                     'child9': [10, 10, 50, 10],
1268                     'child10': [10, 10, 40, 0],
1269                     'child11': [10, 10, 30, 15],
1270                     'child12': [10, 10, 20, 15],
1271                     'child13': [10, 30, 10, 0],
1272                     'child14': [10, 30, 0, 0],
1273                 },
1274                 'wrap-reverse': {
1275                     'flexbox': [70, 60],
1276                     'child1': [10, 10, 60, 0],
1277                     'child2': [10, 10, 50, 10],
1278                     'child3': [10, 10, 40, 20],
1279                     'child4': [10, 10, 30, 0],
1280                     'child5': [10, 10, 20, 0],
1281                     'child6': [10, 30, 10, 0],
1282                     'child7': [10, 30, 0, 0],
1283                     'child8': [10, 10, 60, 30],
1284                     'child9': [10, 10, 50, 40],
1285                     'child10': [10, 10, 40, 50],
1286                     'child11': [10, 10, 30, 30],
1287                     'child12': [10, 10, 20, 30],
1288                     'child13': [10, 30, 10, 30],
1289                     'child14': [10, 30, 0, 30],
1290                 },
1291             },
1292         },
1293     },
1294 };
1295
1296 function mainAxisDirection(writingMode, flexDirection)
1297 {
1298     if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1)
1299         || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1))
1300         return 'width';
1301     return 'height';
1302 }
1303
1304 function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength, alignment, expectations)
1305 {
1306     var child = document.createElement('div');
1307     child.setAttribute('style', mainAxis + ': -webkit-flex(1 ' + preferredSize + 'px);'
1308         + crossAxis + ': ' + crossAxisLength + ';'
1309         + '-webkit-flex-item-align: ' + alignment);
1310
1311     child.setAttribute("data-expected-width", expectations[0]);
1312     child.setAttribute("data-expected-height", expectations[1]);
1313     child.setAttribute("data-offset-x", expectations[2]);
1314     child.setAttribute("data-offset-y", expectations[3]);
1315
1316     flexbox.appendChild(child);
1317 }
1318
1319 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
1320 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
1321 var directions = ['ltr', 'rtl'];
1322 var wraps = ['wrap', 'wrap-reverse'];
1323
1324 writingModes.forEach(function(writingMode) {
1325     flexDirections.forEach(function(flexDirection) {
1326         directions.forEach(function(direction) {
1327             wraps.forEach(function(wrap) {
1328                 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' ' + wrap;
1329                 var title = document.createElement('div');
1330                 title.className = 'title';
1331                 title.innerHTML = flexboxClassName;
1332                 document.body.appendChild(title);
1333
1334                 var mainAxis = mainAxisDirection(writingMode, flexDirection);
1335                 var crossAxis = (mainAxis == 'width') ? 'height' : 'width';
1336
1337                 var flexbox = document.createElement('div');
1338                 flexbox.className = 'flexbox ' + flexboxClassName;
1339                 flexbox.setAttribute('style', mainAxis + ': 70px');
1340
1341                 var baselineMargin = (flexDirection.indexOf('row') != -1) ? '-webkit-margin-before: 5px;' : '-webkit-margin-start: 5px;';
1342
1343                 var testExpectations = expectations[writingMode][flexDirection][direction][wrap];
1344                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'start', testExpectations['child1']);
1345                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'center', testExpectations['child2']);
1346                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'end', testExpectations['child3']);
1347                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline', testExpectations['child4']);
1348                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline; ' + baselineMargin, testExpectations['child5']);
1349                 addChild(flexbox, mainAxis, crossAxis, 10, 'auto', 'stretch', testExpectations['child6']);
1350                 addChild(flexbox, mainAxis, crossAxis, 10, '30px', 'start', testExpectations['child7']);
1351
1352                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'start', testExpectations['child8']);
1353                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'center', testExpectations['child9']);
1354                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'end', testExpectations['child10']);
1355                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline', testExpectations['child11']);
1356                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline; ' + baselineMargin, testExpectations['child12']);
1357                 addChild(flexbox, mainAxis, crossAxis, 10, 'auto', 'stretch', testExpectations['child13']);
1358                 addChild(flexbox, mainAxis, crossAxis, 10, '30px', 'start', testExpectations['child14']);
1359
1360                 flexbox.setAttribute("data-expected-width", testExpectations.flexbox[0]);
1361                 flexbox.setAttribute("data-expected-height", testExpectations.flexbox[1]);
1362
1363                 document.body.appendChild(flexbox);
1364             })
1365         })
1366     })
1367 })
1368 </script>
1369 </body>
1370 </html>