| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| div { |
| outline: 1px solid black; |
| background: hsla(210,100%,90%, .8); |
| padding: 5px; |
| margin: 5px; |
| } |
| |
| .flexbox { |
| display: flex; |
| } |
| |
| .row { |
| flex-direction: row; |
| } |
| |
| .column { |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .flex { |
| flex: 1 0 auto; |
| } |
| </style> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/check-layout-th.js"></script> |
| </head> |
| <body onload="checkLayout('.flexbox')"> |
| <div id=log></div> |
| There should be two boxes of equal height on the left and 3 boxes of equal |
| height on the right. |
| <div class="flexbox row" style="width: 600px"> |
| <div data-expected-width=290 data-expected-height=220 class="column flex"> |
| <div data-expected-width=270 data-expected-height=95 class="flex"></div> |
| <div data-expected-width=270 data-expected-height=95 class="flex"></div> |
| </div> |
| <div data-expected-width=290 data-expected-height=220 class="column flex"> |
| <div data-expected-width=270 data-expected-height=60 class="flex" style="height: 50px;"></div> |
| <div data-expected-width=270 data-expected-height=60 class="flex" style="height: 50px;"></div> |
| <div data-expected-width=270 data-expected-height=60 class="flex" style="height: 50px;"></div> |
| </div> |
| </div> |
| |
| None of the boxes should overflow and the inner most boxes should be end aligned. |
| <div class="flexbox column" style="width: 600px; height: 300px; position: relative;"> |
| <div data-expected-width=590 data-expected-height=250 class="column flex" style="justify-content: flex-end"> |
| <div data-offset-y="180" data-expected-width=570 data-expected-height=30 style="height: 20px; flex: none;"></div> |
| <div data-offset-y="220" data-expected-width=570 data-expected-height=30 style="height: 20px; flex: none;"></div> |
| </div> |
| <div data-expected-width=590 data-expected-height=30 style="height: 20px; flex: none;"></div> |
| </div> |
| |
| |
| </body> |
| </html> |
