auto margins on flexbox should allocate space in the cross direction
[WebKit-https.git] / LayoutTests / css3 / flexbox / flex-flow-auto-margins.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .container {
5     position: relative;
6     background-color: pink;
7     outline: 1px solid black;
8     display: inline-block;
9 }
10 .flexbox {
11     display: -webkit-flex;
12     background-color: grey;
13     width: 100px;
14     height: 100px;
15 }
16 .title {
17     margin-top: 1em;
18 }
19 .ltr {
20     direction: ltr;
21 }
22 .rtl {
23     direction: rtl;
24 }
25 .horizontal-tb {
26     -webkit-writing-mode: horizontal-tb;
27 }
28 .horizontal-bt {
29     -webkit-writing-mode: horizontal-bt;
30 }
31 .vertical-rl {
32     -webkit-writing-mode: vertical-rl;
33 }
34 .vertical-lr {
35     -webkit-writing-mode: vertical-lr;
36 }
37 .row {
38     -webkit-flex-flow: row;
39 }
40 .row-reverse {
41     -webkit-flex-flow: row-reverse;
42 }
43 .column {
44     -webkit-flex-flow: column;
45 }
46 .column-reverse {
47     -webkit-flex-flow: column-reverse;
48 }
49 .physical {
50     margin: 10px 20px 30px 40px;
51 }
52 .physical > div {
53     margin: 13px auto 17px auto;
54 }
55 .logical {
56     -webkit-margin-before: 10px;
57     -webkit-margin-after: 30px;
58     -webkit-margin-start: 40px;
59     -webkit-margin-end: 20px;
60 }
61 .logical > div {
62     -webkit-margin-before: auto;
63     -webkit-margin-after: 17px;
64     -webkit-margin-start: auto;
65     -webkit-margin-end: 2px;
66 }
67 .flexbox > :nth-child(1) {
68     background-color: blue;
69 }
70 .flexbox > :nth-child(2) {
71     background-color: green;
72 }
73 .flexbox > :nth-child(3) {
74     background-color: red;
75 }
76 </style>
77 <script>
78 if (window.layoutTestController)
79     layoutTestController.dumpAsText();
80 </script>
81 <script src="resources/flexbox.js"></script>
82 <body onload="checkFlexBoxen()">
83
84 <script>
85 function positionAsString(position)
86 {
87     return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"';
88 }
89
90 function asString(expectations)
91 {
92     return 'data-expected-width="' + expectations[0] + '" data-expected-height="' + expectations[1] + '" ' + positionAsString(expectations.slice(2, 4));
93 }
94
95 var physicalContainerSize = [160, 140];
96 var physicalFlexBoxPosition = [40, 10];
97
98 var physicalExpectations = {
99     'horizontal-tb': {
100         rtl: {
101             container: physicalContainerSize,
102             flexbox: physicalFlexBoxPosition,
103             column: [20, 20, 80, 23],
104             row: [20, 20, 80, 23],
105             'column-reverse': [20, 20, 80, 23],
106             'row-reverse': [20, 20, 80, 23],
107         },
108         ltr : {
109             container: physicalContainerSize,
110             flexbox: physicalFlexBoxPosition,
111             column: [20, 20, 80, 23],
112             row: [20, 20, 80, 23],
113             'column-reverse': [20, 20, 80, 23],
114             'row-reverse': [20, 20, 80, 23],
115         }
116     },
117     'horizontal-bt': {
118         rtl: {
119             container: physicalContainerSize,
120             flexbox: physicalFlexBoxPosition,
121             column: [20, 20, 80, 73],
122             row: [20, 20, 80, 73],
123             'column-reverse': [20, 20, 80, 73],
124             'row-reverse': [20, 20, 80, 73],
125         },
126         ltr : {
127             container: physicalContainerSize,
128             flexbox: physicalFlexBoxPosition,
129             column: [20, 20, 80, 73],
130             row: [20, 20, 80, 73],
131             'column-reverse': [20, 20, 80, 73],
132             'row-reverse': [20, 20, 80, 73],
133         }
134     },
135     'vertical-lr': {
136         rtl: {
137             container: physicalContainerSize,
138             flexbox: physicalFlexBoxPosition,
139             column: [20, 20, 80, 73],
140             row: [20, 20, 80, 73],
141             'column-reverse': [20, 20, 40, 73],
142             'row-reverse': [20, 20, 80, 23],
143         },
144         ltr : {
145             container: physicalContainerSize,
146             flexbox: physicalFlexBoxPosition,
147             column: [20, 20, 80, 23],
148             row: [20, 20, 80, 23],
149             'column-reverse': [20, 20, 40, 23],
150             'row-reverse': [20, 20, 80, 73],
151         }
152     },
153     'vertical-rl': {
154         rtl: {
155             container: physicalContainerSize,
156             flexbox: physicalFlexBoxPosition,
157             column: [20, 20, 80, 73],
158             row: [20, 20, 80, 73],
159             'column-reverse': [20, 20, 48, 73],
160             'row-reverse': [20, 20, 80, 23],
161         },
162         ltr : {
163             container: physicalContainerSize,
164             flexbox: physicalFlexBoxPosition,
165             column: [20, 20, 80, 23],
166             row: [20, 20, 80, 23],
167             'column-reverse': [20, 20, 48, 23],
168             'row-reverse': [20, 20, 80, 73],
169         }
170     }
171 }
172
173 var logicalExpectations = {
174     'horizontal-tb': {
175         rtl: {
176             container: [160, 140],
177             flexbox: [20, 10],
178             column: [20, 20, 22, 73],
179             row: [20, 20, 22, 73],
180             'column-reverse': [20, 20, 92, 10],
181             'row-reverse': [20, 20, 22, 73],
182         },
183         ltr : {
184             container: [160, 140],
185             flexbox: [40, 10],
186             column: [20, 20, 118, 73],
187             row: [20, 20, 118, 73],
188             'column-reverse': [20, 20, 48, 10],
189             'row-reverse': [20, 20, 118, 73],
190         }
191     },
192     'horizontal-bt': {
193         rtl: {
194             container: [160, 140],
195             flexbox: [20, 30],
196             column: [20, 20, 22, 47],
197             row: [20, 20, 22, 110],
198             'column-reverse': [20, 20, 92, 47],
199             'row-reverse': [20, 20, 22, 110],
200         },
201         ltr : {
202             container: [160, 140],
203             flexbox: [40, 30],
204             column: [20, 20, 118, 47],
205             row: [20, 20, 118, 110],
206             'column-reverse': [20, 20, 48, 47],
207             'row-reverse': [20, 20, 118, 110],
208         }
209     },
210     'vertical-lr': {
211         rtl: {
212             container: [140, 160],
213             flexbox: [10, 20],
214             column: [20, 20, 73, 22],
215             row: [20, 20, 73, 22],
216             'column-reverse': [20, 20, 23, 92],
217             'row-reverse': [20, 20, 73, 22],
218         },
219         ltr : {
220             container: [140, 160],
221             flexbox: [10, 40],
222             column: [20, 20, 73, 118],
223             row: [20, 20, 73, 118],
224             'column-reverse': [20, 20, 23, 48],
225             'row-reverse': [20, 20, 73, 118],
226         }
227     },
228     'vertical-rl': {
229         rtl: {
230             container: [140, 160],
231             flexbox: [30, 20],
232             column: [20, 20, 47, 22],
233             row: [20, 20, 110, 22],
234             'column-reverse': [20, 20, 47, 92],
235             'row-reverse': [20, 20, 110, 22],
236         },
237         ltr : {
238             container: [140, 160],
239             flexbox: [30, 40],
240             column: [20, 20, 47, 118],
241             row: [20, 20, 110, 118],
242             'column-reverse': [20, 20, 47, 48],
243             'row-reverse': [20, 20, 110, 118],
244         }
245     }
246 }
247
248 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
249 var flexFlows = ['row', 'column', 'row-reverse', 'row-reverse'];
250 var directions = ['ltr', 'rtl'];
251 var marginTypes = ['physical', 'logical'];
252
253 marginTypes.forEach(function(marginType) {
254     writingModes.forEach(function(writingMode) {
255         flexFlows.forEach(function(flexFlow) {
256             directions.forEach(function(direction) {
257                 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow + ' ' + marginType;
258                 var title = document.createElement('div');
259                 title.className = 'title';
260                 title.innerHTML = flexboxClassName;
261                 document.body.appendChild(title);
262
263                 var expectations = (marginType == 'physical') ? physicalExpectations : logicalExpectations;
264                 expectations = expectations[writingMode][direction];
265                 var flexboxExpectations = positionAsString(expectations.flexbox);
266
267                 var flexItemExpectations = asString(expectations[flexFlow]);
268
269                 var container = document.createElement('div');
270                 container.className = 'container';
271                 container.setAttribute('data-expected-width', expectations.container[0]);
272                 container.setAttribute('data-expected-height', expectations.container[1]);
273
274                 container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" ' + flexboxExpectations + '>\n' +
275                     '<div style="height: 20px; width: 20px;" ' + flexItemExpectations + '></div>\n' +
276                 '</div>';
277
278                 document.body.appendChild(container);
279             })
280         })
281     })
282 })
283 </script>
284 </body>
285 </html>