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