| <!DOCTYPE html> |
| <html> |
| <style> |
| .flexbox { |
| position: relative; |
| display: flex; |
| background-color: grey; |
| max-width: 600px; |
| align-content: flex-start; |
| } |
| .title { |
| margin-top: 1em; |
| } |
| .ltr { |
| direction: ltr; |
| } |
| .rtl { |
| direction: rtl; |
| } |
| .horizontal-tb { |
| writing-mode: horizontal-tb; |
| } |
| .vertical-rl { |
| writing-mode: vertical-rl; |
| } |
| .vertical-lr { |
| writing-mode: vertical-lr; |
| } |
| .row { |
| flex-flow: row; |
| } |
| .row-reverse { |
| flex-flow: row-reverse; |
| } |
| .column { |
| flex-flow: column; |
| } |
| .column-reverse { |
| flex-flow: column-reverse; |
| } |
| .wrap { |
| flex-wrap: wrap; |
| } |
| .wrap-reverse { |
| flex-wrap: wrap-reverse; |
| } |
| .flexbox > :nth-child(1) { |
| background-color: #0f0; |
| } |
| .flexbox > :nth-child(2) { |
| background-color: #0d0; |
| } |
| .flexbox > :nth-child(3) { |
| background-color: #0b0; |
| } |
| .flexbox > :nth-child(4) { |
| background-color: #090; |
| } |
| .flexbox > :nth-child(5) { |
| background-color: #070; |
| } |
| .flexbox > :nth-child(6) { |
| background-color: #050; |
| } |
| .flexbox > :nth-child(7) { |
| background-color: #030; |
| } |
| |
| .flexbox > :nth-child(8) { |
| background-color: #00f; |
| } |
| .flexbox > :nth-child(9) { |
| background-color: #00d; |
| } |
| .flexbox > :nth-child(10) { |
| background-color: #00b; |
| } |
| .flexbox > :nth-child(11) { |
| background-color: #009; |
| } |
| .flexbox > :nth-child(12) { |
| background-color: #007; |
| } |
| .flexbox > :nth-child(13) { |
| background-color: #005; |
| } |
| .flexbox > :nth-child(14) { |
| background-color: #003; |
| } |
| </style> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/check-layout-th.js"></script> |
| <body onload="checkLayout('.flexbox')"> |
| <div id=log></div> |
| |
| <script> |
| var expectations = { |
| 'horizontal-tb': { |
| 'row': { |
| 'ltr': { |
| 'wrap': { |
| 'flexbox': [70, 60], |
| 'child1': [10, 10, 0, 0], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 20], |
| 'child4': [10, 10, 30, 5], |
| 'child5': [10, 10, 40, 5], |
| 'child6': [10, 30, 50, 0], |
| 'child7': [10, 30, 60, 0], |
| 'child8': [10, 10, 0, 30], |
| 'child9': [10, 10, 10, 40], |
| 'child10': [10, 10, 20, 50], |
| 'child11': [10, 10, 30, 35], |
| 'child12': [10, 10, 40, 35], |
| 'child13': [10, 30, 50, 30], |
| 'child14': [10, 30, 60, 30], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [70, 60], |
| 'child1': [10, 10, 0, 50], |
| 'child2': [10, 10, 10, 40], |
| 'child3': [10, 10, 20, 30], |
| 'child4': [10, 10, 30, 50], |
| 'child5': [10, 10, 40, 50], |
| 'child6': [10, 30, 50, 30], |
| 'child7': [10, 30, 60, 30], |
| 'child8': [10, 10, 0, 20], |
| 'child9': [10, 10, 10, 10], |
| 'child10': [10, 10, 20, 0], |
| 'child11': [10, 10, 30, 20], |
| 'child12': [10, 10, 40, 20], |
| 'child13': [10, 30, 50, 0], |
| 'child14': [10, 30, 60, 0], |
| }, |
| }, |
| 'rtl': { |
| 'wrap': { |
| 'flexbox': [70, 60], |
| 'child1': [10, 10, 60, 0], |
| 'child2': [10, 10, 50, 10], |
| 'child3': [10, 10, 40, 20], |
| 'child4': [10, 10, 30, 5], |
| 'child5': [10, 10, 20, 5], |
| 'child6': [10, 30, 10, 0], |
| 'child7': [10, 30, 0, 0], |
| 'child8': [10, 10, 60, 30], |
| 'child9': [10, 10, 50, 40], |
| 'child10': [10, 10, 40, 50], |
| 'child11': [10, 10, 30, 35], |
| 'child12': [10, 10, 20, 35], |
| 'child13': [10, 30, 10, 30], |
| 'child14': [10, 30, 0, 30], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [70, 60], |
| 'child1': [10, 10, 60, 50], |
| 'child2': [10, 10, 50, 40], |
| 'child3': [10, 10, 40, 30], |
| 'child4': [10, 10, 30, 50], |
| 'child5': [10, 10, 20, 50], |
| 'child6': [10, 30, 10, 30], |
| 'child7': [10, 30, 0, 30], |
| 'child8': [10, 10, 60, 20], |
| 'child9': [10, 10, 50, 10], |
| 'child10': [10, 10, 40, 0], |
| 'child11': [10, 10, 30, 20], |
| 'child12': [10, 10, 20, 20], |
| 'child13': [10, 30, 10, 0], |
| 'child14': [10, 30, 0, 0], |
| }, |
| }, |
| }, |
| 'column': { |
| 'ltr': { |
| 'wrap': { |
| 'flexbox': [600, 70], |
| 'child1': [10, 10, 0, 0], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 20], |
| 'child4': [10, 10, 0, 30], |
| 'child5': [10, 10, 5, 40], |
| 'child6': [30, 10, 0, 50], |
| 'child7': [30, 10, 0, 60], |
| 'child8': [10, 10, 30, 0], |
| 'child9': [10, 10, 40, 10], |
| 'child10': [10, 10, 50, 20], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 35, 40], |
| 'child13': [30, 10, 30, 50], |
| 'child14': [30, 10, 30, 60], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [600, 70], |
| 'child1': [10, 10, 590, 0], |
| 'child2': [10, 10, 580, 10], |
| 'child3': [10, 10, 570, 20], |
| 'child4': [10, 10, 590, 30], |
| 'child5': [10, 10, 590, 40], |
| 'child6': [30, 10, 570, 50], |
| 'child7': [30, 10, 570, 60], |
| 'child8': [10, 10, 560, 0], |
| 'child9': [10, 10, 550, 10], |
| 'child10': [10, 10, 540, 20], |
| 'child11': [10, 10, 560, 30], |
| 'child12': [10, 10, 560, 40], |
| 'child13': [30, 10, 540, 50], |
| 'child14': [30, 10, 540, 60], |
| }, |
| }, |
| 'rtl': { |
| 'wrap': { |
| 'flexbox': [600, 70], |
| 'child1': [10, 10, 590, 0], |
| 'child2': [10, 10, 580, 10], |
| 'child3': [10, 10, 570, 20], |
| 'child4': [10, 10, 590, 30], |
| 'child5': [10, 10, 585, 40], |
| 'child6': [30, 10, 570, 50], |
| 'child7': [30, 10, 570, 60], |
| 'child8': [10, 10, 560, 0], |
| 'child9': [10, 10, 550, 10], |
| 'child10': [10, 10, 540, 20], |
| 'child11': [10, 10, 560, 30], |
| 'child12': [10, 10, 555, 40], |
| 'child13': [30, 10, 540, 50], |
| 'child14': [30, 10, 540, 60], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [600, 70], |
| 'child1': [10, 10, 0, 0], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 20], |
| 'child4': [10, 10, 0, 30], |
| 'child5': [10, 10, 0, 40], |
| 'child6': [30, 10, 0, 50], |
| 'child7': [30, 10, 0, 60], |
| 'child8': [10, 10, 30, 0], |
| 'child9': [10, 10, 40, 10], |
| 'child10': [10, 10, 50, 20], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 30, 40], |
| 'child13': [30, 10, 30, 50], |
| 'child14': [30, 10, 30, 60], |
| }, |
| }, |
| }, |
| 'row-reverse': { |
| 'ltr': { |
| 'wrap': { |
| 'flexbox': [70, 60], |
| 'child1': [10, 10, 60, 0], |
| 'child2': [10, 10, 50, 10], |
| 'child3': [10, 10, 40, 20], |
| 'child4': [10, 10, 30, 5], |
| 'child5': [10, 10, 20, 5], |
| 'child6': [10, 30, 10, 0], |
| 'child7': [10, 30, 0, 0], |
| 'child8': [10, 10, 60, 30], |
| 'child9': [10, 10, 50, 40], |
| 'child10': [10, 10, 40, 50], |
| 'child11': [10, 10, 30, 35], |
| 'child12': [10, 10, 20, 35], |
| 'child13': [10, 30, 10, 30], |
| 'child14': [10, 30, 0, 30], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [70, 60], |
| 'child1': [10, 10, 60, 50], |
| 'child2': [10, 10, 50, 40], |
| 'child3': [10, 10, 40, 30], |
| 'child4': [10, 10, 30, 50], |
| 'child5': [10, 10, 20, 50], |
| 'child6': [10, 30, 10, 30], |
| 'child7': [10, 30, 0, 30], |
| 'child8': [10, 10, 60, 20], |
| 'child9': [10, 10, 50, 10], |
| 'child10': [10, 10, 40, 0], |
| 'child11': [10, 10, 30, 20], |
| 'child12': [10, 10, 20, 20], |
| 'child13': [10, 30, 10, 0], |
| 'child14': [10, 30, 0, 0], |
| }, |
| }, |
| 'rtl': { |
| 'wrap': { |
| 'flexbox': [70, 60], |
| 'child1': [10, 10, 0, 0], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 20], |
| 'child4': [10, 10, 30, 5], |
| 'child5': [10, 10, 40, 5], |
| 'child6': [10, 30, 50, 0], |
| 'child7': [10, 30, 60, 0], |
| 'child8': [10, 10, 0, 30], |
| 'child9': [10, 10, 10, 40], |
| 'child10': [10, 10, 20, 50], |
| 'child11': [10, 10, 30, 35], |
| 'child12': [10, 10, 40, 35], |
| 'child13': [10, 30, 50, 30], |
| 'child14': [10, 30, 60, 30], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [70, 60], |
| 'child1': [10, 10, 0, 50], |
| 'child2': [10, 10, 10, 40], |
| 'child3': [10, 10, 20, 30], |
| 'child4': [10, 10, 30, 50], |
| 'child5': [10, 10, 40, 50], |
| 'child6': [10, 30, 50, 30], |
| 'child7': [10, 30, 60, 30], |
| 'child8': [10, 10, 0, 20], |
| 'child9': [10, 10, 10, 10], |
| 'child10': [10, 10, 20, 0], |
| 'child11': [10, 10, 30, 20], |
| 'child12': [10, 10, 40, 20], |
| 'child13': [10, 30, 50, 0], |
| 'child14': [10, 30, 60, 0], |
| }, |
| }, |
| }, |
| 'column-reverse': { |
| 'ltr': { |
| 'wrap': { |
| 'flexbox': [600, 70], |
| 'child1': [10, 10, 0, 60], |
| 'child2': [10, 10, 10, 50], |
| 'child3': [10, 10, 20, 40], |
| 'child4': [10, 10, 0, 30], |
| 'child5': [10, 10, 5, 20], |
| 'child6': [30, 10, 0, 10], |
| 'child7': [30, 10, 0, 0], |
| 'child8': [10, 10, 30, 60], |
| 'child9': [10, 10, 40, 50], |
| 'child10': [10, 10, 50, 40], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 35, 20], |
| 'child13': [30, 10, 30, 10], |
| 'child14': [30, 10, 30, 0], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [600, 70], |
| 'child1': [10, 10, 590, 60], |
| 'child2': [10, 10, 580, 50], |
| 'child3': [10, 10, 570, 40], |
| 'child4': [10, 10, 590, 30], |
| 'child5': [10, 10, 590, 20], |
| 'child6': [30, 10, 570, 10], |
| 'child7': [30, 10, 570, 0], |
| 'child8': [10, 10, 560, 60], |
| 'child9': [10, 10, 550, 50], |
| 'child10': [10, 10, 540, 40], |
| 'child11': [10, 10, 560, 30], |
| 'child12': [10, 10, 560, 20], |
| 'child13': [30, 10, 540, 10], |
| 'child14': [30, 10, 540, 0], |
| }, |
| }, |
| 'rtl': { |
| 'wrap': { |
| 'flexbox': [600, 70], |
| 'child1': [10, 10, 590, 60], |
| 'child2': [10, 10, 580, 50], |
| 'child3': [10, 10, 570, 40], |
| 'child4': [10, 10, 590, 30], |
| 'child5': [10, 10, 585, 20], |
| 'child6': [30, 10, 570, 10], |
| 'child7': [30, 10, 570, 0], |
| 'child8': [10, 10, 560, 60], |
| 'child9': [10, 10, 550, 50], |
| 'child10': [10, 10, 540, 40], |
| 'child11': [10, 10, 560, 30], |
| 'child12': [10, 10, 555, 20], |
| 'child13': [30, 10, 540, 10], |
| 'child14': [30, 10, 540, 0], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [600, 70], |
| 'child1': [10, 10, 0, 60], |
| 'child2': [10, 10, 10, 50], |
| 'child3': [10, 10, 20, 40], |
| 'child4': [10, 10, 0, 30], |
| 'child5': [10, 10, 0, 20], |
| 'child6': [30, 10, 0, 10], |
| 'child7': [30, 10, 0, 0], |
| 'child8': [10, 10, 30, 60], |
| 'child9': [10, 10, 40, 50], |
| 'child10': [10, 10, 50, 40], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 30, 20], |
| 'child13': [30, 10, 30, 10], |
| 'child14': [30, 10, 30, 0], |
| }, |
| }, |
| }, |
| }, |
| 'vertical-rl': { |
| 'row': { |
| 'ltr': { |
| 'wrap': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 50, 0], |
| 'child2': [10, 10, 40, 10], |
| 'child3': [10, 10, 30, 20], |
| 'child4': [10, 10, 45, 30], |
| 'child5': [10, 10, 45, 40], |
| 'child6': [30, 10, 30, 50], |
| 'child7': [30, 10, 30, 60], |
| 'child8': [10, 10, 20, 0], |
| 'child9': [10, 10, 10, 10], |
| 'child10': [10, 10, 0, 20], |
| 'child11': [10, 10, 15, 30], |
| 'child12': [10, 10, 15, 40], |
| 'child13': [30, 10, 0, 50], |
| 'child14': [30, 10, 0, 60], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 0, 0], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 20], |
| 'child4': [10, 10, 0, 30], |
| 'child5': [10, 10, 0, 40], |
| 'child6': [30, 10, 0, 50], |
| 'child7': [30, 10, 0, 60], |
| 'child8': [10, 10, 30, 0], |
| 'child9': [10, 10, 40, 10], |
| 'child10': [10, 10, 50, 20], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 30, 40], |
| 'child13': [30, 10, 30, 50], |
| 'child14': [30, 10, 30, 60], |
| }, |
| }, |
| 'rtl': { |
| 'wrap': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 50, 60], |
| 'child2': [10, 10, 40, 50], |
| 'child3': [10, 10, 30, 40], |
| 'child4': [10, 10, 45, 30], |
| 'child5': [10, 10, 45, 20], |
| 'child6': [30, 10, 30, 10], |
| 'child7': [30, 10, 30, 0], |
| 'child8': [10, 10, 20, 60], |
| 'child9': [10, 10, 10, 50], |
| 'child10': [10, 10, 0, 40], |
| 'child11': [10, 10, 15, 30], |
| 'child12': [10, 10, 15, 20], |
| 'child13': [30, 10, 0, 10], |
| 'child14': [30, 10, 0, 0], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 0, 60], |
| 'child2': [10, 10, 10, 50], |
| 'child3': [10, 10, 20, 40], |
| 'child4': [10, 10, 0, 30], |
| 'child5': [10, 10, 0, 20], |
| 'child6': [30, 10, 0, 10], |
| 'child7': [30, 10, 0, 0], |
| 'child8': [10, 10, 30, 60], |
| 'child9': [10, 10, 40, 50], |
| 'child10': [10, 10, 50, 40], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 30, 20], |
| 'child13': [30, 10, 30, 10], |
| 'child14': [30, 10, 30, 0], |
| }, |
| }, |
| }, |
| 'column': { |
| 'ltr': { |
| 'wrap': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 60, 0], |
| 'child2': [10, 10, 50, 10], |
| 'child3': [10, 10, 40, 20], |
| 'child4': [10, 10, 30, 0], |
| 'child5': [10, 10, 20, 5], |
| 'child6': [10, 30, 10, 0], |
| 'child7': [10, 30, 0, 0], |
| 'child8': [10, 10, 60, 30], |
| 'child9': [10, 10, 50, 40], |
| 'child10': [10, 10, 40, 50], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 20, 35], |
| 'child13': [10, 30, 10, 30], |
| 'child14': [10, 30, 0, 30], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 60, 20], |
| 'child2': [10, 10, 50, 10], |
| 'child3': [10, 10, 40, 0], |
| 'child4': [10, 10, 30, 20], |
| 'child5': [10, 10, 20, 20], |
| 'child6': [10, 30, 10, 0], |
| 'child7': [10, 30, 0, 0], |
| 'child8': [10, 10, 60, -10], |
| 'child9': [10, 10, 50, -20], |
| 'child10': [10, 10, 40, -30], |
| 'child11': [10, 10, 30, -10], |
| 'child12': [10, 10, 20, -10], |
| 'child13': [10, 30, 10, -30], |
| 'child14': [10, 30, 0, -30], |
| }, |
| }, |
| 'rtl': { |
| 'wrap': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 60, 20], |
| 'child2': [10, 10, 50, 10], |
| 'child3': [10, 10, 40, 0], |
| 'child4': [10, 10, 30, 20], |
| 'child5': [10, 10, 20, 15], |
| 'child6': [10, 30, 10, 0], |
| 'child7': [10, 30, 0, 0], |
| 'child8': [10, 10, 60, -10], |
| 'child9': [10, 10, 50, -20], |
| 'child10': [10, 10, 40, -30], |
| 'child11': [10, 10, 30, -10], |
| 'child12': [10, 10, 20, -15], |
| 'child13': [10, 30, 10, -30], |
| 'child14': [10, 30, 0, -30], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 60, 0], |
| 'child2': [10, 10, 50, 10], |
| 'child3': [10, 10, 40, 20], |
| 'child4': [10, 10, 30, 0], |
| 'child5': [10, 10, 20, 0], |
| 'child6': [10, 30, 10, 0], |
| 'child7': [10, 30, 0, 0], |
| 'child8': [10, 10, 60, 30], |
| 'child9': [10, 10, 50, 40], |
| 'child10': [10, 10, 40, 50], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 20, 30], |
| 'child13': [10, 30, 10, 30], |
| 'child14': [10, 30, 0, 30], |
| }, |
| }, |
| }, |
| 'row-reverse': { |
| 'ltr': { |
| 'wrap': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 50, 60], |
| 'child2': [10, 10, 40, 50], |
| 'child3': [10, 10, 30, 40], |
| 'child4': [10, 10, 45, 30], |
| 'child5': [10, 10, 45, 20], |
| 'child6': [30, 10, 30, 10], |
| 'child7': [30, 10, 30, 0], |
| 'child8': [10, 10, 20, 60], |
| 'child9': [10, 10, 10, 50], |
| 'child10': [10, 10, 0, 40], |
| 'child11': [10, 10, 15, 30], |
| 'child12': [10, 10, 15, 20], |
| 'child13': [30, 10, 0, 10], |
| 'child14': [30, 10, 0, 0], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 0, 60], |
| 'child2': [10, 10, 10, 50], |
| 'child3': [10, 10, 20, 40], |
| 'child4': [10, 10, 0, 30], |
| 'child5': [10, 10, 0, 20], |
| 'child6': [30, 10, 0, 10], |
| 'child7': [30, 10, 0, 0], |
| 'child8': [10, 10, 30, 60], |
| 'child9': [10, 10, 40, 50], |
| 'child10': [10, 10, 50, 40], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 30, 20], |
| 'child13': [30, 10, 30, 10], |
| 'child14': [30, 10, 30, 0], |
| }, |
| }, |
| 'rtl': { |
| 'wrap': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 50, 0], |
| 'child2': [10, 10, 40, 10], |
| 'child3': [10, 10, 30, 20], |
| 'child4': [10, 10, 45, 30], |
| 'child5': [10, 10, 45, 40], |
| 'child6': [30, 10, 30, 50], |
| 'child7': [30, 10, 30, 60], |
| 'child8': [10, 10, 20, 0], |
| 'child9': [10, 10, 10, 10], |
| 'child10': [10, 10, 0, 20], |
| 'child11': [10, 10, 15, 30], |
| 'child12': [10, 10, 15, 40], |
| 'child13': [30, 10, 0, 50], |
| 'child14': [30, 10, 0, 60], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 0, 0], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 20], |
| 'child4': [10, 10, 0, 30], |
| 'child5': [10, 10, 0, 40], |
| 'child6': [30, 10, 0, 50], |
| 'child7': [30, 10, 0, 60], |
| 'child8': [10, 10, 30, 0], |
| 'child9': [10, 10, 40, 10], |
| 'child10': [10, 10, 50, 20], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 30, 40], |
| 'child13': [30, 10, 30, 50], |
| 'child14': [30, 10, 30, 60], |
| }, |
| }, |
| }, |
| 'column-reverse': { |
| 'ltr': { |
| 'wrap': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 0, 0], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 20], |
| 'child4': [10, 10, 30, 0], |
| 'child5': [10, 10, 40, 5], |
| 'child6': [10, 30, 50, 0], |
| 'child7': [10, 30, 60, 0], |
| 'child8': [10, 10, 0, 30], |
| 'child9': [10, 10, 10, 40], |
| 'child10': [10, 10, 20, 50], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 40, 35], |
| 'child13': [10, 30, 50, 30], |
| 'child14': [10, 30, 60, 30], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 0, 20], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 0], |
| 'child4': [10, 10, 30, 20], |
| 'child5': [10, 10, 40, 20], |
| 'child6': [10, 30, 50, 0], |
| 'child7': [10, 30, 60, 0], |
| 'child8': [10, 10, 0, -10], |
| 'child9': [10, 10, 10, -20], |
| 'child10': [10, 10, 20, -30], |
| 'child11': [10, 10, 30, -10], |
| 'child12': [10, 10, 40, -10], |
| 'child13': [10, 30, 50, -30], |
| 'child14': [10, 30, 60, -30], |
| }, |
| }, |
| 'rtl': { |
| 'wrap': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 0, 20], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 0], |
| 'child4': [10, 10, 30, 20], |
| 'child5': [10, 10, 40, 15], |
| 'child6': [10, 30, 50, 0], |
| 'child7': [10, 30, 60, 0], |
| 'child8': [10, 10, 0, -10], |
| 'child9': [10, 10, 10, -20], |
| 'child10': [10, 10, 20, -30], |
| 'child11': [10, 10, 30, -10], |
| 'child12': [10, 10, 40, -15], |
| 'child13': [10, 30, 50, -30], |
| 'child14': [10, 30, 60, -30], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 0, 0], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 20], |
| 'child4': [10, 10, 30, 0], |
| 'child5': [10, 10, 40, 0], |
| 'child6': [10, 30, 50, 0], |
| 'child7': [10, 30, 60, 0], |
| 'child8': [10, 10, 0, 30], |
| 'child9': [10, 10, 10, 40], |
| 'child10': [10, 10, 20, 50], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 40, 30], |
| 'child13': [10, 30, 50, 30], |
| 'child14': [10, 30, 60, 30], |
| }, |
| }, |
| }, |
| }, |
| 'vertical-lr': { |
| 'row': { |
| 'ltr': { |
| 'wrap': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 0, 0], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 20], |
| 'child4': [10, 10, 5, 30], |
| 'child5': [10, 10, 5, 40], |
| 'child6': [30, 10, 0, 50], |
| 'child7': [30, 10, 0, 60], |
| 'child8': [10, 10, 30, 0], |
| 'child9': [10, 10, 40, 10], |
| 'child10': [10, 10, 50, 20], |
| 'child11': [10, 10, 35, 30], |
| 'child12': [10, 10, 35, 40], |
| 'child13': [30, 10, 30, 50], |
| 'child14': [30, 10, 30, 60], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 50, 0], |
| 'child2': [10, 10, 40, 10], |
| 'child3': [10, 10, 30, 20], |
| 'child4': [10, 10, 50, 30], |
| 'child5': [10, 10, 50, 40], |
| 'child6': [30, 10, 30, 50], |
| 'child7': [30, 10, 30, 60], |
| 'child8': [10, 10, 20, 0], |
| 'child9': [10, 10, 10, 10], |
| 'child10': [10, 10, 0, 20], |
| 'child11': [10, 10, 20, 30], |
| 'child12': [10, 10, 20, 40], |
| 'child13': [30, 10, 0, 50], |
| 'child14': [30, 10, 0, 60], |
| }, |
| }, |
| 'rtl': { |
| 'wrap': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 0, 60], |
| 'child2': [10, 10, 10, 50], |
| 'child3': [10, 10, 20, 40], |
| 'child4': [10, 10, 5, 30], |
| 'child5': [10, 10, 5, 20], |
| 'child6': [30, 10, 0, 10], |
| 'child7': [30, 10, 0, 0], |
| 'child8': [10, 10, 30, 60], |
| 'child9': [10, 10, 40, 50], |
| 'child10': [10, 10, 50, 40], |
| 'child11': [10, 10, 35, 30], |
| 'child12': [10, 10, 35, 20], |
| 'child13': [30, 10, 30, 10], |
| 'child14': [30, 10, 30, 0], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 50, 60], |
| 'child2': [10, 10, 40, 50], |
| 'child3': [10, 10, 30, 40], |
| 'child4': [10, 10, 50, 30], |
| 'child5': [10, 10, 50, 20], |
| 'child6': [30, 10, 30, 10], |
| 'child7': [30, 10, 30, 0], |
| 'child8': [10, 10, 20, 60], |
| 'child9': [10, 10, 10, 50], |
| 'child10': [10, 10, 0, 40], |
| 'child11': [10, 10, 20, 30], |
| 'child12': [10, 10, 20, 20], |
| 'child13': [30, 10, 0, 10], |
| 'child14': [30, 10, 0, 0], |
| }, |
| }, |
| }, |
| 'column': { |
| 'ltr': { |
| 'wrap': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 0, 0], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 20], |
| 'child4': [10, 10, 30, 0], |
| 'child5': [10, 10, 40, 5], |
| 'child6': [10, 30, 50, 0], |
| 'child7': [10, 30, 60, 0], |
| 'child8': [10, 10, 0, 30], |
| 'child9': [10, 10, 10, 40], |
| 'child10': [10, 10, 20, 50], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 40, 35], |
| 'child13': [10, 30, 50, 30], |
| 'child14': [10, 30, 60, 30], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 0, 20], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 0], |
| 'child4': [10, 10, 30, 20], |
| 'child5': [10, 10, 40, 20], |
| 'child6': [10, 30, 50, 0], |
| 'child7': [10, 30, 60, 0], |
| 'child8': [10, 10, 0, -10], |
| 'child9': [10, 10, 10, -20], |
| 'child10': [10, 10, 20, -30], |
| 'child11': [10, 10, 30, -10], |
| 'child12': [10, 10, 40, -10], |
| 'child13': [10, 30, 50, -30], |
| 'child14': [10, 30, 60, -30], |
| }, |
| }, |
| 'rtl': { |
| 'wrap': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 0, 20], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 0], |
| 'child4': [10, 10, 30, 20], |
| 'child5': [10, 10, 40, 15], |
| 'child6': [10, 30, 50, 0], |
| 'child7': [10, 30, 60, 0], |
| 'child8': [10, 10, 0, -10], |
| 'child9': [10, 10, 10, -20], |
| 'child10': [10, 10, 20, -30], |
| 'child11': [10, 10, 30, -10], |
| 'child12': [10, 10, 40, -15], |
| 'child13': [10, 30, 50, -30], |
| 'child14': [10, 30, 60, -30], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 0, 0], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 20], |
| 'child4': [10, 10, 30, 0], |
| 'child5': [10, 10, 40, 0], |
| 'child6': [10, 30, 50, 0], |
| 'child7': [10, 30, 60, 0], |
| 'child8': [10, 10, 0, 30], |
| 'child9': [10, 10, 10, 40], |
| 'child10': [10, 10, 20, 50], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 40, 30], |
| 'child13': [10, 30, 50, 30], |
| 'child14': [10, 30, 60, 30], |
| }, |
| }, |
| }, |
| 'row-reverse': { |
| 'ltr': { |
| 'wrap': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 0, 60], |
| 'child2': [10, 10, 10, 50], |
| 'child3': [10, 10, 20, 40], |
| 'child4': [10, 10, 5, 30], |
| 'child5': [10, 10, 5, 20], |
| 'child6': [30, 10, 0, 10], |
| 'child7': [30, 10, 0, 0], |
| 'child8': [10, 10, 30, 60], |
| 'child9': [10, 10, 40, 50], |
| 'child10': [10, 10, 50, 40], |
| 'child11': [10, 10, 35, 30], |
| 'child12': [10, 10, 35, 20], |
| 'child13': [30, 10, 30, 10], |
| 'child14': [30, 10, 30, 0], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 50, 60], |
| 'child2': [10, 10, 40, 50], |
| 'child3': [10, 10, 30, 40], |
| 'child4': [10, 10, 50, 30], |
| 'child5': [10, 10, 50, 20], |
| 'child6': [30, 10, 30, 10], |
| 'child7': [30, 10, 30, 0], |
| 'child8': [10, 10, 20, 60], |
| 'child9': [10, 10, 10, 50], |
| 'child10': [10, 10, 0, 40], |
| 'child11': [10, 10, 20, 30], |
| 'child12': [10, 10, 20, 20], |
| 'child13': [30, 10, 0, 10], |
| 'child14': [30, 10, 0, 0], |
| }, |
| }, |
| 'rtl': { |
| 'wrap': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 0, 0], |
| 'child2': [10, 10, 10, 10], |
| 'child3': [10, 10, 20, 20], |
| 'child4': [10, 10, 5, 30], |
| 'child5': [10, 10, 5, 40], |
| 'child6': [30, 10, 0, 50], |
| 'child7': [30, 10, 0, 60], |
| 'child8': [10, 10, 30, 0], |
| 'child9': [10, 10, 40, 10], |
| 'child10': [10, 10, 50, 20], |
| 'child11': [10, 10, 35, 30], |
| 'child12': [10, 10, 35, 40], |
| 'child13': [30, 10, 30, 50], |
| 'child14': [30, 10, 30, 60], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [60, 70], |
| 'child1': [10, 10, 50, 0], |
| 'child2': [10, 10, 40, 10], |
| 'child3': [10, 10, 30, 20], |
| 'child4': [10, 10, 50, 30], |
| 'child5': [10, 10, 50, 40], |
| 'child6': [30, 10, 30, 50], |
| 'child7': [30, 10, 30, 60], |
| 'child8': [10, 10, 20, 0], |
| 'child9': [10, 10, 10, 10], |
| 'child10': [10, 10, 0, 20], |
| 'child11': [10, 10, 20, 30], |
| 'child12': [10, 10, 20, 40], |
| 'child13': [30, 10, 0, 50], |
| 'child14': [30, 10, 0, 60], |
| }, |
| }, |
| }, |
| 'column-reverse': { |
| 'ltr': { |
| 'wrap': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 60, 0], |
| 'child2': [10, 10, 50, 10], |
| 'child3': [10, 10, 40, 20], |
| 'child4': [10, 10, 30, 0], |
| 'child5': [10, 10, 20, 5], |
| 'child6': [10, 30, 10, 0], |
| 'child7': [10, 30, 0, 0], |
| 'child8': [10, 10, 60, 30], |
| 'child9': [10, 10, 50, 40], |
| 'child10': [10, 10, 40, 50], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 20, 35], |
| 'child13': [10, 30, 10, 30], |
| 'child14': [10, 30, 0, 30], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 60, 20], |
| 'child2': [10, 10, 50, 10], |
| 'child3': [10, 10, 40, 0], |
| 'child4': [10, 10, 30, 20], |
| 'child5': [10, 10, 20, 20], |
| 'child6': [10, 30, 10, 0], |
| 'child7': [10, 30, 0, 0], |
| 'child8': [10, 10, 60, -10], |
| 'child9': [10, 10, 50, -20], |
| 'child10': [10, 10, 40, -30], |
| 'child11': [10, 10, 30, -10], |
| 'child12': [10, 10, 20, -10], |
| 'child13': [10, 30, 10, -30], |
| 'child14': [10, 30, 0, -30], |
| }, |
| }, |
| 'rtl': { |
| 'wrap': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 60, 20], |
| 'child2': [10, 10, 50, 10], |
| 'child3': [10, 10, 40, 0], |
| 'child4': [10, 10, 30, 20], |
| 'child5': [10, 10, 20, 15], |
| 'child6': [10, 30, 10, 0], |
| 'child7': [10, 30, 0, 0], |
| 'child8': [10, 10, 60, -10], |
| 'child9': [10, 10, 50, -20], |
| 'child10': [10, 10, 40, -30], |
| 'child11': [10, 10, 30, -10], |
| 'child12': [10, 10, 20, -15], |
| 'child13': [10, 30, 10, -30], |
| 'child14': [10, 30, 0, -30], |
| }, |
| 'wrap-reverse': { |
| 'flexbox': [70, 30], |
| 'child1': [10, 10, 60, 0], |
| 'child2': [10, 10, 50, 10], |
| 'child3': [10, 10, 40, 20], |
| 'child4': [10, 10, 30, 0], |
| 'child5': [10, 10, 20, 0], |
| 'child6': [10, 30, 10, 0], |
| 'child7': [10, 30, 0, 0], |
| 'child8': [10, 10, 60, 30], |
| 'child9': [10, 10, 50, 40], |
| 'child10': [10, 10, 40, 50], |
| 'child11': [10, 10, 30, 30], |
| 'child12': [10, 10, 20, 30], |
| 'child13': [10, 30, 10, 30], |
| 'child14': [10, 30, 0, 30], |
| }, |
| }, |
| }, |
| }, |
| }; |
| |
| 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, alignment, expectations) |
| { |
| var child = document.createElement('div'); |
| child.setAttribute('style', 'flex: 1 ' + preferredSize + 'px;' |
| + crossAxis + ': ' + crossAxisLength + ';' |
| + 'align-self: ' + alignment); |
| |
| 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', '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 + ': 70px'); |
| |
| var baselineMargin = (flexDirection.indexOf('row') != -1) ? 'margin-block-start: 5px;' : 'margin-inline-start: 5px;'; |
| |
| var testExpectations = expectations[writingMode][flexDirection][direction][wrap]; |
| addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'flex-start', testExpectations['child1']); |
| addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'center', testExpectations['child2']); |
| addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'flex-end', testExpectations['child3']); |
| addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline', testExpectations['child4']); |
| addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline; ' + baselineMargin, testExpectations['child5']); |
| addChild(flexbox, mainAxis, crossAxis, 10, 'auto', 'stretch', testExpectations['child6']); |
| addChild(flexbox, mainAxis, crossAxis, 10, '30px', 'flex-start', testExpectations['child7']); |
| |
| addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'flex-start', testExpectations['child8']); |
| addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'center', testExpectations['child9']); |
| addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'flex-end', testExpectations['child10']); |
| addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline', testExpectations['child11']); |
| addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline; ' + baselineMargin, testExpectations['child12']); |
| addChild(flexbox, mainAxis, crossAxis, 10, 'auto', 'stretch', testExpectations['child13']); |
| addChild(flexbox, mainAxis, crossAxis, 10, '30px', 'flex-start', testExpectations['child14']); |
| |
| flexbox.setAttribute("data-expected-width", testExpectations.flexbox[0]); |
| flexbox.setAttribute("data-expected-height", testExpectations.flexbox[1]); |
| |
| document.body.appendChild(flexbox); |
| }) |
| }) |
| }) |
| }) |
| </script> |
| </body> |
| </html> |
