| <style> |
| .flexbox { |
| display: flex; |
| } |
| .column { |
| height: 50px; |
| } |
| .row { |
| width: 50px; |
| } |
| .container > div { |
| outline: 2px solid blue; |
| } |
| .row > div > div { |
| height: 20px; |
| flex: 0 0 auto; |
| } |
| .column > .flexbox { |
| flex-direction: column; |
| } |
| .container > div > :nth-child(1) { |
| background-color: orange; |
| } |
| .container > div > :nth-child(2) { |
| background-color: yellow; |
| } |
| .container > div > :nth-child(3) { |
| background-color: salmon; |
| } |
| .container > div > :nth-child(4) { |
| background-color: purple; |
| } |
| </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> |
| |
| <div>CompatMode: <script>document.write(document.compatMode)</script></div> |
| |
| <div class="container row"> |
| <div class="flexbox"> |
| <div style='width: 10px; min-width: 50%;' data-expected-width=25></div> |
| <div style='width: 50%;' data-expected-width=25></div> |
| <div style='width: 10px; max-width: 50%;' data-expected-width=10></div> |
| <div style='min-width: 10px; width: 100px; max-width: 50%;' data-expected-width=25></div> |
| </div> |
| </div> |
| |
| <div class="container column" style='margin-bottom: 50px'> |
| <div class="flexbox"> |
| <div style='height: 10px; min-height: 50%;' data-expected-height=25></div> |
| <div style='height: 50%;' data-expected-height=25></div> |
| <div style='height: 10px; max-height: 50%;' data-expected-height=10></div> |
| <div style='min-height: 10px; height: 100px; max-height: 50%;' data-expected-height=25></div> |
| </div> |
| </div> |
| |
| <div class="container row"> |
| <div class="flexbox"> |
| <div style="flex: 0 0 50%" data-expected-width=25></div> |
| </div> |
| </div> |
| |
| <div class="container column"> |
| <div class="flexbox"> |
| <div style="flex: 0 0 50%" data-expected-height=25></div> |
| </div> |
| </div> |
| |
| </body> |
