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 max-width: 600px; | 8 max-width: 600px; |
9 align-content: flex-start; | 9 align-content: flex-start; |
10 } | 10 } |
11 .flexbox > * { | 11 .flexbox > * { |
12 flex: none; | 12 flex: none; |
13 } | 13 } |
14 .title { | 14 .title { |
15 margin-top: 1em; | 15 margin-top: 1em; |
16 } | 16 } |
17 .ltr { | 17 .ltr { |
18 direction: ltr; | 18 direction: ltr; |
19 } | 19 } |
20 .rtl { | 20 .rtl { |
21 direction: rtl; | 21 direction: rtl; |
22 } | 22 } |
23 .horizontal-tb { | 23 .horizontal-tb { |
24 -webkit-writing-mode: horizontal-tb; | 24 -webkit-writing-mode: horizontal-tb; |
25 } | 25 } |
26 .horizontal-bt { | |
27 -webkit-writing-mode: horizontal-bt; | |
28 } | |
29 .vertical-rl { | 26 .vertical-rl { |
30 -webkit-writing-mode: vertical-rl; | 27 -webkit-writing-mode: vertical-rl; |
31 } | 28 } |
32 .vertical-lr { | 29 .vertical-lr { |
33 -webkit-writing-mode: vertical-lr; | 30 -webkit-writing-mode: vertical-lr; |
34 } | 31 } |
35 .row { | 32 .row { |
36 flex-flow: row; | 33 flex-flow: row; |
37 } | 34 } |
38 .row-reverse { | 35 .row-reverse { |
(...skipping 179 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
218 'flexbox': [600, 60], | 215 'flexbox': [600, 60], |
219 'child1': [5, 30, 0, 30], | 216 'child1': [5, 30, 0, 30], |
220 'child2': [10, 30, 0, 0], | 217 'child2': [10, 30, 0, 0], |
221 'child3': [5, 60, 10, 0], | 218 'child3': [5, 60, 10, 0], |
222 'child4': [20, 70, 15, -10], | 219 'child4': [20, 70, 15, -10], |
223 'child5': [10, 60, 35, 0], | 220 'child5': [10, 60, 35, 0], |
224 }, | 221 }, |
225 }, | 222 }, |
226 }, | 223 }, |
227 }, | 224 }, |
228 'horizontal-bt': { | |
229 'row': { | |
230 'ltr': { | |
231 'wrap': { | |
232 'flexbox': [60, 45], | |
233 'child1': [30, 5, 0, 40], | |
234 'child2': [30, 10, 30, 35], | |
235 'child3': [60, 5, 0, 30], | |
236 'child4': [70, 20, 0, 10], | |
237 'child5': [60, 10, 0, 0], | |
238 }, | |
239 'wrap-reverse': { | |
240 'flexbox': [60, 45], | |
241 'child1': [30, 5, 0, 0], | |
242 'child2': [30, 10, 30, 0], | |
243 'child3': [60, 5, 0, 10], | |
244 'child4': [70, 20, 0, 15], | |
245 'child5': [60, 10, 0, 35], | |
246 }, | |
247 }, | |
248 'rtl': { | |
249 'wrap': { | |
250 'flexbox': [60, 45], | |
251 'child1': [30, 5, 30, 40], | |
252 'child2': [30, 10, 0, 35], | |
253 'child3': [60, 5, 0, 30], | |
254 'child4': [70, 20, -10, 10], | |
255 'child5': [60, 10, 0, 0], | |
256 }, | |
257 'wrap-reverse': { | |
258 'flexbox': [60, 45], | |
259 'child1': [30, 5, 30, 0], | |
260 'child2': [30, 10, 0, 0], | |
261 'child3': [60, 5, 0, 10], | |
262 'child4': [70, 20, -10, 15], | |
263 'child5': [60, 10, 0, 35], | |
264 }, | |
265 }, | |
266 }, | |
267 'column': { | |
268 'ltr': { | |
269 'wrap': { | |
270 'flexbox': [600, 60], | |
271 'child1': [5, 30, 0, 30], | |
272 'child2': [10, 30, 0, 0], | |
273 'child3': [5, 60, 10, 0], | |
274 'child4': [20, 70, 15, -10], | |
275 'child5': [10, 60, 35, 0], | |
276 }, | |
277 'wrap-reverse': { | |
278 'flexbox': [600, 60], | |
279 'child1': [5, 30, 595, 30], | |
280 'child2': [10, 30, 590, 0], | |
281 'child3': [5, 60, 585, 0], | |
282 'child4': [20, 70, 565, -10], | |
283 'child5': [10, 60, 555, 0], | |
284 }, | |
285 }, | |
286 'rtl': { | |
287 'wrap': { | |
288 'flexbox': [600, 60], | |
289 'child1': [5, 30, 595, 30], | |
290 'child2': [10, 30, 590, 0], | |
291 'child3': [5, 60, 585, 0], | |
292 'child4': [20, 70, 565, -10], | |
293 'child5': [10, 60, 555, 0], | |
294 }, | |
295 'wrap-reverse': { | |
296 'flexbox': [600, 60], | |
297 'child1': [5, 30, 0, 30], | |
298 'child2': [10, 30, 0, 0], | |
299 'child3': [5, 60, 10, 0], | |
300 'child4': [20, 70, 15, -10], | |
301 'child5': [10, 60, 35, 0], | |
302 }, | |
303 }, | |
304 }, | |
305 'row-reverse': { | |
306 'ltr': { | |
307 'wrap': { | |
308 'flexbox': [60, 45], | |
309 'child1': [30, 5, 30, 40], | |
310 'child2': [30, 10, 0, 35], | |
311 'child3': [60, 5, 0, 30], | |
312 'child4': [70, 20, -10, 10], | |
313 'child5': [60, 10, 0, 0], | |
314 }, | |
315 'wrap-reverse': { | |
316 'flexbox': [60, 45], | |
317 'child1': [30, 5, 30, 0], | |
318 'child2': [30, 10, 0, 0], | |
319 'child3': [60, 5, 0, 10], | |
320 'child4': [70, 20, -10, 15], | |
321 'child5': [60, 10, 0, 35], | |
322 }, | |
323 }, | |
324 'rtl': { | |
325 'wrap': { | |
326 'flexbox': [60, 45], | |
327 'child1': [30, 5, 0, 40], | |
328 'child2': [30, 10, 30, 35], | |
329 'child3': [60, 5, 0, 30], | |
330 'child4': [70, 20, 0, 10], | |
331 'child5': [60, 10, 0, 0], | |
332 }, | |
333 'wrap-reverse': { | |
334 'flexbox': [60, 45], | |
335 'child1': [30, 5, 0, 0], | |
336 'child2': [30, 10, 30, 0], | |
337 'child3': [60, 5, 0, 10], | |
338 'child4': [70, 20, 0, 15], | |
339 'child5': [60, 10, 0, 35], | |
340 }, | |
341 }, | |
342 }, | |
343 'column-reverse': { | |
344 'ltr': { | |
345 'wrap': { | |
346 'flexbox': [600, 60], | |
347 'child1': [5, 30, 0, 0], | |
348 'child2': [10, 30, 0, 30], | |
349 'child3': [5, 60, 10, 0], | |
350 'child4': [20, 70, 15, 0], | |
351 'child5': [10, 60, 35, 0], | |
352 }, | |
353 'wrap-reverse': { | |
354 'flexbox': [600, 60], | |
355 'child1': [5, 30, 595, 0], | |
356 'child2': [10, 30, 590, 30], | |
357 'child3': [5, 60, 585, 0], | |
358 'child4': [20, 70, 565, 0], | |
359 'child5': [10, 60, 555, 0], | |
360 }, | |
361 }, | |
362 'rtl': { | |
363 'wrap': { | |
364 'flexbox': [600, 60], | |
365 'child1': [5, 30, 595, 0], | |
366 'child2': [10, 30, 590, 30], | |
367 'child3': [5, 60, 585, 0], | |
368 'child4': [20, 70, 565, 0], | |
369 'child5': [10, 60, 555, 0], | |
370 }, | |
371 'wrap-reverse': { | |
372 'flexbox': [600, 60], | |
373 'child1': [5, 30, 0, 0], | |
374 'child2': [10, 30, 0, 30], | |
375 'child3': [5, 60, 10, 0], | |
376 'child4': [20, 70, 15, 0], | |
377 'child5': [10, 60, 35, 0], | |
378 }, | |
379 }, | |
380 }, | |
381 }, | |
382 'vertical-rl': { | 225 'vertical-rl': { |
383 'row': { | 226 'row': { |
384 'ltr': { | 227 'ltr': { |
385 'wrap': { | 228 'wrap': { |
386 'flexbox': [45, 60], | 229 'flexbox': [45, 60], |
387 'child1': [5, 30, 40, 0], | 230 'child1': [5, 30, 40, 0], |
388 'child2': [10, 30, 35, 30], | 231 'child2': [10, 30, 35, 30], |
389 'child3': [5, 60, 30, 0], | 232 'child3': [5, 60, 30, 0], |
390 'child4': [20, 70, 10, 0], | 233 'child4': [20, 70, 10, 0], |
391 'child5': [10, 60, 0, 0], | 234 'child5': [10, 60, 0, 0], |
(...skipping 312 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
704 + crossAxis + ': ' + crossAxisLength + 'px;'); | 547 + crossAxis + ': ' + crossAxisLength + 'px;'); |
705 | 548 |
706 child.setAttribute("data-expected-width", expectations[0]); | 549 child.setAttribute("data-expected-width", expectations[0]); |
707 child.setAttribute("data-expected-height", expectations[1]); | 550 child.setAttribute("data-expected-height", expectations[1]); |
708 child.setAttribute("data-offset-x", expectations[2]); | 551 child.setAttribute("data-offset-x", expectations[2]); |
709 child.setAttribute("data-offset-y", expectations[3]); | 552 child.setAttribute("data-offset-y", expectations[3]); |
710 | 553 |
711 flexbox.appendChild(child); | 554 flexbox.appendChild(child); |
712 } | 555 } |
713 | 556 |
714 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-l
r']; | 557 var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; |
715 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; | 558 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; |
716 var directions = ['ltr', 'rtl']; | 559 var directions = ['ltr', 'rtl']; |
717 var wraps = ['wrap', 'wrap-reverse']; | 560 var wraps = ['wrap', 'wrap-reverse']; |
718 | 561 |
719 writingModes.forEach(function(writingMode) { | 562 writingModes.forEach(function(writingMode) { |
720 flexDirections.forEach(function(flexDirection) { | 563 flexDirections.forEach(function(flexDirection) { |
721 directions.forEach(function(direction) { | 564 directions.forEach(function(direction) { |
722 wraps.forEach(function(wrap) { | 565 wraps.forEach(function(wrap) { |
723 var flexboxClassName = writingMode + ' ' + direction + ' ' + fle
xDirection + ' ' + wrap; | 566 var flexboxClassName = writingMode + ' ' + direction + ' ' + fle
xDirection + ' ' + wrap; |
724 var title = document.createElement('div'); | 567 var title = document.createElement('div'); |
(...skipping 19 matching lines...) Expand all Loading... |
744 flexbox.setAttribute("data-expected-height", testExpectations.fl
exbox[1]); | 587 flexbox.setAttribute("data-expected-height", testExpectations.fl
exbox[1]); |
745 | 588 |
746 document.body.appendChild(flexbox); | 589 document.body.appendChild(flexbox); |
747 }) | 590 }) |
748 }) | 591 }) |
749 }) | 592 }) |
750 }) | 593 }) |
751 </script> | 594 </script> |
752 </body> | 595 </body> |
753 </html> | 596 </html> |
OLD | NEW |