Google Git
Sign in
webkit / WebKit / 09b934ecb06ae2590657a89c69715632d7c0c350 / . / LayoutTests / css3 / flexbox / multiline-align-content-horizontal-column.html
blob: 06393efe9e903f91121a1b5039a7313e7756da62 [file] [log] [blame]
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]1<!DOCTYPE html>
2<html>
3<style>
4.flexbox {
5 position: relative;
tony@chromium.org3f320ee2012-05-17 03:19:31 +0000[diff] [blame]6 display: -webkit-flex;
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]7 background-color: grey;
8 width: 600px;
9 height: 20px;
10}
11.title {
12 margin-top: 1em;
13}
14.ltr {
15 direction: ltr;
16}
17.rtl {
18 direction: rtl;
19}
20.horizontal-tb {
21 -webkit-writing-mode: horizontal-tb;
22}
23.horizontal-bt {
24 -webkit-writing-mode: horizontal-bt;
25}
26.column {
27 -webkit-flex-flow: column;
28}
29.column-reverse {
30 -webkit-flex-flow: column-reverse;
31}
32.wrap {
33 -webkit-flex-wrap: wrap;
34}
35.wrap-reverse {
36 -webkit-flex-wrap: wrap-reverse;
37}
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]38.align-content-flex-start {
39 -webkit-align-content: flex-start;
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]40}
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]41.align-content-flex-end {
42 -webkit-align-content: flex-end;
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]43}
tony@chromium.org730973c2012-06-01 23:18:21 +0000[diff] [blame]44.align-content-center {
45 -webkit-align-content: center;
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]46}
tony@chromium.org730973c2012-06-01 23:18:21 +0000[diff] [blame]47.align-content-space-between {
48 -webkit-align-content: space-between;
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]49}
tony@chromium.org730973c2012-06-01 23:18:21 +0000[diff] [blame]50.align-content-space-around {
51 -webkit-align-content: space-around;
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]52}
tony@chromium.org730973c2012-06-01 23:18:21 +0000[diff] [blame]53.align-content-stretch {
54 -webkit-align-content: stretch;
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]55}
56.flexbox > :nth-child(1) {
57 background-color: blue;
58}
59.flexbox > :nth-child(2) {
60 background-color: green;
61}
62</style>
tony@chromium.orgb1541ca2012-07-13 19:58:47 +0000[diff] [blame]63<script src="../../resources/check-layout.js"></script>
64<body onload="checkLayout('.flexbox')">
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]65
66<script>
67var expectations = {
68 'horizontal-tb': {
69 'column': {
70 'ltr': {
71 'wrap': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]72 'flex-start': [0, 100],
73 'flex-end': [400, 500],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]74 'center': [200, 300],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]75 'space-between': [0, 500],
76 'space-around': [100, 400],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]77 'stretch': [0, 300],
78 },
79 'wrap-reverse': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]80 'flex-start': [500, 400],
81 'flex-end': [100, 0],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]82 'center': [300, 200],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]83 'space-between': [500, 0],
84 'space-around': [400, 100],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]85 'stretch': [300, 0],
86 },
87 },
88 'rtl': {
89 'wrap': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]90 'flex-start': [500, 400],
91 'flex-end': [100, 0],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]92 'center': [300, 200],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]93 'space-between': [500, 0],
94 'space-around': [400, 100],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]95 'stretch': [300, 0],
96 },
97 'wrap-reverse': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]98 'flex-start': [0, 100],
99 'flex-end': [400, 500],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]100 'center': [200, 300],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]101 'space-between': [0, 500],
102 'space-around': [100, 400],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]103 'stretch': [0, 300],
104 },
105 },
106 },
107 // Same as column.
108 'column-reverse': {
109 'ltr': {
110 'wrap': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]111 'flex-start': [0, 100],
112 'flex-end': [400, 500],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]113 'center': [200, 300],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]114 'space-between': [0, 500],
115 'space-around': [100, 400],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]116 'stretch': [0, 300],
117 },
118 'wrap-reverse': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]119 'flex-start': [500, 400],
120 'flex-end': [100, 0],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]121 'center': [300, 200],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]122 'space-between': [500, 0],
123 'space-around': [400, 100],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]124 'stretch': [300, 0],
125 },
126 },
127 'rtl': {
128 'wrap': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]129 'flex-start': [500, 400],
130 'flex-end': [100, 0],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]131 'center': [300, 200],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]132 'space-between': [500, 0],
133 'space-around': [400, 100],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]134 'stretch': [300, 0],
135 },
136 'wrap-reverse': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]137 'flex-start': [0, 100],
138 'flex-end': [400, 500],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]139 'center': [200, 300],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]140 'space-between': [0, 500],
141 'space-around': [100, 400],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]142 'stretch': [0, 300],
143 },
144 },
145 },
146 },
147 'horizontal-bt': {
148 // Same as horizontal-tb.
149 'column': {
150 'ltr': {
151 'wrap': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]152 'flex-start': [0, 100],
153 'flex-end': [400, 500],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]154 'center': [200, 300],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]155 'space-between': [0, 500],
156 'space-around': [100, 400],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]157 'stretch': [0, 300],
158 },
159 'wrap-reverse': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]160 'flex-start': [500, 400],
161 'flex-end': [100, 0],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]162 'center': [300, 200],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]163 'space-between': [500, 0],
164 'space-around': [400, 100],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]165 'stretch': [300, 0],
166 },
167 },
168 'rtl': {
169 'wrap': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]170 'flex-start': [500, 400],
171 'flex-end': [100, 0],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]172 'center': [300, 200],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]173 'space-between': [500, 0],
174 'space-around': [400, 100],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]175 'stretch': [300, 0],
176 },
177 'wrap-reverse': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]178 'flex-start': [0, 100],
179 'flex-end': [400, 500],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]180 'center': [200, 300],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]181 'space-between': [0, 500],
182 'space-around': [100, 400],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]183 'stretch': [0, 300],
184 },
185 },
186 },
187 'column-reverse': {
188 'ltr': {
189 'wrap': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]190 'flex-start': [0, 100],
191 'flex-end': [400, 500],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]192 'center': [200, 300],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]193 'space-between': [0, 500],
194 'space-around': [100, 400],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]195 'stretch': [0, 300],
196 },
197 'wrap-reverse': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]198 'flex-start': [500, 400],
199 'flex-end': [100, 0],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]200 'center': [300, 200],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]201 'space-between': [500, 0],
202 'space-around': [400, 100],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]203 'stretch': [300, 0],
204 },
205 },
206 'rtl': {
207 'wrap': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]208 'flex-start': [500, 400],
209 'flex-end': [100, 0],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]210 'center': [300, 200],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]211 'space-between': [500, 0],
212 'space-around': [400, 100],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]213 'stretch': [300, 0],
214 },
215 'wrap-reverse': {
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]216 'flex-start': [0, 100],
217 'flex-end': [400, 500],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]218 'center': [200, 300],
tony@chromium.org307f3a92012-05-30 21:12:55 +0000[diff] [blame]219 'space-between': [0, 500],
220 'space-around': [100, 400],
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]221 'stretch': [0, 300],
222 },
223 },
224 },
225 },
226};
227
228function mainAxisDirection(writingMode, flexDirection)
229{
230 if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1)
231 || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1))
232 return 'width';
233 return 'height';
234}
235
tony@chromium.org730973c2012-06-01 23:18:21 +0000[diff] [blame]236function addChild(flexbox, preferredSize, alignContent, expected_x_offset)
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]237{
238 var child = document.createElement('div');
tony@chromium.org176a7c92012-04-03 22:34:03 +0000[diff] [blame]239 child.setAttribute('style', '-webkit-flex: 1 ' + preferredSize + 'px;'
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]240 + 'min-width: 100px');
241
tony@chromium.org730973c2012-06-01 23:18:21 +0000[diff] [blame]242 child.setAttribute("data-expected-width", alignContent == "stretch" ? "300" : "100");
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]243 child.setAttribute("data-expected-height", "20");
244 child.setAttribute("data-offset-y", "0");
245 child.setAttribute("data-offset-x", expected_x_offset);
246
247 flexbox.appendChild(child);
248}
249
250var writingModes = ['horizontal-tb', 'horizontal-bt'];
251var flexDirections = ['column', 'column-reverse'];
252var directions = ['ltr', 'rtl'];
253var wraps = ['wrap', 'wrap-reverse'];
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]254var alignContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'];
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]255
256writingModes.forEach(function(writingMode) {
257 flexDirections.forEach(function(flexDirection) {
258 directions.forEach(function(direction) {
259 wraps.forEach(function(wrap) {
tony@chromium.org730973c2012-06-01 23:18:21 +0000[diff] [blame]260 alignContents.forEach(function(alignContent) {
261 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' ' + wrap + ' align-content-' + alignContent;
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]262 var title = document.createElement('div');
263 title.className = 'title';
264 title.innerHTML = flexboxClassName;
265 document.body.appendChild(title);
266
267 var mainAxis = 'height';
268 var crossAxis = 'width';
269
270 var flexbox = document.createElement('div');
271 flexbox.className = 'flexbox ' + flexboxClassName;
272 flexbox.setAttribute("data-expected-width", "600");
273 flexbox.setAttribute("data-expected-height", "20");
274
tony@chromium.org730973c2012-06-01 23:18:21 +0000[diff] [blame]275 var testExpectations = expectations[writingMode][flexDirection][direction][wrap][alignContent];
276 addChild(flexbox, 20, alignContent, testExpectations[0]);
277 addChild(flexbox, 5, alignContent, testExpectations[1]);
tony@chromium.org1cbfd642012-03-29 17:16:39 +0000[diff] [blame]278
279 document.body.appendChild(flexbox);
280 })
281 })
282 })
283 })
284})
285</script>
286</body>
287</html>