multiline-min-preferred-width.html (1064B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexbox: nested multiline (wrapping) flex boxes.</title> 5 <link rel="stylesheet" href="support/flexbox.css" > 6 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> 7 <meta name="assert" content="This test ensures that nested multiline flex boxes with 'flex-wrap: wrap' and the min preferred width set are laid out properly."/> 8 <style> 9 .item { 10 padding: 7px; 11 background-color: green; 12 border: 4px solid olive; 13 width: min-content; 14 } 15 16 .square { 17 background-color: lime; 18 width: 20px; 19 height: 20px; 20 } 21 </style> 22 <script src="/resources/testharness.js"></script> 23 <script src="/resources/testharnessreport.js"></script> 24 <script src="/resources/check-layout-th.js"></script> 25 </head> 26 <body onload="checkLayout('.container')"> 27 <div id=log></div> 28 29 <div class="container flexbox wrap" data-expected-height=42> 30 <div class="item flexbox wrap" data-expected-width=42 data-expected-height=42> 31 <div class="square" data-expected-width=20 data-expected-height=20></div> 32 </div> 33 </div> 34 35 </body> 36 </html>