| <!DOCTYPE html> | |
| <html> | |
| <style> | |
| .flexbox { | |
| position: relative; | |
| display: -webkit-flex; | |
| background-color: grey; | |
| max-width: 600px; | |
| -webkit-align-content: flex-start; | |
| } | |
| .flexbox > * { | |
| -webkit-flex: none; | |
| } | |
| .title { | |
| margin-top: 1em; | |
| } | |
| .ltr { | |
| direction: ltr; | |
| } | |
| .rtl { | |
| direction: rtl; | |
| } | |
| .horizontal-tb { | |
| -webkit-writing-mode: horizontal-tb; | |
| } | |
| .horizontal-bt { | |
| -webkit-writing-mode: horizontal-bt; | |
| } | |
| .vertical-rl { | |
| -webkit-writing-mode: vertical-rl; | |
| } | |
| .vertical-lr { | |
| -webkit-writing-mode: vertical-lr; | |
| } | |
| .row { | |
| -webkit-flex-flow: row; | |
| } | |
| .row-reverse { | |
| -webkit-flex-flow: row-reverse; | |
| } | |
| .column { | |
| -webkit-flex-flow: column; | |
| } | |
| .column-reverse { | |
| -webkit-flex-flow: column-reverse; | |
| } | |
| .wrap { | |
| -webkit-flex-wrap: wrap; | |
| } | |
| .wrap-reverse { | |
| -webkit-flex-wrap: wrap-reverse; | |
| } | |
| .flexbox > :nth-child(1) { | |
| background-color: #0f0; | |
| } | |
| .flexbox > :nth-child(2) { | |
| background-color: #0d0; | |
| } | |
| .flexbox > :nth-child(3) { | |
| background-color: #090; | |
| } | |
| .flexbox > :nth-child(4) { | |
| background-color: #060; | |
| } | |
| .flexbox > :nth-child(5) { | |
| background-color: #030; | |
| } | |
| </style> | |
| <script> | |
| if (window.testRunner) | |
| testRunner.dumpAsText(); | |
| </script> | |
| <script src="../../resources/check-layout.js"></script> | |
| <body onload="checkLayout('.flexbox')"> | |
| <script> | |
| var expectations = { | |
| 'horizontal-tb': { | |
| 'row': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 0, 0], | |
| 'child2': [30, 10, 30, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, 0, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 0, 40], | |
| 'child2': [30, 10, 30, 35], | |
| 'child3': [60, 5, 0, 30], | |
| 'child4': [70, 20, 0, 10], | |
| 'child5': [60, 10, 0, 0], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 30, 0], | |
| 'child2': [30, 10, 0, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, -10, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 30, 40], | |
| 'child2': [30, 10, 0, 35], | |
| 'child3': [60, 5, 0, 30], | |
| 'child4': [70, 20, -10, 10], | |
| 'child5': [60, 10, 0, 0], | |
| }, | |
| }, | |
| }, | |
| 'column': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 0, 0], | |
| 'child2': [10, 30, 0, 30], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, 0], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 595, 0], | |
| 'child2': [10, 30, 590, 30], | |
| 'child3': [5, 60, 585, 0], | |
| 'child4': [20, 70, 565, 0], | |
| 'child5': [10, 60, 555, 0], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 595, 0], | |
| 'child2': [10, 30, 590, 30], | |
| 'child3': [5, 60, 585, 0], | |
| 'child4': [20, 70, 565, 0], | |
| 'child5': [10, 60, 555, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 0, 0], | |
| 'child2': [10, 30, 0, 30], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, 0], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| }, | |
| }, | |
| 'row-reverse': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 30, 0], | |
| 'child2': [30, 10, 0, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, -10, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 30, 40], | |
| 'child2': [30, 10, 0, 35], | |
| 'child3': [60, 5, 0, 30], | |
| 'child4': [70, 20, -10, 10], | |
| 'child5': [60, 10, 0, 0], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 0, 0], | |
| 'child2': [30, 10, 30, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, 0, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 0, 40], | |
| 'child2': [30, 10, 30, 35], | |
| 'child3': [60, 5, 0, 30], | |
| 'child4': [70, 20, 0, 10], | |
| 'child5': [60, 10, 0, 0], | |
| }, | |
| }, | |
| }, | |
| 'column-reverse': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 0, 30], | |
| 'child2': [10, 30, 0, 0], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, -10], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 595, 30], | |
| 'child2': [10, 30, 590, 0], | |
| 'child3': [5, 60, 585, 0], | |
| 'child4': [20, 70, 565, -10], | |
| 'child5': [10, 60, 555, 0], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 595, 30], | |
| 'child2': [10, 30, 590, 0], | |
| 'child3': [5, 60, 585, 0], | |
| 'child4': [20, 70, 565, -10], | |
| 'child5': [10, 60, 555, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 0, 30], | |
| 'child2': [10, 30, 0, 0], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, -10], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| }, | |
| }, | |
| }, | |
| 'horizontal-bt': { | |
| 'row': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 0, 40], | |
| 'child2': [30, 10, 30, 35], | |
| 'child3': [60, 5, 0, 30], | |
| 'child4': [70, 20, 0, 10], | |
| 'child5': [60, 10, 0, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 0, 0], | |
| 'child2': [30, 10, 30, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, 0, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 30, 40], | |
| 'child2': [30, 10, 0, 35], | |
| 'child3': [60, 5, 0, 30], | |
| 'child4': [70, 20, -10, 10], | |
| 'child5': [60, 10, 0, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 30, 0], | |
| 'child2': [30, 10, 0, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, -10, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| }, | |
| }, | |
| 'column': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 0, 30], | |
| 'child2': [10, 30, 0, 0], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, -10], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 595, 30], | |
| 'child2': [10, 30, 590, 0], | |
| 'child3': [5, 60, 585, 0], | |
| 'child4': [20, 70, 565, -10], | |
| 'child5': [10, 60, 555, 0], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 595, 30], | |
| 'child2': [10, 30, 590, 0], | |
| 'child3': [5, 60, 585, 0], | |
| 'child4': [20, 70, 565, -10], | |
| 'child5': [10, 60, 555, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 0, 30], | |
| 'child2': [10, 30, 0, 0], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, -10], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| }, | |
| }, | |
| 'row-reverse': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 30, 40], | |
| 'child2': [30, 10, 0, 35], | |
| 'child3': [60, 5, 0, 30], | |
| 'child4': [70, 20, -10, 10], | |
| 'child5': [60, 10, 0, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 30, 0], | |
| 'child2': [30, 10, 0, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, -10, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 0, 40], | |
| 'child2': [30, 10, 30, 35], | |
| 'child3': [60, 5, 0, 30], | |
| 'child4': [70, 20, 0, 10], | |
| 'child5': [60, 10, 0, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 45], | |
| 'child1': [30, 5, 0, 0], | |
| 'child2': [30, 10, 30, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, 0, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| }, | |
| }, | |
| 'column-reverse': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 0, 0], | |
| 'child2': [10, 30, 0, 30], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, 0], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 595, 0], | |
| 'child2': [10, 30, 590, 30], | |
| 'child3': [5, 60, 585, 0], | |
| 'child4': [20, 70, 565, 0], | |
| 'child5': [10, 60, 555, 0], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 595, 0], | |
| 'child2': [10, 30, 590, 30], | |
| 'child3': [5, 60, 585, 0], | |
| 'child4': [20, 70, 565, 0], | |
| 'child5': [10, 60, 555, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [600, 60], | |
| 'child1': [5, 30, 0, 0], | |
| 'child2': [10, 30, 0, 30], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, 0], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| }, | |
| }, | |
| }, | |
| 'vertical-rl': { | |
| 'row': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 40, 0], | |
| 'child2': [10, 30, 35, 30], | |
| 'child3': [5, 60, 30, 0], | |
| 'child4': [20, 70, 10, 0], | |
| 'child5': [10, 60, 0, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 0, 0], | |
| 'child2': [10, 30, 0, 30], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, 0], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 40, 30], | |
| 'child2': [10, 30, 35, 0], | |
| 'child3': [5, 60, 30, 0], | |
| 'child4': [20, 70, 10, -10], | |
| 'child5': [10, 60, 0, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 0, 30], | |
| 'child2': [10, 30, 0, 0], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, -10], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| }, | |
| }, | |
| 'column': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 30, 0], | |
| 'child2': [30, 10, 0, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, -10, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 30, 45], | |
| 'child2': [30, 10, 0, 40], | |
| 'child3': [60, 5, 0, 35], | |
| 'child4': [70, 20, -10, 15], | |
| 'child5': [60, 10, 0, 5], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 30, 45], | |
| 'child2': [30, 10, 0, 40], | |
| 'child3': [60, 5, 0, 35], | |
| 'child4': [70, 20, -10, 15], | |
| 'child5': [60, 10, 0, 5], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 30, 0], | |
| 'child2': [30, 10, 0, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, -10, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| }, | |
| }, | |
| 'row-reverse': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 40, 30], | |
| 'child2': [10, 30, 35, 0], | |
| 'child3': [5, 60, 30, 0], | |
| 'child4': [20, 70, 10, -10], | |
| 'child5': [10, 60, 0, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 0, 30], | |
| 'child2': [10, 30, 0, 0], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, -10], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 40, 0], | |
| 'child2': [10, 30, 35, 30], | |
| 'child3': [5, 60, 30, 0], | |
| 'child4': [20, 70, 10, 0], | |
| 'child5': [10, 60, 0, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 0, 0], | |
| 'child2': [10, 30, 0, 30], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, 0], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| }, | |
| }, | |
| 'column-reverse': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 0, 0], | |
| 'child2': [30, 10, 30, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, 0, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 0, 45], | |
| 'child2': [30, 10, 30, 40], | |
| 'child3': [60, 5, 0, 35], | |
| 'child4': [70, 20, 0, 15], | |
| 'child5': [60, 10, 0, 5], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 0, 45], | |
| 'child2': [30, 10, 30, 40], | |
| 'child3': [60, 5, 0, 35], | |
| 'child4': [70, 20, 0, 15], | |
| 'child5': [60, 10, 0, 5], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 0, 0], | |
| 'child2': [30, 10, 30, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, 0, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| }, | |
| }, | |
| }, | |
| 'vertical-lr': { | |
| 'row': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 0, 0], | |
| 'child2': [10, 30, 0, 30], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, 0], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 40, 0], | |
| 'child2': [10, 30, 35, 30], | |
| 'child3': [5, 60, 30, 0], | |
| 'child4': [20, 70, 10, 0], | |
| 'child5': [10, 60, 0, 0], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 0, 30], | |
| 'child2': [10, 30, 0, 0], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, -10], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 40, 30], | |
| 'child2': [10, 30, 35, 0], | |
| 'child3': [5, 60, 30, 0], | |
| 'child4': [20, 70, 10, -10], | |
| 'child5': [10, 60, 0, 0], | |
| }, | |
| }, | |
| }, | |
| 'column': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 0, 0], | |
| 'child2': [30, 10, 30, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, 0, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 0, 45], | |
| 'child2': [30, 10, 30, 40], | |
| 'child3': [60, 5, 0, 35], | |
| 'child4': [70, 20, 0, 15], | |
| 'child5': [60, 10, 0, 5], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 0, 45], | |
| 'child2': [30, 10, 30, 40], | |
| 'child3': [60, 5, 0, 35], | |
| 'child4': [70, 20, 0, 15], | |
| 'child5': [60, 10, 0, 5], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 0, 0], | |
| 'child2': [30, 10, 30, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, 0, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| }, | |
| }, | |
| 'row-reverse': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 0, 30], | |
| 'child2': [10, 30, 0, 0], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, -10], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 40, 30], | |
| 'child2': [10, 30, 35, 0], | |
| 'child3': [5, 60, 30, 0], | |
| 'child4': [20, 70, 10, -10], | |
| 'child5': [10, 60, 0, 0], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 0, 0], | |
| 'child2': [10, 30, 0, 30], | |
| 'child3': [5, 60, 10, 0], | |
| 'child4': [20, 70, 15, 0], | |
| 'child5': [10, 60, 35, 0], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [45, 60], | |
| 'child1': [5, 30, 40, 0], | |
| 'child2': [10, 30, 35, 30], | |
| 'child3': [5, 60, 30, 0], | |
| 'child4': [20, 70, 10, 0], | |
| 'child5': [10, 60, 0, 0], | |
| }, | |
| }, | |
| }, | |
| 'column-reverse': { | |
| 'ltr': { | |
| 'wrap': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 30, 0], | |
| 'child2': [30, 10, 0, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, -10, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 30, 45], | |
| 'child2': [30, 10, 0, 40], | |
| 'child3': [60, 5, 0, 35], | |
| 'child4': [70, 20, -10, 15], | |
| 'child5': [60, 10, 0, 5], | |
| }, | |
| }, | |
| 'rtl': { | |
| 'wrap': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 30, 45], | |
| 'child2': [30, 10, 0, 40], | |
| 'child3': [60, 5, 0, 35], | |
| 'child4': [70, 20, -10, 15], | |
| 'child5': [60, 10, 0, 5], | |
| }, | |
| 'wrap-reverse': { | |
| 'flexbox': [60, 50], | |
| 'child1': [30, 5, 30, 0], | |
| 'child2': [30, 10, 0, 0], | |
| 'child3': [60, 5, 0, 10], | |
| 'child4': [70, 20, -10, 15], | |
| 'child5': [60, 10, 0, 35], | |
| }, | |
| }, | |
| }, | |
| }, | |
| }; | |
| function mainAxisDirection(writingMode, flexDirection) | |
| { | |
| if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1) | |
| || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1)) | |
| return 'width'; | |
| return 'height'; | |
| } | |
| function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength, expectations) | |
| { | |
| var child = document.createElement('div'); | |
| child.setAttribute('style', '-webkit-flex: 1 0 ' + preferredSize + 'px;' | |
| + crossAxis + ': ' + crossAxisLength + 'px;'); | |
| child.setAttribute("data-expected-width", expectations[0]); | |
| child.setAttribute("data-expected-height", expectations[1]); | |
| child.setAttribute("data-offset-x", expectations[2]); | |
| child.setAttribute("data-offset-y", expectations[3]); | |
| flexbox.appendChild(child); | |
| } | |
| var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr']; | |
| var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; | |
| var directions = ['ltr', 'rtl']; | |
| var wraps = ['wrap', 'wrap-reverse']; | |
| writingModes.forEach(function(writingMode) { | |
| flexDirections.forEach(function(flexDirection) { | |
| directions.forEach(function(direction) { | |
| wraps.forEach(function(wrap) { | |
| var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' ' + wrap; | |
| var title = document.createElement('div'); | |
| title.className = 'title'; | |
| title.innerHTML = flexboxClassName; | |
| document.body.appendChild(title); | |
| var mainAxis = mainAxisDirection(writingMode, flexDirection); | |
| var crossAxis = (mainAxis == 'width') ? 'height' : 'width'; | |
| var flexbox = document.createElement('div'); | |
| flexbox.className = 'flexbox ' + flexboxClassName; | |
| flexbox.setAttribute('style', mainAxis + ': 60px'); | |
| var testExpectations = expectations[writingMode][flexDirection][direction][wrap]; | |
| addChild(flexbox, mainAxis, crossAxis, 25, 5, testExpectations['child1']); | |
| addChild(flexbox, mainAxis, crossAxis, 25, 10, testExpectations['child2']); | |
| addChild(flexbox, mainAxis, crossAxis, 25, 5, testExpectations['child3']); | |
| addChild(flexbox, mainAxis, crossAxis, 70, 20, testExpectations['child4']); | |
| addChild(flexbox, mainAxis, crossAxis, 5, 10, testExpectations['child5']); | |
| flexbox.setAttribute("data-expected-width", testExpectations.flexbox[0]); | |
| flexbox.setAttribute("data-expected-height", testExpectations.flexbox[1]); | |
| document.body.appendChild(flexbox); | |
| }) | |
| }) | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |