6 background-color: pink;
7 outline: 1px solid red;
11 display: -webkit-flex;
12 background-color: grey;
26 -webkit-writing-mode: horizontal-tb;
29 -webkit-writing-mode: horizontal-bt;
32 -webkit-writing-mode: vertical-rl;
35 -webkit-writing-mode: vertical-lr;
38 -webkit-flex-flow: row;
41 -webkit-flex-flow: row-reverse;
44 -webkit-flex-flow: column;
47 -webkit-flex-flow: column-reverse;
50 padding: 10px 20px 30px 40px;
53 padding: 13px 2px 17px 8px;
56 -webkit-padding-before: 10px;
57 -webkit-padding-after: 30px;
58 -webkit-padding-start: 40px;
59 -webkit-padding-end: 20px;
62 -webkit-padding-before: 13px;
63 -webkit-padding-after: 17px;
64 -webkit-padding-start: 8px;
65 -webkit-padding-end: 2px;
67 .flexbox > :nth-child(1) {
68 background-color: blue;
70 .flexbox > div > div {
71 background-color: green;
74 <script src="../../resources/check-layout.js"></script>
75 <body onload="checkLayout('.flexbox')">
78 function positionAsString(position)
80 return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"';
83 function asString(expectations)
85 return 'data-expected-width="' + expectations[0] + '" data-expected-height="' + expectations[1] + '" ' + positionAsString(expectations.slice(2, 4));
88 var horizontalContainerSize = [160, 140];
89 var verticalContainerSize = [140, 160];
91 var physicalExpectations = {
94 containersize: horizontalContainerSize,
95 flexitemcolumn: [30, 100, 110, 10],
96 flexitemrow: [100, 50, 40, 10],
97 childcolumn: [20, 70, 118, 23],
98 childrow: [90, 20, 48, 23]
101 containersize: horizontalContainerSize,
102 flexitemcolumn: [30, 100, 40, 10],
103 flexitemrow: [100, 50, 40, 10],
104 childcolumn: [20, 70, 48, 23],
105 childrow: [90, 20, 48, 23]
110 containersize: horizontalContainerSize,
111 flexitemcolumn: [30, 100, 110, 10],
112 flexitemrow: [100, 50, 40, 60],
113 childcolumn: [20, 70, 118, 23],
114 childrow: [90, 20, 48, 73]
117 containersize: horizontalContainerSize,
118 flexitemcolumn: [30, 100, 40, 10],
119 flexitemrow: [100, 50, 40, 60],
120 childcolumn: [20, 70, 48, 23],
121 childrow: [90, 20, 48, 73]
126 containersize: horizontalContainerSize,
127 flexitemcolumn: [100, 50, 40, 60],
128 flexitemrow: [30, 100, 40, 10],
129 childcolumn: [90, 20, 48, 73],
130 childrow: [20, 70, 48, 23]
133 containersize: horizontalContainerSize,
134 flexitemcolumn: [100, 50, 40, 10],
135 flexitemrow: [30, 100, 40, 10],
136 childcolumn: [90, 20, 48, 23],
137 childrow: [20, 70, 48, 23]
142 containersize: horizontalContainerSize,
143 flexitemcolumn: [100, 50, 40, 60],
144 flexitemrow: [30, 100, 110, 10],
145 childcolumn: [90, 20, 48, 73],
146 childrow: [20, 70, 118, 23]
149 containersize: horizontalContainerSize,
150 flexitemcolumn: [100, 50, 40, 10],
151 flexitemrow: [30, 100, 110, 10],
152 childcolumn: [90, 20, 48, 23],
153 childrow: [20, 70, 118, 23]
158 var logicalExpectations = {
161 containersize: horizontalContainerSize,
162 flexitemcolumn: [30, 100, 90, 10],
163 flexitemrow: [100, 50, 20, 10],
164 childcolumn: [20, 70, 92, 23],
165 childrow: [90, 20, 22, 23]
168 containersize: horizontalContainerSize,
169 flexitemcolumn: [30, 100, 40, 10],
170 flexitemrow: [100, 50, 40, 10],
171 childcolumn: [20, 70, 48, 23],
172 childrow: [90, 20, 48, 23]
177 containersize: horizontalContainerSize,
178 flexitemcolumn: [30, 100, 90, 30],
179 flexitemrow: [100, 50, 20, 80],
180 childcolumn: [20, 70, 92, 47],
181 childrow: [90, 20, 22, 97]
184 containersize: horizontalContainerSize,
185 flexitemcolumn: [30, 100, 40, 30],
186 flexitemrow: [100, 50, 40, 80],
187 childcolumn: [20, 70, 48, 47],
188 childrow: [90, 20, 48, 97]
193 containersize: verticalContainerSize,
194 flexitemcolumn: [100, 30, 10, 90],
195 flexitemrow: [50, 100, 10, 20],
196 childcolumn: [70, 20, 23, 92],
197 childrow: [20, 90, 23, 22]
200 containersize: verticalContainerSize,
201 flexitemcolumn: [100, 30, 10, 40],
202 flexitemrow: [50, 100, 10, 40],
203 childcolumn: [70, 20, 23, 48],
204 childrow: [20, 90, 23, 48]
209 containersize: verticalContainerSize,
210 flexitemcolumn: [100, 30, 30, 90],
211 flexitemrow: [50, 100, 80, 20],
212 childcolumn: [70, 20, 47, 92],
213 childrow: [20, 90, 97, 22]
216 containersize: verticalContainerSize,
217 flexitemcolumn: [100, 30, 30, 40],
218 flexitemrow: [50, 100, 80, 40],
219 childcolumn: [70, 20, 47, 48],
220 childrow: [20, 90, 97, 48]
225 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
226 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
227 var directions = ['rtl', 'ltr'];
228 var marginTypes = ['physical', 'logical'];
230 writingModes.forEach(function(writingMode) {
231 flexFlows.forEach(function(flexFlow) {
232 directions.forEach(function(direction) {
233 marginTypes.forEach(function(marginType) {
234 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow + ' ' + marginType;
235 var title = document.createElement('div');
236 title.className = 'title';
237 title.innerHTML = flexboxClassName;
238 document.body.appendChild(title);
240 var expectations = (marginType == 'physical') ? physicalExpectations : logicalExpectations;
241 expectations = expectations[writingMode][direction];
243 var container = document.createElement('div');
244 container.className = 'container';
245 container.setAttribute('data-expected-width', expectations.containersize[0]);
246 container.setAttribute('data-expected-height', expectations.containersize[1]);
248 container.innerHTML = '\n<div class="flexbox ' + flexboxClassName + '">\n' +
249 '<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" ' + asString(expectations['flexitem' + flexFlow.replace('-reverse', '')]) + '>\n' +
250 '<div style="width:100%; height:100%" ' + asString(expectations['child' + flexFlow.replace('-reverse', '')]) + '></div>' +
254 document.body.appendChild(container);