Need to implement flex-flow: row-reverse
[WebKit-https.git] / LayoutTests / css3 / flexbox / flex-flow-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-flexbox;
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 2px 17px 8px;
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: 13px;
63     -webkit-margin-after: 17px;
64     -webkit-margin-start: 8px;
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, 70, 118, 23],
104             row: [90, 20, 48, 23]
105         },
106         ltr : {
107             container: physicalContainerSize,
108             flexbox: physicalFlexBoxPosition,
109             column: [20, 70, 48, 23],
110             row: [90, 20, 48, 23]
111         }
112     },
113     'horizontal-bt': {
114         rtl: {
115             container: physicalContainerSize,
116             flexbox: physicalFlexBoxPosition,
117             column: [20, 70, 118, 23],
118             row: [90, 20, 48, 73]
119         },
120         ltr : {
121             container: physicalContainerSize,
122             flexbox: physicalFlexBoxPosition,
123             column: [20, 70, 48, 23],
124             row: [90, 20, 48, 73]
125         }
126     },
127     'vertical-lr': {
128         rtl: {
129             container: physicalContainerSize,
130             flexbox: physicalFlexBoxPosition,
131             column: [90, 20, 48, 73],
132             row: [20, 70, 48, 23]
133         },
134         ltr : {
135             container: physicalContainerSize,
136             flexbox: physicalFlexBoxPosition,
137             column: [90, 20, 48, 23],
138             row: [20, 70, 48, 23]
139         }
140     },
141     'vertical-rl': {
142         rtl: {
143             container: physicalContainerSize,
144             flexbox: physicalFlexBoxPosition,
145             column: [90, 20, 48, 73],
146             row: [20, 70, 118, 23]
147         },
148         ltr : {
149             container: physicalContainerSize,
150             flexbox: physicalFlexBoxPosition,
151             column: [90, 20, 48, 23],
152             row: [20, 70, 118, 23]
153         }
154     }
155 }
156
157 var logicalExpectations = {
158     'horizontal-tb': {
159         rtl: {
160             container: [160, 140],
161             flexbox: [20, 10],
162             column: [20, 70, 92, 23],
163             row: [90, 20, 22, 23]
164         },
165         ltr : {
166             container: [160, 140],
167             flexbox: [40, 10],
168             column: [20, 70, 48, 23],
169             row: [90, 20, 48, 23]
170         }
171     },
172     'horizontal-bt': {
173         rtl: {
174             container: [160, 140],
175             flexbox: [20, 30],
176             column: [20, 70, 92, 47],
177             row: [90, 20, 22, 97]
178         },
179         ltr : {
180             container: [160, 140],
181             flexbox: [40, 30],
182             column: [20, 70, 48, 47],
183             row: [90, 20, 48, 97]
184         }
185     },
186     'vertical-lr': {
187         rtl: {
188             container: [140, 160],
189             flexbox: [10, 20],
190             column: [70, 20, 23, 92],
191             row: [20, 90, 23, 22]
192         },
193         ltr : {
194             container: [140, 160],
195             flexbox: [10, 40],
196             column: [70, 20, 23, 48],
197             row: [20, 90, 23, 48]
198         }
199     },
200     'vertical-rl': {
201         rtl: {
202             container: [140, 160],
203             flexbox: [30, 20],
204             column: [70, 20, 47, 92],
205             row: [20, 90, 97, 22]
206         },
207         ltr : {
208             container: [140, 160],
209             flexbox: [30, 40],
210             column: [70, 20, 47, 48],
211             row: [20, 90, 97, 48]
212         }
213     }
214 }
215
216 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
217 // FIXME: Test column-reverse.
218 var flexFlows = ['row', 'column', 'row-reverse'];
219 var directions = ['rtl', 'ltr'];
220 var marginTypes = ['physical', 'logical'];
221
222 writingModes.forEach(function(writingMode) {
223     flexFlows.forEach(function(flexFlow) {
224         directions.forEach(function(direction) {
225             marginTypes.forEach(function(marginType) {
226                 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow + ' ' + marginType;
227                 var title = document.createElement('div');
228                 title.className = 'title';
229                 title.innerHTML = flexboxClassName;
230                 document.body.appendChild(title);
231                 
232                 var expectations = (marginType == 'physical') ? physicalExpectations : logicalExpectations;
233                 expectations = expectations[writingMode][direction];
234                 var flexboxExpectations = positionAsString(expectations.flexbox);
235
236                 var flexItemExpectations = asString(expectations[flexFlow.replace("-reverse", "")]);
237
238                 var container = document.createElement('div');
239                 container.className = 'container';
240                 container.setAttribute('data-expected-width', expectations.container[0]);
241                 container.setAttribute('data-expected-height', expectations.container[1]);
242
243                 container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" ' + flexboxExpectations + '>\n' +
244                     '<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" ' + flexItemExpectations + '></div>\n' +
245                 '</div>';
246
247                 document.body.appendChild(container);   
248             })
249         })
250     })
251 })
252 </script>
253 </body>
254 </html>