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