box-sizing-min-max-sizes-001.html (1312B)
1 <!DOCTYPE html> 2 <title>CSS Flexbox: minimum / maximum sizes with box-sizing: border-box</title> 3 <link href="support/flexbox.css" rel="stylesheet"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#box-model"> 5 <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#min-max-widths"> 6 <meta name="assert" content="This test checks that a minimum and maximum sizes are correctly computed for flexbox children."> 7 8 <style> 9 .flexbox { 10 background-color: teal; 11 } 12 .flexbox > div { 13 box-sizing: border-box; 14 } 15 </style> 16 <script src="/resources/testharness.js"></script> 17 <script src="/resources/testharnessreport.js"></script> 18 <script src="/resources/check-layout-th.js"></script> 19 <body onload="checkLayout('.flexbox')"> 20 <div id=log></div> 21 22 <div class="flexbox"> 23 <div style="border: 5px solid orange; padding: 5px; max-width: 30px; width: 40px;" data-expected-width=30></div> 24 <div style="border: 5px solid orange; padding: 5px; min-width: 30px; width: 10px;" data-expected-width=30></div> 25 </div> 26 27 <div class="flexbox column"> 28 <div style="border: 5px solid orange; padding: 5px; max-height: 30px; height: 40px;" data-expected-height=30></div> 29 <div style="border: 5px solid orange; padding: 5px; min-height: 30px; height: 10px;" data-expected-height=30></div> 30 </div> 31 32 </body> 33 </html>