align-content-wrap-002.html (4043B)
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 flex-wrap: wrap</title> 4 <style> 5 .flex-horizontal { 6 width:600px; 7 display:flex; 8 height:100px; 9 background:gray; 10 margin-bottom:100px; 11 } 12 .flex-vertical { 13 width:100px; 14 display:flex; 15 flex-direction: column; 16 height:600px; 17 background:gray; 18 margin-top:200px; 19 margin-bottom:100px; 20 } 21 .item-horizontal { 22 width:150px; 23 background:yellow; 24 margin:10px; 25 flex:none; 26 } 27 .item-vertical { 28 height:150px; 29 background:yellow; 30 margin:10px; 31 flex:none; 32 } 33 .content1-horizontal { 34 width:100px; 35 height:150px; 36 background:red; 37 } 38 .content2-horizontal { 39 width:100px; 40 height:100px; 41 background:red; 42 } 43 .content3-horizontal { 44 width:100px; 45 height:50px; 46 background:red; 47 } 48 .content1-vertical { 49 width:150px; 50 height:100px; 51 background:red; 52 } 53 .content2-vertical { 54 width:100px; 55 height:100px; 56 background:red; 57 } 58 .content3-vertical { 59 width:50px; 60 height:100px; 61 background:red; 62 } 63 </style> 64 <script src="/resources/testharness.js"></script> 65 <script src="/resources/testharnessreport.js"></script> 66 <script src="/resources/check-layout-th.js"></script> 67 <body onload="checkLayout('.flex-horizontal, .flex-vertical');"> 68 <div id=log></div> 69 <p>Test for crbug.com/362848: Flex box word-wrap is not adhering to spec</p> 70 <div class="flex-horizontal"> 71 <div class="item-horizontal" data-expected-height="80"><div class="content1-horizontal"></div></div> 72 <div class="item-horizontal" data-expected-height="80"><div class="content2-horizontal"></div></div> 73 <div class="item-horizontal" data-expected-height="80"><div class="content3-horizontal"></div></div> 74 </div> 75 76 <div class="flex-horizontal" style="flex-wrap:wrap;"> 77 <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div> 78 <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div> 79 <div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div> 80 </div> 81 82 <div class="flex-horizontal" style="flex-wrap:wrap;"> 83 <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div> 84 <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div> 85 <div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div> 86 <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div> 87 <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div> 88 </div> 89 90 <div class="flex-vertical"> 91 <div class="item-vertical" data-expected-width="80"><div class="content1-vertical"></div></div> 92 <div class="item-vertical" data-expected-width="80"><div class="content2-vertical"></div></div> 93 <div class="item-vertical" data-expected-width="80"><div class="content3-vertical"></div></div> 94 </div> 95 96 <div class="flex-vertical" style="flex-wrap:wrap;"> 97 <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div> 98 <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div> 99 <div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div> 100 </div> 101 102 <div class="flex-vertical" style="flex-wrap:wrap;"> 103 <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div> 104 <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div> 105 <div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div> 106 <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div> 107 <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div> 108 </div>