align-content-wrap-001.html (2787B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" /> 3 <title>css-flexbox: Tests align-content with single-line flex-wrap: wrap</title> 4 <style> 5 .default { 6 display: flex; 7 flex-wrap: wrap; 8 position: relative; 9 height: 70px; 10 border: 1px solid red; 11 margin: 5px; 12 } 13 14 .default > div { 15 height: 20px; 16 } 17 18 .verticalWriting { 19 display: flex; 20 flex-wrap: wrap; 21 position: relative; 22 width: 70px; 23 border: 1px solid red; 24 margin: 5px; 25 writing-mode: vertical-lr; 26 } 27 28 .verticalWriting > div { 29 width: 20px; 30 } 31 </style> 32 <script src="/resources/testharness.js"></script> 33 <script src="/resources/testharnessreport.js"></script> 34 <script src="/resources/check-layout-th.js"></script> 35 </head> 36 <body onload="checkLayout('.default, .verticalWriting'); "> 37 <div id=log></div> 38 <p>Test that we honor align-content even in single-line flex containers</p> 39 <div class="default" style="align-content: flex-start"> 40 <div data-offset-y="0">This text should be at the top of its container</div> 41 </div> 42 <div class="default" style="align-content: flex-end"> 43 <div data-offset-y="50">This text should be at the bottom of its container</div> 44 </div> 45 <div class="default" style="align-content: center"> 46 <div data-offset-y="25">This text should be centered in its container</div> 47 </div> 48 <div class="default" style="align-content: space-between"> 49 <div data-offset-y="0">This text should be at the top of its container</div> 50 </div> 51 <div class="default" style="align-content: space-around"> 52 <div data-offset-y="25">This text should be centered in its container</div> 53 </div> 54 <div class="default" style="align-content: space-evenly"> 55 <div data-offset-y="25">This text should be centered in its container</div> 56 </div> 57 <div class="default" style="align-content: stretch"> 58 <div data-offset-y="0">This text should be at the top of its container</div> 59 </div> 60 <div class="verticalWriting" style="align-content: flex-start"> 61 <div data-offset-x="0">This text should be at the left of its container</div> 62 </div> 63 <div class="verticalWriting" style="align-content: flex-end"> 64 <div data-offset-x="50">This text should be at the right of its container</div> 65 </div> 66 <div class="verticalWriting" style="align-content: center"> 67 <div data-offset-x="25">This text should be centered in its container</div> 68 </div> 69 <div class="verticalWriting" style="align-content: space-between"> 70 <div data-offset-x="0">This text should be at the left of its container</div> 71 </div> 72 <div class="verticalWriting" style="align-content: space-around"> 73 <div data-offset-x="25">This text should be centered in its container</div> 74 </div> 75 <div class="verticalWriting" style="align-content: stretch"> 76 <div data-offset-x="0">This text should be at the left of its container</div> 77 </div>