6 background-color: pink;
7 outline: 1px solid red;
11 display: -webkit-flexbox;
12 background-color: grey;
31 -webkit-writing-mode: horizontal-tb;
34 -webkit-writing-mode: horizontal-bt;
37 -webkit-writing-mode: vertical-rl;
40 -webkit-writing-mode: vertical-lr;
43 -webkit-flex-flow: row;
46 -webkit-flex-flow: row-reverse;
49 -webkit-flex-flow: column;
52 -webkit-flex-flow: column-reverse;
55 border-width: 10px 20px 30px 40px;
58 border-width: 13px 2px 17px 8px;
61 -webkit-border-before-width: 10px;
62 -webkit-border-after-width: 30px;
63 -webkit-border-start-width: 40px;
64 -webkit-border-end-width: 20px;
67 -webkit-border-before-width: 13px;
68 -webkit-border-after-width: 17px;
69 -webkit-border-start-width: 8px;
70 -webkit-border-end-width: 2px;
72 .flexbox > :nth-child(1) {
73 background-color: blue;
75 .flexbox > :nth-child(2) {
76 background-color: green;
78 .flexbox > :nth-child(3) {
79 background-color: red;
83 if (window.layoutTestController)
84 layoutTestController.dumpAsText();
86 <script src="resources/flexbox.js"></script>
87 <body onload="checkFlexBoxen()">
90 function positionAsString(position)
92 return 'data-total-x="' + position[0] + '" data-total-y="' + position[1] + '"';
95 function offsetSizeAsString(size)
97 return 'data-expected-width="' + size[0] + '" data-expected-height="' + size[1] + '"';
100 function asString(expectations)
102 return 'data-expected-client-width="' + expectations[0] + '" data-expected-client-height="' + expectations[1] + '" ' + positionAsString(expectations.slice(2, 4));
105 var physicalFlexBoxOffsetSize = [160, 140];
106 var physicalFlexBoxClientPosition = [40, 10];
108 var physicalExpectations = {
111 size: physicalFlexBoxOffsetSize,
112 position: physicalFlexBoxClientPosition,
113 column: [20, 70, 118, 23],
114 row: [90, 20, 48, 23]
117 size: physicalFlexBoxOffsetSize,
118 position: physicalFlexBoxClientPosition,
119 column: [20, 70, 48, 23],
120 row: [90, 20, 48, 23]
125 size: physicalFlexBoxOffsetSize,
126 position: physicalFlexBoxClientPosition,
127 column: [20, 70, 118, 23],
128 row: [90, 20, 48, 73]
131 size: physicalFlexBoxOffsetSize,
132 position: physicalFlexBoxClientPosition,
133 column: [20, 70, 48, 23],
134 row: [90, 20, 48, 73]
139 size: physicalFlexBoxOffsetSize,
140 position: physicalFlexBoxClientPosition,
141 column: [90, 20, 48, 73],
142 row: [20, 70, 48, 23]
145 size: physicalFlexBoxOffsetSize,
146 position: physicalFlexBoxClientPosition,
147 column: [90, 20, 48, 23],
148 row: [20, 70, 48, 23]
153 size: physicalFlexBoxOffsetSize,
154 position: physicalFlexBoxClientPosition,
155 column: [90, 20, 48, 73],
156 row: [20, 70, 118, 23]
159 size: physicalFlexBoxOffsetSize,
160 position: physicalFlexBoxClientPosition,
161 column: [90, 20, 48, 23],
162 row: [20, 70, 118, 23]
167 var logicalExpectations = {
172 column: [20, 70, 92, 23],
173 row: [90, 20, 22, 23]
178 column: [20, 70, 48, 23],
179 row: [90, 20, 48, 23]
186 column: [20, 70, 92, 47],
187 row: [90, 20, 22, 97]
192 column: [20, 70, 48, 47],
193 row: [90, 20, 48, 97]
200 column: [70, 20, 23, 92],
201 row: [20, 90, 23, 22]
206 column: [70, 20, 23, 48],
207 row: [20, 90, 23, 48]
214 column: [70, 20, 47, 92],
215 row: [20, 90, 97, 22]
220 column: [70, 20, 47, 48],
221 row: [20, 90, 97, 48]
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'];
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);
242 var expectations = (marginType == 'physical') ? physicalExpectations : logicalExpectations;
243 expectations = expectations[writingMode][direction];
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]);
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' +
254 document.body.appendChild(container);