| <!DOCTYPE html> |
| <html> |
| <style> |
| .flexbox { |
| display: flex; |
| background-color: #aaa; |
| position: relative; |
| flex-flow: column wrap; |
| margin-top: 20px; |
| align-content: flex-start; |
| } |
| .flexbox > div { |
| border: 0; |
| flex: none; |
| } |
| |
| .flexbox :nth-child(1) { |
| background-color: lightblue; |
| } |
| .flexbox :nth-child(2) { |
| background-color: lightgreen; |
| } |
| .flexbox :nth-child(3) { |
| background-color: pink; |
| } |
| .flexbox :nth-child(4) { |
| background-color: yellow; |
| } |
| </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> |
| <p>Test to make sure that multiline columns break at the right places when auto sized.</p> |
| |
| <div data-expected-width="200" data-expected-height="80" class="flexbox" style="width: 200px"> |
| <div data-offset-x="0" data-offset-y="0" style="width: 50px; height: 20px"></div> |
| <div data-offset-x="0" data-offset-y="20" style="width: 50px; height: 20px"></div> |
| <div data-offset-x="0" data-offset-y="40" style="width: 50px; height: 20px"></div> |
| <div data-offset-x="0" data-offset-y="60" style="width: 50px; height: 20px"></div> |
| </div> |
| |
| <div data-expected-width="200" data-expected-height="40" class="flexbox" style="width: 200px; max-height: 50px;"> |
| <div data-offset-x="0" data-offset-y="0" style="width: 50px; height: 20px"></div> |
| <div data-offset-x="0" data-offset-y="20" style="width: 50px; height: 20px"></div> |
| <div data-offset-x="50" data-offset-y="0" style="width: 50px; height: 20px"></div> |
| <div data-offset-x="50" data-offset-y="20" style="width: 50px; height: 20px"></div> |
| </div> |
| |
| <div data-expected-width="200" data-expected-height="50" class="flexbox" style="width: 200px; height: 50px;"> |
| <div data-offset-x="0" data-offset-y="0" style="width: 50px; height: 20px"></div> |
| <div data-offset-x="0" data-offset-y="20" style="width: 50px; height: 20px"></div> |
| <div data-offset-x="50" data-offset-y="0" style="width: 50px; height: 20px"></div> |
| <div data-offset-x="50" data-offset-y="20" style="width: 50px; height: 20px"></div> |
| </div> |
| |
| <div data-expected-width="200" data-expected-height="30" class="flexbox" style="width: 200px; height: 50px; max-height: 30px;"> |
| <div data-offset-x="0" data-offset-y="0" style="width: 50px; height: 20px"></div> |
| <div data-offset-x="50" data-offset-y="0" style="width: 50px; height: 20px"></div> |
| <div data-offset-x="100" data-offset-y="0" style="width: 50px; height: 20px"></div> |
| <div data-offset-x="150" data-offset-y="0" style="width: 50px; height: 20px"></div> |
| </div> |
| |
| </body> |
| </html> |
