<!DOCTYPE html> <link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" /> <title>css-flexbox: Tests align-content with flex-wrap: wrap</title> <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="10"></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="10" data-expected-height="10"></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="10" data-expected-height="10"></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="20" data-offset-y="0" data-expected-width="10"></div> </div> <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px"> <div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div> </div> <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px"> <div data-offset-x="10" data-offset-y="0" data-expected-width="10"></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>