Implement absolutely positioned flex items
[WebKit-https.git] / LayoutTests / css3 / flexbox / position-absolute-child.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 body {
5     margin: 0;
6 }
7
8 .title {
9     margin-top: 1em;
10 }
11
12 .flexbox {
13     display: -webkit-flex;
14     background-color: #aaa;
15     position: relative;
16 }
17 .flexbox div {
18     border: 0;
19     -webkit-flex: none;
20 }
21
22 .horizontal-tb {
23     -webkit-writing-mode: horizontal-tb;
24 }
25 .horizontal-bt {
26     -webkit-writing-mode: horizontal-bt;
27 }
28 .vertical-rl {
29     -webkit-writing-mode: vertical-rl;
30 }
31 .vertical-lr {
32     -webkit-writing-mode: vertical-lr;
33 }
34
35 .row {
36     -webkit-flex-flow: row;
37 }
38 .row-reverse {
39     -webkit-flex-flow: row-reverse;
40 }
41 .column {
42     -webkit-flex-flow: column;
43 }
44 .column-reverse {
45     -webkit-flex-flow: column-reverse;
46 }
47
48 .flexbox :nth-child(1) {
49     background-color: blue;
50 }
51 .flexbox :nth-child(2) {
52     background-color: green;
53 }
54 .flexbox :nth-child(3) {
55     background-color: red;
56 }
57
58 .rtl {
59     direction: rtl;
60 }
61 .ltr {
62     direction: ltr;
63 }
64
65 </style>
66 <script>
67 if (window.testRunner)
68     testRunner.dumpAsText();
69 </script>
70 <script src="../../resources/check-layout.js"></script>
71 <body onload="checkLayout('.flexbox')">
72
73 <script>
74 function getFlexDirection(flexFlow, writingMode)
75 {
76     if (writingMode.indexOf('horizontal') != -1)
77         return (flexFlow.indexOf('row') != -1) ? 'width' : 'height';
78     return (flexFlow.indexOf('row') != -1) ? 'height' : 'width';
79 }
80
81 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
82 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
83 var directions = ['ltr', 'rtl'];
84
85 var expectations = {
86     'horizontal-tb': {
87         row: {
88             ltr: [
89                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
90                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
91                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
92                 { offsets: [0, 0, 560] },
93                 { offsets: [0, 560, 560] },
94                 { offsets: [0, 560, 600] },
95                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
96                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
97                 { offsets: [10, 50, 90], crossAxisOffset: 0 },
98             ],
99             rtl: [
100                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
101                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
102                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
103                 { offsets: [580, 560, 0] },
104                 { offsets: [560, 20, 0] },
105                 { offsets: [560, 0, -20] },
106                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
107                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
108                 { offsets: [50, 10, -30], crossAxisOffset: 0 },
109             ],
110         },
111         column: {
112             ltr: [
113                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
114                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
115                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
116                 { offsets: [0, 0, 80] },
117                 { offsets: [0, 80, 80] },
118                 { offsets: [0, 80, 120] },
119                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
120                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
121                 { offsets: [10, 50, 90], crossAxisOffset: 0 },
122             ],
123             rtl: [
124                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
125                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
126                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
127                 { offsets: [0, 0, 80] },
128                 { offsets: [0, 80, 80] },
129                 { offsets: [0, 80, 120] },
130                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
131                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
132                 { offsets: [10, 50, 90], crossAxisOffset: 60 },
133             ],
134         },
135         'row-reverse': {
136             ltr: [
137                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
138                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
139                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
140                 { offsets: [600, 560, 0] },
141                 { offsets: [560, 40, 0] },
142                 { offsets: [560, 0, 0] },
143                 { offsets: [90, 50, 10], crossAxisOffset: 0 },
144                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
145                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
146             ],
147             rtl: [
148                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
149                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
150                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
151                 { offsets: [-20, 0, 560] },
152                 { offsets: [0, 540, 560] },
153                 { offsets: [0, 560, 580] },
154                 { offsets: [-30, 10, 50], crossAxisOffset: 0 },
155                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
156                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
157             ],
158         },
159         'column-reverse': {
160             ltr: [
161                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
162                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
163                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
164                 { offsets: [120, 80, 0] },
165                 { offsets: [80, 40, 0] },
166                 { offsets: [80, 0, 0] },
167                 { offsets: [90, 50, 10], crossAxisOffset: 0 },
168                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
169                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
170             ],
171             rtl: [
172                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
173                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
174                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
175                 { offsets: [120, 80, 0] },
176                 { offsets: [80, 40, 0] },
177                 { offsets: [80, 0, 0] },
178                 { offsets: [90, 50, 10], crossAxisOffset: 60 },
179                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
180                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
181             ],
182         },
183     },
184     'horizontal-bt': {
185         // This matches the horizontal-tb values above.
186         row: {
187             ltr: [
188                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
189                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
190                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
191                 { offsets: [0, 0, 560] },
192                 { offsets: [0, 560, 560] },
193                 { offsets: [0, 560, 600] },
194                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
195                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
196                 { offsets: [10, 50, 90], crossAxisOffset: 60 },
197             ],
198             rtl: [
199                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
200                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
201                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
202                 { offsets: [580, 560, 0] },
203                 { offsets: [560, 20, 0] },
204                 { offsets: [560, 0, -20] },
205                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
206                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
207                 { offsets: [50, 10, -30], crossAxisOffset: 60 },
208             ],
209         },
210         // horizontal-bt flips the main axis direction so the offsets are different from horizontal-tb.
211         column: {
212             ltr: [
213                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
214                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
215                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
216                 { offsets: [100, 80, 0] },
217                 { offsets: [80, 20, 0] },
218                 { offsets: [80, 0, -20] },
219                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
220                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
221                 { offsets: [50, 10, -30], crossAxisOffset: 0 },
222             ],
223             rtl: [
224                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
225                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
226                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
227                 { offsets: [100, 80, 0] },
228                 { offsets: [80, 20, 0] },
229                 { offsets: [80, 0, -20] },
230                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
231                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
232                 { offsets: [50, 10, -30], crossAxisOffset: 60 },
233             ],
234         },
235         'row-reverse': {
236             ltr: [
237                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
238                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
239                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
240                 { offsets: [600, 560, 0] },
241                 { offsets: [560, 40, 0] },
242                 { offsets: [560, 0, 0] },
243                 { offsets: [90, 50, 10], crossAxisOffset: 60 },
244                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
245                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
246             ],
247             rtl: [
248                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
249                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
250                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
251                 { offsets: [-20, 0, 560] },
252                 { offsets: [0, 540, 560] },
253                 { offsets: [0, 560, 580] },
254                 { offsets: [-30, 10, 50], crossAxisOffset: 60 },
255                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
256                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
257             ],
258         },
259         'column-reverse': {
260             ltr: [
261                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
262                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
263                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
264                 { offsets: [-20, 0, 80] },
265                 { offsets: [0, 60, 80] },
266                 { offsets: [0, 80, 100] },
267                 { offsets: [-30, 10, 50], crossAxisOffset: 0 },
268                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
269                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
270             ],
271             rtl: [
272                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
273                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
274                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
275                 { offsets: [-20, 0, 80] },
276                 { offsets: [0, 60, 80] },
277                 { offsets: [0, 80, 100] },
278                 { offsets: [-30, 10, 50], crossAxisOffset: 60 },
279                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
280                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
281             ],
282         },
283     },
284     'vertical-rl': {
285         row: {
286             // The same as horizontal-tb + column.
287             ltr: [
288                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
289                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
290                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
291                 { offsets: [0, 0, 80] },
292                 { offsets: [0, 80, 80] },
293                 { offsets: [0, 80, 120] },
294                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
295                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
296                 { offsets: [10, 50, 90], crossAxisOffset: 60 },
297             ],
298             rtl: [
299                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
300                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
301                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
302                 { offsets: [100, 80, 0] },
303                 { offsets: [80, 20, 0] },
304                 { offsets: [80, 0, -20] },
305                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
306                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
307                 { offsets: [50, 10, -30], crossAxisOffset: 60 },
308             ],
309         },
310         column: {
311             // The same as horizontal-tb + row.
312             ltr: [
313                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
314                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
315                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
316                 { offsets: [580, 560, 0] },
317                 { offsets: [560, 20, 0] },
318                 { offsets: [560, 0, -20] },
319                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
320                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
321                 { offsets: [50, 10, -30], crossAxisOffset: 0 },
322             ],
323             rtl: [
324                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
325                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
326                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
327                 { offsets: [580, 560, 0] },
328                 { offsets: [560, 20, 0] },
329                 { offsets: [560, 0, -20] },
330                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
331                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
332                 { offsets: [50, 10, -30], crossAxisOffset: 60 },
333             ],
334         },
335         'row-reverse': {
336             ltr: [
337                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
338                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
339                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
340                 { offsets: [120, 80, 0] },
341                 { offsets: [80, 40, 0] },
342                 { offsets: [80, 0, 0] },
343                 { offsets: [90, 50, 10], crossAxisOffset: 60 },
344                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
345                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
346             ],
347             rtl: [
348                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
349                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
350                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
351                 { offsets: [-20, 0, 80] },
352                 { offsets: [0, 60, 80] },
353                 { offsets: [0, 80, 100] },
354                 { offsets: [-30, 10, 50], crossAxisOffset: 60 },
355                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
356                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
357             ],
358         },
359         'column-reverse': {
360             ltr: [
361                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
362                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
363                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
364                 { offsets: [-20, 0, 560] },
365                 { offsets: [0, 540, 560] },
366                 { offsets: [0, 560, 580] },
367                 { offsets: [-30, 10, 50], crossAxisOffset: 0 },
368                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
369                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
370             ],
371             rtl: [
372                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
373                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
374                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
375                 { offsets: [-20, 0, 560] },
376                 { offsets: [0, 540, 560] },
377                 { offsets: [0, 560, 580] },
378                 { offsets: [-30, 10, 50], crossAxisOffset: 60 },
379                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
380                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
381             ],
382         }
383     },
384     'vertical-lr': {
385         row: {
386             // The same as horizontal-tb + column.
387             ltr: [
388                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
389                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
390                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
391                 { offsets: [0, 0, 80] },
392                 { offsets: [0, 80, 80] },
393                 { offsets: [0, 80, 120] },
394                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
395                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
396                 { offsets: [10, 50, 90], crossAxisOffset: 0 },
397             ],
398             rtl: [
399                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
400                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
401                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
402                 { offsets: [100, 80, 0] },
403                 { offsets: [80, 20, 0] },
404                 { offsets: [80, 0, -20] },
405                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
406                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
407                 { offsets: [50, 10, -30], crossAxisOffset: 0 },
408             ],
409         },
410         column: {
411             // The same as horizontal-bt + row.
412             ltr: [
413                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
414                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
415                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
416                 { offsets: [0, 0, 560] },
417                 { offsets: [0, 560, 560] },
418                 { offsets: [0, 560, 600] },
419                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
420                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
421                 { offsets: [10, 50, 90], crossAxisOffset: 0 },
422             ],
423             rtl: [
424                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
425                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
426                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
427                 { offsets: [0, 0, 560] },
428                 { offsets: [0, 560, 560] },
429                 { offsets: [0, 560, 600] },
430                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
431                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
432                 { offsets: [10, 50, 90], crossAxisOffset: 60 },
433             ],
434         },
435         'row-reverse': {
436             ltr: [
437                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
438                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
439                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
440                 { offsets: [120, 80, 0] },
441                 { offsets: [80, 40, 0] },
442                 { offsets: [80, 0, 0] },
443                 { offsets: [90, 50, 10], crossAxisOffset: 0 },
444                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
445                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
446             ],
447             rtl: [
448                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
449                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
450                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
451                 { offsets: [-20, 0, 80] },
452                 { offsets: [0, 60, 80] },
453                 { offsets: [0, 80, 100] },
454                 { offsets: [-30, 10, 50], crossAxisOffset: 0 },
455                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
456                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
457             ],
458         },
459         'column-reverse': {
460             ltr: [
461                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
462                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
463                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
464                 { offsets: [600, 560, 0] },
465                 { offsets: [560, 40, 0] },
466                 { offsets: [560, 0, 0] },
467                 { offsets: [90, 50, 10], crossAxisOffset: 0 },
468                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
469                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
470             ],
471             rtl: [
472                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
473                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
474                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
475                 { offsets: [600, 560, 0] },
476                 { offsets: [560, 40, 0] },
477                 { offsets: [560, 0, 0] },
478                 { offsets: [90, 50, 10], crossAxisOffset: 60 },
479                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
480                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
481             ],
482         },
483     }
484 };
485
486 function setFlexboxSize(flexbox, flexDirection)
487 {
488     if ('width' == flexDirection) {
489         flexbox.style.width = '600px';
490     } else {
491         flexbox.style.width = '100px';
492         flexbox.style.height = '120px';
493     }
494 }
495
496 function addJustifyContentSpaceBetweenTests(writingMode, flexFlow, direction, flexDirection)
497 {
498     var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
499     for (var absoluteIndex = 1; absoluteIndex <= 3; ++absoluteIndex) {
500         var expected = expectations[writingMode][flexFlow][direction][2 + absoluteIndex];
501
502         // Absolute div is 20px, other divs should be 40px.
503         expected.sizes = [40, 40, 40];
504         expected.sizes[absoluteIndex - 1] = 20;
505
506         var flexbox = document.createElement('div');
507         flexbox.className = 'flexbox ' + flexboxClassName;
508         setFlexboxSize(flexbox, flexDirection);
509         flexbox.style.webkitJustifyContent = 'space-between';
510         for (var childIndex = 1; childIndex <= 3; ++childIndex) {
511             var child = document.createElement('div');
512             child.style[flexDirection] = '40px';
513             if (absoluteIndex == childIndex) {
514                 child.style.position = 'absolute';
515                 child.style[flexDirection] = '20px';
516                 if ('height' == flexDirection)
517                     child.style.width = '100px';
518             }
519
520             if ('width' == flexDirection)
521                 child.style.height = '20px';
522
523             child.setAttribute('data-offset-' + (flexDirection == 'width' ? 'x' : 'y'), expected.offsets[childIndex - 1]);
524             child.setAttribute('data-expected-' + flexDirection, expected.sizes[childIndex - 1]);
525             flexbox.appendChild(child);
526         }
527
528         document.body.appendChild(flexbox);
529     }
530 }
531
532 function addAlignItemsCenterTests(writingMode, flexFlow, direction, flexDirection)
533 {
534     var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
535     for (var absoluteIndex = 1; absoluteIndex <= 3; ++absoluteIndex) {
536         var expected = expectations[writingMode][flexFlow][direction][5 + absoluteIndex];
537
538         var flexbox = document.createElement('div');
539         flexbox.className = 'flexbox ' + flexboxClassName;
540         flexbox.style.height = '100px';
541         flexbox.style.width = '100px';
542         flexbox.style.margin = "20px";
543         flexbox.style.webkitJustifyContent = 'center';
544         flexbox.style.webkitAlignItems = 'center';
545
546         for (var childIndex = 1; childIndex <= 3; ++childIndex) {
547             var child = document.createElement('div');
548             if (absoluteIndex == childIndex) {
549                 child.style.position = 'absolute';
550                 child.style.outline = "2px solid yellow";
551             }
552             child.style.width = '40px';
553             child.style.height = '40px';
554
555             child.setAttribute('data-offset-' + (flexDirection == 'width' ? 'x' : 'y'), expected.offsets[childIndex - 1]);
556             var expectedCrossAxisOffset = (absoluteIndex == childIndex) ? expected.crossAxisOffset : 30;
557             child.setAttribute('data-offset-' + (flexDirection == 'width' ? 'y' : 'x'), expectedCrossAxisOffset);
558             flexbox.appendChild(child);
559         }
560
561         document.body.appendChild(flexbox);
562     }
563 }
564
565 writingModes.forEach(function(writingMode) {
566     flexFlows.forEach(function(flexFlow) {
567         directions.forEach(function(direction) {
568             var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
569             var title = document.createElement('div');
570             title.className = 'title';
571             title.innerHTML = flexboxClassName;
572             document.body.appendChild(title);
573
574             var flexDirection = getFlexDirection(flexFlow, writingMode);
575             for (var absoluteIndex = 1; absoluteIndex <= 3; ++absoluteIndex) {
576                 var expected = expectations[writingMode][flexFlow][direction][absoluteIndex - 1];
577
578                 var flexbox = document.createElement('div');
579                 flexbox.className = 'flexbox ' + flexboxClassName;
580                 setFlexboxSize(flexbox, flexDirection);
581                 for (var childIndex = 1; childIndex <= 3; ++childIndex) {
582                     var child = document.createElement('div');
583                     child.style.webkitFlex = childIndex;
584                     if (childIndex == absoluteIndex)
585                         child.style.position = 'absolute';
586
587                     if ('width' == flexDirection)
588                         child.style.height = '20px';
589
590                     child.setAttribute('data-offset-' + (flexDirection == 'width' ? 'x' : 'y'), expected.offsets[childIndex - 1]);
591                     child.setAttribute('data-expected-' + flexDirection, expected.sizes[childIndex - 1]);
592                     flexbox.appendChild(child);
593                 }
594
595                 document.body.appendChild(flexbox);
596             }
597             addJustifyContentSpaceBetweenTests(writingMode, flexFlow, direction, flexDirection);
598             addAlignItemsCenterTests(writingMode, flexFlow, direction, flexDirection);
599         })
600     })
601 })
602
603 </script>
604
605 </body>
606 </html>