1eba81300ef9b2e7fdb10e2c72691653889bf2dd
[WebKit-https.git] / LayoutTests / css3 / flexbox / flex-flow-padding.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 }
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     padding: 10px 20px 30px 40px;
51 }
52 .physical > div {
53     padding: 13px 2px 17px 8px;
54 }
55 .logical {
56     -webkit-padding-before: 10px;
57     -webkit-padding-after: 30px;
58     -webkit-padding-start: 40px;
59     -webkit-padding-end: 20px;
60 }
61 .logical > div {
62     -webkit-padding-before: 13px;
63     -webkit-padding-after: 17px;
64     -webkit-padding-start: 8px;
65     -webkit-padding-end: 2px;
66 }
67 .flexbox > :nth-child(1) {
68     background-color: blue;
69 }
70 .flexbox > div > div {
71     background-color: green;
72 }
73 </style>
74 <script>
75 if (window.layoutTestController)
76     layoutTestController.dumpAsText();
77 </script>
78 <script src="resources/flexbox.js"></script>
79 <body onload="checkFlexBoxen()">
80
81 <script>
82 function positionAsString(position)
83 {
84     return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"';
85 }
86
87 function asString(expectations)
88 {
89     return 'data-expected-width="' + expectations[0] + '" data-expected-height="' + expectations[1] + '" ' + positionAsString(expectations.slice(2, 4));
90 }
91
92 var horizontalContainerSize = [160, 140];
93 var verticalContainerSize = [140, 160];
94
95 var physicalExpectations = {
96     'horizontal-tb': {
97         rtl: {
98             containersize: horizontalContainerSize,
99             flexitemcolumn: [30, 100, 110, 10],
100             flexitemrow: [100, 50, 40, 10],
101             childcolumn: [20, 20, 118, 23],
102             childrow: [90, 20, 48, 23]
103         },
104         ltr : {
105             containersize: horizontalContainerSize,
106             flexitemcolumn: [30, 100, 40, 10],
107             flexitemrow: [100, 50, 40, 10],
108             childcolumn: [20, 20, 48, 23],
109             childrow: [90, 20, 48, 23]
110         }
111     },
112     'horizontal-bt': {
113         rtl: {
114             containersize: horizontalContainerSize,
115             flexitemcolumn: [30, 100, 110, 10],
116             flexitemrow: [100, 50, 40, 60],
117             childcolumn: [20, 20, 118, 73],
118             childrow: [90, 20, 48, 73]
119         },
120         ltr : {
121             containersize: horizontalContainerSize,
122             flexitemcolumn: [30, 100, 40, 10],
123             flexitemrow: [100, 50, 40, 60],
124             childcolumn: [20, 20, 48, 73],
125             childrow: [90, 20, 48, 73]
126         }
127     },
128     'vertical-lr': {
129         rtl: {
130             containersize: horizontalContainerSize,
131             flexitemcolumn: [100, 50, 40, 60],
132             flexitemrow: [30, 100, 40, 10],
133             childcolumn: [20, 20, 48, 73],
134             childrow: [20, 70, 48, 23]
135         },
136         ltr : {
137             containersize: horizontalContainerSize,
138             flexitemcolumn: [100, 50, 40, 10],
139             flexitemrow: [30, 100, 40, 10],
140             childcolumn: [20, 20, 48, 23],
141             childrow: [20, 70, 48, 23]
142         }
143     },
144     'vertical-rl': {
145         rtl: {
146             containersize: horizontalContainerSize,
147             flexitemcolumn: [100, 50, 40, 60],
148             flexitemrow: [30, 100, 110, 10],
149             childcolumn: [20, 20, 118, 73],
150             childrow: [20, 70, 118, 23]
151         },
152         ltr : {
153             containersize: horizontalContainerSize,
154             flexitemcolumn: [100, 50, 40, 10],
155             flexitemrow: [30, 100, 110, 10],
156             childcolumn: [20, 20, 118, 23],
157             childrow: [20, 70, 118, 23]
158         }
159     }
160 }
161
162 var logicalExpectations = {
163     'horizontal-tb': {
164         rtl: {
165             containersize: horizontalContainerSize,
166             flexitemcolumn: [30, 100, 90, 10],
167             flexitemrow: [100, 50, 20, 10],
168             childcolumn: [20, 20, 92, 23],
169             childrow: [90, 20, 22, 23]
170         },
171         ltr : {
172             containersize: horizontalContainerSize,
173             flexitemcolumn: [30, 100, 40, 10],
174             flexitemrow: [100, 50, 40, 10],
175             childcolumn: [20, 20, 48, 23],
176             childrow: [90, 20, 48, 23]
177         }
178     },
179     'horizontal-bt': {
180         rtl: {
181             containersize: horizontalContainerSize,
182             flexitemcolumn: [30, 100, 90, 30],
183             flexitemrow: [100, 50, 20, 80],
184             childcolumn: [20, 20, 92, 97],
185             childrow: [90, 20, 22, 97]
186         },
187         ltr : {
188             containersize: horizontalContainerSize,
189             flexitemcolumn: [30, 100, 40, 30],
190             flexitemrow: [100, 50, 40, 80],
191             childcolumn: [20, 20, 48, 97],
192             childrow: [90, 20, 48, 97]
193         }
194     },
195     'vertical-lr': {
196         rtl: {
197             containersize: verticalContainerSize,
198             flexitemcolumn: [100, 30, 10, 90],
199             flexitemrow: [50, 100, 10, 20],
200             childcolumn: [20, 20, 23, 92],
201             childrow: [20, 90, 23, 22]
202         },
203         ltr : {
204             containersize: verticalContainerSize,
205             flexitemcolumn: [100, 30, 10, 40],
206             flexitemrow: [50, 100, 10, 40],
207             childcolumn: [20, 20, 23, 48],
208             childrow: [20, 90, 23, 48]
209         }
210     },
211     'vertical-rl': {
212         rtl: {
213             containersize: verticalContainerSize,
214             flexitemcolumn: [100, 30, 30, 90],
215             flexitemrow: [50, 100, 80, 20],
216             childcolumn: [20, 20, 97, 92],
217             childrow: [20, 90, 97, 22]
218         },
219         ltr : {
220             containersize: verticalContainerSize,
221             flexitemcolumn: [100, 30, 30, 40],
222             flexitemrow: [50, 100, 80, 40],
223             childcolumn: [20, 20, 97, 48],
224             childrow: [20, 90, 97, 48]
225         }
226     }
227 }
228
229 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
230 // FIXME: Test row-reverse and column-reverse.
231 var flexFlows = ['row', 'column'];
232 var directions = ['rtl', 'ltr'];
233 var marginTypes = ['physical', 'logical'];
234
235 writingModes.forEach(function(writingMode) {
236     flexFlows.forEach(function(flexFlow) {
237         directions.forEach(function(direction) {
238             marginTypes.forEach(function(marginType) {
239                 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow + ' ' + marginType;
240                 var title = document.createElement('div');
241                 title.className = 'title';
242                 title.innerHTML = flexboxClassName;
243                 document.body.appendChild(title);
244
245                 var expectations = (marginType == 'physical') ? physicalExpectations : logicalExpectations;
246                 expectations = expectations[writingMode][direction];
247
248                 var container = document.createElement('div');
249                 container.className = 'container';
250                 container.setAttribute('data-expected-width', expectations.containersize[0]);
251                 container.setAttribute('data-expected-height', expectations.containersize[1]);
252
253                 // FIXME: In flex-flow column the innermost diff is always 20x20. Is that correct?
254                 container.innerHTML = '\n<div class="flexbox ' + flexboxClassName + '">\n' +
255                     '<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" ' + asString(expectations['flexitem' + flexFlow]) + '>\n' +
256                         '<div style="width:100%; height:100%" ' + asString(expectations['child' + flexFlow]) + '></div>' +
257                     '</div>\n' +
258                 '</div>\n';
259
260                 document.body.appendChild(container);   
261             })
262         })
263     })
264 })
265 </script>
266 </body>
267 </html>