flex-shorthand-flex-basis-middle.html (1251B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: flex shorthand with 'auto' or 'zero' percentage value</title> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> 5 <link href="support/flexbox.css" rel="stylesheet"> 6 <meta name="assert" content="This test ensures that setting '%0' or 'auto' to the flex-basis 7 in the middle of between 'flex-grow' and 'flex-shrink' properties whose value is '1' works properly."> 8 <style> 9 .flexbox { 10 width: 500px; 11 height: 100px; 12 background: green; 13 } 14 15 .flexbox > div { 16 width: 50px; 17 background: yellow; 18 } 19 </style> 20 <script src="/resources/testharness.js"></script> 21 <script src="/resources/testharnessreport.js"></script> 22 <script src="/resources/check-layout-th.js"></script> 23 <body onload="checkLayout('.flexbox')"> 24 <div id=log></div> 25 <div class="flexbox"> 26 <div data-expected-width="50" style="flex: 1 0% 1"></div> 27 <div data-expected-width="50" style="flex: 1 0% 1"></div> 28 <div data-expected-width="50" style="flex: 1 0% 1"></div> 29 </div> 30 31 <div class="flexbox"> 32 <div data-expected-width="50" style="flex: 1 auto 1"></div> 33 <div data-expected-width="50" style="flex: 1 auto 1"></div> 34 <div data-expected-width="50" style="flex: 1 auto 1"></div> 35 </div> 36 </body> 37 </html>