OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <style> | 3 <style> |
4 .flexbox { | 4 .flexbox { |
5 position: relative; | 5 position: relative; |
6 display: flex; | 6 display: flex; |
7 background-color: grey; | 7 background-color: grey; |
8 width: 600px; | 8 width: 600px; |
9 height: 20px; | 9 height: 20px; |
10 } | 10 } |
11 .title { | 11 .title { |
12 margin-top: 1em; | 12 margin-top: 1em; |
13 } | 13 } |
14 .ltr { | 14 .ltr { |
15 direction: ltr; | 15 direction: ltr; |
16 } | 16 } |
17 .rtl { | 17 .rtl { |
18 direction: rtl; | 18 direction: rtl; |
19 } | 19 } |
20 .horizontal-tb { | 20 .horizontal-tb { |
21 -webkit-writing-mode: horizontal-tb; | 21 -webkit-writing-mode: horizontal-tb; |
22 } | 22 } |
23 .horizontal-bt { | |
24 -webkit-writing-mode: horizontal-bt; | |
25 } | |
26 .column { | 23 .column { |
27 flex-flow: column; | 24 flex-flow: column; |
28 } | 25 } |
29 .column-reverse { | 26 .column-reverse { |
30 flex-flow: column-reverse; | 27 flex-flow: column-reverse; |
31 } | 28 } |
32 .wrap { | 29 .wrap { |
33 flex-wrap: wrap; | 30 flex-wrap: wrap; |
34 } | 31 } |
35 .wrap-reverse { | 32 .wrap-reverse { |
(...skipping 101 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
137 'flex-start': [0, 100], | 134 'flex-start': [0, 100], |
138 'flex-end': [400, 500], | 135 'flex-end': [400, 500], |
139 'center': [200, 300], | 136 'center': [200, 300], |
140 'space-between': [0, 500], | 137 'space-between': [0, 500], |
141 'space-around': [100, 400], | 138 'space-around': [100, 400], |
142 'stretch': [0, 300], | 139 'stretch': [0, 300], |
143 }, | 140 }, |
144 }, | 141 }, |
145 }, | 142 }, |
146 }, | 143 }, |
147 'horizontal-bt': { | |
148 // Same as horizontal-tb. | |
149 'column': { | |
150 'ltr': { | |
151 'wrap': { | |
152 'flex-start': [0, 100], | |
153 'flex-end': [400, 500], | |
154 'center': [200, 300], | |
155 'space-between': [0, 500], | |
156 'space-around': [100, 400], | |
157 'stretch': [0, 300], | |
158 }, | |
159 'wrap-reverse': { | |
160 'flex-start': [500, 400], | |
161 'flex-end': [100, 0], | |
162 'center': [300, 200], | |
163 'space-between': [500, 0], | |
164 'space-around': [400, 100], | |
165 'stretch': [300, 0], | |
166 }, | |
167 }, | |
168 'rtl': { | |
169 'wrap': { | |
170 'flex-start': [500, 400], | |
171 'flex-end': [100, 0], | |
172 'center': [300, 200], | |
173 'space-between': [500, 0], | |
174 'space-around': [400, 100], | |
175 'stretch': [300, 0], | |
176 }, | |
177 'wrap-reverse': { | |
178 'flex-start': [0, 100], | |
179 'flex-end': [400, 500], | |
180 'center': [200, 300], | |
181 'space-between': [0, 500], | |
182 'space-around': [100, 400], | |
183 'stretch': [0, 300], | |
184 }, | |
185 }, | |
186 }, | |
187 'column-reverse': { | |
188 'ltr': { | |
189 'wrap': { | |
190 'flex-start': [0, 100], | |
191 'flex-end': [400, 500], | |
192 'center': [200, 300], | |
193 'space-between': [0, 500], | |
194 'space-around': [100, 400], | |
195 'stretch': [0, 300], | |
196 }, | |
197 'wrap-reverse': { | |
198 'flex-start': [500, 400], | |
199 'flex-end': [100, 0], | |
200 'center': [300, 200], | |
201 'space-between': [500, 0], | |
202 'space-around': [400, 100], | |
203 'stretch': [300, 0], | |
204 }, | |
205 }, | |
206 'rtl': { | |
207 'wrap': { | |
208 'flex-start': [500, 400], | |
209 'flex-end': [100, 0], | |
210 'center': [300, 200], | |
211 'space-between': [500, 0], | |
212 'space-around': [400, 100], | |
213 'stretch': [300, 0], | |
214 }, | |
215 'wrap-reverse': { | |
216 'flex-start': [0, 100], | |
217 'flex-end': [400, 500], | |
218 'center': [200, 300], | |
219 'space-between': [0, 500], | |
220 'space-around': [100, 400], | |
221 'stretch': [0, 300], | |
222 }, | |
223 }, | |
224 }, | |
225 }, | |
226 }; | 144 }; |
227 | 145 |
228 function mainAxisDirection(writingMode, flexDirection) | 146 function mainAxisDirection(writingMode, flexDirection) |
229 { | 147 { |
230 if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row')
!= -1) | 148 if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row')
!= -1) |
231 || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('colu
mn') != -1)) | 149 || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('colu
mn') != -1)) |
232 return 'width'; | 150 return 'width'; |
233 return 'height'; | 151 return 'height'; |
234 } | 152 } |
235 | 153 |
236 function addChild(flexbox, preferredSize, alignContent, expected_x_offset) | 154 function addChild(flexbox, preferredSize, alignContent, expected_x_offset) |
237 { | 155 { |
238 var child = document.createElement('div'); | 156 var child = document.createElement('div'); |
239 child.setAttribute('style', 'flex: 1 ' + preferredSize + 'px;' | 157 child.setAttribute('style', 'flex: 1 ' + preferredSize + 'px;' |
240 + 'min-width: 100px'); | 158 + 'min-width: 100px'); |
241 | 159 |
242 child.setAttribute("data-expected-width", alignContent == "stretch" ? "300"
: "100"); | 160 child.setAttribute("data-expected-width", alignContent == "stretch" ? "300"
: "100"); |
243 child.setAttribute("data-expected-height", "20"); | 161 child.setAttribute("data-expected-height", "20"); |
244 child.setAttribute("data-offset-y", "0"); | 162 child.setAttribute("data-offset-y", "0"); |
245 child.setAttribute("data-offset-x", expected_x_offset); | 163 child.setAttribute("data-offset-x", expected_x_offset); |
246 | 164 |
247 flexbox.appendChild(child); | 165 flexbox.appendChild(child); |
248 } | 166 } |
249 | 167 |
250 var writingModes = ['horizontal-tb', 'horizontal-bt']; | 168 var writingModes = ['horizontal-tb']; |
251 var flexDirections = ['column', 'column-reverse']; | 169 var flexDirections = ['column', 'column-reverse']; |
252 var directions = ['ltr', 'rtl']; | 170 var directions = ['ltr', 'rtl']; |
253 var wraps = ['wrap', 'wrap-reverse']; | 171 var wraps = ['wrap', 'wrap-reverse']; |
254 var alignContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space
-around', 'stretch']; | 172 var alignContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space
-around', 'stretch']; |
255 | 173 |
256 writingModes.forEach(function(writingMode) { | 174 writingModes.forEach(function(writingMode) { |
257 flexDirections.forEach(function(flexDirection) { | 175 flexDirections.forEach(function(flexDirection) { |
258 directions.forEach(function(direction) { | 176 directions.forEach(function(direction) { |
259 wraps.forEach(function(wrap) { | 177 wraps.forEach(function(wrap) { |
260 alignContents.forEach(function(alignContent) { | 178 alignContents.forEach(function(alignContent) { |
(...skipping 17 matching lines...) Expand all Loading... |
278 | 196 |
279 document.body.appendChild(flexbox); | 197 document.body.appendChild(flexbox); |
280 }) | 198 }) |
281 }) | 199 }) |
282 }) | 200 }) |
283 }) | 201 }) |
284 }) | 202 }) |
285 </script> | 203 </script> |
286 </body> | 204 </body> |
287 </html> | 205 </html> |
OLD | NEW |