flex-shorthand.html (1685B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Flexible Box Layout Module Level 1: flex sets longhands</title> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex"> 7 <meta name="assert" content="flex supports the full grammar 'none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]'."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/shorthand-testcommon.js"></script> 11 </head> 12 <body> 13 <script> 14 test_shorthand_value('flex', 'none', { 15 'flex-grow': '0', 16 'flex-shrink': '0', 17 'flex-basis': 'auto' 18 }); 19 20 test_shorthand_value('flex', '1', { 21 'flex-grow': '1', 22 'flex-shrink': '1', 23 'flex-basis': '0%' 24 }); 25 26 test_shorthand_value('flex', '2 3', { 27 'flex-grow': '2', 28 'flex-shrink': '3', 29 'flex-basis': '0%' 30 }); 31 32 test_shorthand_value('flex', '4 5 6px', { 33 'flex-grow': '4', 34 'flex-shrink': '5', 35 'flex-basis': '6px' 36 }); 37 38 test_shorthand_value('flex', '7% 8', { 39 'flex-grow': '8', 40 'flex-shrink': '1', 41 'flex-basis': '7%' 42 }); 43 44 test_shorthand_value('flex', '8 auto', { 45 'flex-grow': '8', 46 'flex-shrink': '1', 47 'flex-basis': 'auto' 48 }); 49 50 test_shorthand_value('flex', 'content', { 51 'flex-grow': '1', 52 'flex-shrink': '1', 53 'flex-basis': 'content' 54 }); 55 56 test_shorthand_value('flex', '0 fit-content', { 57 'flex-grow': '0', 58 'flex-shrink': '1', 59 'flex-basis': 'fit-content' 60 }); 61 62 test_shorthand_value('flex', '1 0 max-content', { 63 'flex-grow': '1', 64 'flex-shrink': '0', 65 'flex-basis': 'max-content' 66 }); 67 68 test_shorthand_value('flex', 'auto 1 2', { 69 'flex-grow': '1', 70 'flex-shrink': '2', 71 'flex-basis': 'auto' 72 }); 73 </script> 74 </body> 75 </html>