| <!DOCTYPE html> |
| <html> |
| <style> |
| .flexbox { |
| display: flex; |
| background-color: #aaa; |
| position: relative; |
| flex-wrap: wrap; |
| } |
| |
| .horizontal { |
| width: 200px; |
| height: 120px; |
| } |
| .horizontal > div { |
| min-height: 20px; |
| } |
| .horizontal > :nth-child(1) { |
| width: 100px; |
| min-height: 10px; |
| } |
| .horizontal > :nth-child(2) { |
| width: 100px; |
| } |
| .horizontal > :nth-child(3) { |
| width: 200px; |
| } |
| .horizontal > :nth-child(4) { |
| width: 50px; |
| } |
| |
| .vertical-rl { |
| writing-mode: vertical-rl; |
| width: 120px; |
| height: 20px; |
| } |
| .vertical-rl > div { |
| min-width: 20px; |
| } |
| .vertical-rl > :nth-child(1) { |
| height: 10px; |
| min-width: 10px; |
| } |
| .vertical-rl > :nth-child(2) { |
| height: 10px; |
| } |
| .vertical-rl > :nth-child(3) { |
| height: 20px; |
| } |
| .vertical-rl > :nth-child(4) { |
| height: 5px; |
| } |
| |
| .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 align-content works properly.</p> |
| |
| <div data-expected-height="120" class="flexbox horizontal"> |
| <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div> |
| <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div> |
| <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div> |
| <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div> |
| </div> |
| |
| <div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-start"> |
| <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> |
| <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> |
| </div> |
| |
| <div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-end"> |
| <div data-offset-x="0" data-offset-y="60" data-expected-height="20"></div> |
| <div data-offset-x="100" data-offset-y="60" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="80" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div> |
| </div> |
| |
| <div data-expected-height="120" class="flexbox horizontal" style="align-content: center"> |
| <div data-offset-x="0" data-offset-y="30" data-expected-height="20"></div> |
| <div data-offset-x="100" data-offset-y="30" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="70" data-expected-height="20"></div> |
| </div> |
| |
| <div data-expected-height="120" class="flexbox horizontal" style="align-content: space-between"> |
| <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> |
| <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div> |
| </div> |
| |
| <div data-expected-height="120" class="flexbox horizontal" style="align-content: space-evenly"> |
| <div data-offset-x="0" data-offset-y="15" data-expected-height="20"></div> |
| <div data-offset-x="100" data-offset-y="15" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="85" data-expected-height="20"></div> |
| </div> |
| |
| <div data-expected-height="120" class="flexbox horizontal" style="align-content: space-around"> |
| <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div> |
| <div data-offset-x="100" data-offset-y="10" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="90" data-expected-height="20"></div> |
| </div> |
| |
| <div data-expected-height="120" class="flexbox horizontal" style="align-content: stretch"> |
| <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div> |
| <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div> |
| <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div> |
| <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div> |
| </div> |
| |
| <!-- Negative overflow goes out the top. --> |
| <div data-expected-height="30" class="flexbox horizontal" style="align-content: flex-end; height: 30px"> |
| <div data-offset-x="0" data-offset-y="-30" data-expected-height="20"></div> |
| <div data-offset-x="100" data-offset-y="-30" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="-10" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div> |
| </div> |
| |
| <!-- If we overflow, we should true center. --> |
| <div data-expected-height="30" class="flexbox horizontal" style="align-content: center; height: 30px"> |
| <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div> |
| <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div> |
| </div> |
| |
| <!-- If we overflow, we should be the same as flex-start. --> |
| <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px"> |
| <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> |
| <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> |
| </div> |
| |
| <!-- If we overflow, we should true center. --> |
| <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px"> |
| <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div> |
| <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div> |
| </div> |
| |
| <!-- If we overflow, we should true center. --> |
| <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px"> |
| <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div> |
| <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div> |
| </div> |
| |
| <!-- Stretch should only grow, not shrink. --> |
| <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px"> |
| <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> |
| <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> |
| <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> |
| </div> |
| |
| <!-- 0 lines should not crash. --> |
| <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px"> |
| </div> |
| <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px"> |
| </div> |
| <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px"> |
| </div> |
| <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px"> |
| </div> |
| |
| <!-- 1 line should not crash. --> |
| <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px"> |
| <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div> |
| </div> |
| <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px"> |
| <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div> |
| </div> |
| <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px"> |
| <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div> |
| </div> |
| <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px"> |
| <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div> |
| </div> |
| |
| |
| <div data-expected-width="120" class="flexbox vertical-rl"> |
| <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div> |
| <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div> |
| <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div> |
| <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div> |
| </div> |
| |
| <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-start"> |
| <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div> |
| <div data-offset-x="80" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="60" data-offset-y="0" data-expected-width="20"></div> |
| </div> |
| |
| <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-end"> |
| <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div> |
| <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> |
| </div> |
| |
| <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: center"> |
| <div data-offset-x="70" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="70" data-offset-y="10" data-expected-width="20"></div> |
| <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="30" data-offset-y="0" data-expected-width="20"></div> |
| </div> |
| |
| <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-between"> |
| <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div> |
| <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> |
| </div> |
| |
| <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-around"> |
| <div data-offset-x="90" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="90" data-offset-y="10" data-expected-width="20"></div> |
| <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> |
| </div> |
| |
| <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-evenly"> |
| <div data-offset-x="85" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="85" data-offset-y="10" data-expected-width="20"></div> |
| <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="15" data-offset-y="0" data-expected-width="20"></div> |
| </div> |
| |
| <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: stretch"> |
| <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div> |
| <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div> |
| <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div> |
| <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div> |
| </div> |
| |
| <!-- Negative overflow goes out the right. --> |
| <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: flex-end; width: 30px;"> |
| <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div> |
| <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> |
| </div> |
| |
| <!-- If we overflow, we should true center. --> |
| <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: center; width: 30px;"> |
| <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div> |
| <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div> |
| </div> |
| |
| <!-- If we overflow, we should be the same as flex-start. --> |
| <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px;"> |
| <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div> |
| <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div> |
| </div> |
| |
| <!-- If we overflow, we should true center. --> |
| <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px;"> |
| <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div> |
| <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div> |
| </div> |
| |
| <!-- If we overflow, we should true center. --> |
| <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px;"> |
| <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div> |
| <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div> |
| </div> |
| |
| <!-- Stretch should only grow, not shrink. --> |
| <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px;"> |
| <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div> |
| <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div> |
| <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div> |
| </div> |
| |
| <!-- 0 lines should not crash. --> |
| <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px"> |
| </div> |
| <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px"> |
| </div> |
| <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px"> |
| </div> |
| <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px"> |
| </div> |
| |
| <!-- 1 line should not crash. --> |
| <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px"> |
| <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> |
| </div> |
| <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px"> |
| <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> |
| </div> |
| <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px"> |
| <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> |
| </div> |
| <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px"> |
| <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> |
| </div> |
| </body> |
| </html> |
