| <!DOCTYPE html> |
| <html> |
| <style> |
| body { |
| width: 500px; |
| height: 500px; |
| margin: 0; |
| border: 1px solid; |
| } |
| .column { |
| flex-flow: column; |
| } |
| .flexbox { |
| display: flex; |
| background-color: gray; |
| position: relative; |
| } |
| .flexbox > div { |
| line-height: 0px; |
| } |
| .flexbox > div > div { |
| display: inline-block; |
| line-height: 0px; |
| } |
| .horizontal-tb { |
| writing-mode: horizontal-tb; |
| } |
| .vertical-rl { |
| writing-mode: vertical-rl; |
| -webkit-text-orientation: sideways-right; |
| } |
| .vertical-lr { |
| writing-mode: vertical-lr; |
| -webkit-text-orientation: sideways-right; |
| } |
| |
| .horizontal-tb.row, .horizontal-tb.fixed.column { |
| height: 100px; |
| } |
| .vertical-lr.row, .vertical-rl.row, .vertical-lr.fixed.column, .vertical-rl.fixed.column { |
| width: 100px; |
| } |
| |
| .horizontal-tb.row > div { |
| flex: 1; |
| } |
| .vertical-lr.row > div, .vertical-rl.row > div { |
| flex: 1; |
| } |
| |
| .horizontal-tb.column > div { |
| flex: 1 auto; |
| } |
| .vertical-lr.column > div, .vertical-rl.column > div { |
| flex: 1 auto; |
| } |
| |
| .horizontal-tb.fixed { |
| width: 200px; |
| } |
| .vertical-lr.fixed, .vertical-rl.fixed { |
| height: 200px; |
| } |
| |
| .horizontal-tb.flexbox > div > div { |
| height: 20px; |
| } |
| .vertical-lr.flexbox > div > div, .vertical-rl.flexbox > div > div { |
| width: 20px; |
| } |
| |
| .horizontal-tb.fixed > div > div { |
| width: 40px; |
| } |
| .vertical-lr.fixed > div > div, .vertical-rl.fixed > div > div { |
| height: 40px; |
| } |
| |
| .horizontal-tb.auto > div > div { |
| width: 100px; |
| } |
| .vertical-lr.auto > div > div, .vertical-rl.auto > div > div { |
| height: 100px; |
| } |
| |
| .flexbox > :nth-child(1) { |
| background-color: lightblue; |
| } |
| .flexbox > :nth-child(2) { |
| background-color: pink; |
| } |
| .flexbox > div > :nth-child(1) { |
| background-color: blue; |
| } |
| .flexbox > div > :nth-child(2) { |
| background-color: green; |
| } |
| .flexbox > div > :nth-child(3) { |
| background-color: red; |
| } |
| .flexbox > div > :nth-child(4) { |
| background-color: yellow; |
| } |
| .flexbox > div > :nth-child(5) { |
| background-color: purple; |
| } |
| .flexbox > div > :nth-child(6) { |
| background-color: orange; |
| } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| <body onload="checkLayout('.flexbox')"> |
| |
| <div class="flexbox fixed row horizontal-tb"> |
| <div data-expected-width=100 data-expected-height=100> |
| <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div> |
| </div> |
| <div data-expected-width=100 data-expected-height=40 style="align-self: flex-start;"> |
| <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=100></div> |
| </div> |
| </div> |
| |
| <div class="flexbox fixed column horizontal-tb"> |
| <div data-expected-width=200 data-expected-height=50> |
| <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div> |
| </div> |
| <div data-expected-width=200 data-expected-height=50 style="align-self: flex-start;"> |
| <div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=70 data-offset-x=0></div> |
| </div> |
| </div> |
| |
| <div class="flexbox fixed column horizontal-tb"> |
| <div data-expected-width=200 data-expected-height=50> |
| <div data-offset-y=0></div><div data-offset-y=0></div> |
| </div> |
| <div data-expected-width=80 data-expected-height=50 style="align-self: flex-start;"> |
| <div data-offset-y=50></div><div data-offset-y=50></div> |
| </div> |
| </div> |
| |
| <div class="flexbox auto row horizontal-tb" data-expected-width=500> |
| <div data-expected-width=250 data-expected-height=100> |
| <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div> |
| </div> |
| <div data-expected-width=250 data-expected-height=40 style="align-self: flex-start;"> |
| <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=250></div> |
| </div> |
| </div> |
| |
| <div data-expected-width=500 data-expected-height=80 class="flexbox auto column horizontal-tb"> |
| <div data-expected-width=500 data-expected-height=40> |
| <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div> |
| </div> |
| <div data-expected-width=500 data-expected-height=40 style="align-self: flex-start;"> |
| <div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=60 data-offset-x=0></div> |
| </div> |
| </div> |
| |
| <div class="flexbox fixed row vertical-lr"> |
| <div data-expected-height data-expected-width=100> |
| <div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=20 data-offset-y=0></div> |
| </div> |
| <div data-expected-height=100 data-expected-width=40 style="align-self: flex-start;"> |
| <div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=20 data-offset-y=100></div> |
| </div> |
| </div> |
| |
| <div class="flexbox fixed column vertical-lr"> |
| <div data-expected-height=200 data-expected-width=50> |
| <div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=20 data-offset-y=0></div> |
| </div> |
| <div data-expected-height=200 data-expected-width=50 style="align-self: flex-start;"> |
| <div data-offset-x=50></div><div data-offset-x=50></div><div data-offset-x=50></div><div data-offset-x=50></div><div data-offset-x=50></div><div data-offset-x=70 data-offset-y=0></div> |
| </div> |
| </div> |
| |
| <div class="flexbox fixed column vertical-lr"> |
| <div data-expected-height=200 data-expected-width=50> |
| <div data-offset-x=0></div><div data-offset-x=0></div> |
| </div> |
| <div data-expected-height=80 data-expected-width=50 style="align-self: flex-start;"> |
| <div data-offset-x=50></div><div data-offset-x=50></div> |
| </div> |
| </div> |
| |
| <div class="flexbox auto row vertical-lr" data-expected-height=500> |
| <div data-expected-height=250 data-expected-width=100> |
| <div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=20 data-offset-y=0></div> |
| </div> |
| <div data-expected-height=250 data-expected-width=40 style="align-self: flex-start;"> |
| <div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=20 data-offset-y=250></div> |
| </div> |
| </div> |
| |
| <div data-expected-height=500 data-expected-width=80 class="flexbox auto column vertical-lr"> |
| <div data-expected-height=500 data-expected-width=40> |
| <div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=20 data-offset-y=0></div> |
| </div> |
| <div data-expected-height=500 data-expected-width=40 style="align-self: flex-start;"> |
| <div data-offset-x=40></div><div data-offset-x=40></div><div data-offset-x=40></div><div data-offset-x=40></div><div data-offset-x=40></div><div data-offset-x=60 data-offset-y=0></div> |
| </div> |
| </div> |
| |
| |
| <div class="flexbox fixed row vertical-rl"> |
| <div data-expected-height=100 data-expected-width=100> |
| <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div> |
| </div> |
| <div data-expected-height=100 data-expected-width=40 style="align-self: flex-start;"> |
| <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=100></div> |
| </div> |
| </div> |
| |
| <div class="flexbox fixed column vertical-rl"> |
| <div data-expected-height=200 data-expected-width=50> |
| <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div> |
| </div> |
| <div data-expected-height=200 data-expected-width=50 style="align-self: flex-start;"> |
| <div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=10 data-offset-y=0></div> |
| </div> |
| </div> |
| |
| <div class="flexbox fixed column vertical-rl"> |
| <div data-expected-height=200 data-expected-width=50> |
| <div data-offset-x=80></div><div data-offset-x=80></div> |
| </div> |
| <div data-expected-height=80 data-expected-width=50 style="align-self: flex-start;"> |
| <div data-offset-x=30></div><div data-offset-x=30></div> |
| </div> |
| </div> |
| |
| <div class="flexbox auto row vertical-rl" data-expected-height=500> |
| <div data-expected-height=250 data-expected-width=100> |
| <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div> |
| </div> |
| <div data-expected-height=250 data-expected-width=40 style="align-self: flex-start;"> |
| <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=250></div> |
| </div> |
| </div> |
| |
| <div data-expected-height=500 data-expected-width=80 class="flexbox auto column vertical-rl"> |
| <div data-expected-height=500 data-expected-width=40> |
| <div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=40 data-offset-y=0></div> |
| </div> |
| <div data-expected-height=500 data-expected-width=40 style="align-self: flex-start;"> |
| <div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=0 data-offset-y=0></div> |
| </div> |
| </div> |
| |
| </body> |
| </html> |