flex-basis-computed.html (1367B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Flexible Box Layout: getComputedStyle().flexBasis</title> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-basis"> 7 <meta name="assert" content="flex-basis computed value is as specified, with length made absolute."> 8 <meta name="assert" content="flex-basis computed value is non-negative."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/computed-testcommon.js"></script> 12 <style> 13 #target { 14 font-size: 40px; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="target"></div> 20 <script> 21 test_computed_value("flex-basis", "1px"); 22 test_computed_value("flex-basis", "400%"); 23 test_computed_value("flex-basis", "auto"); 24 test_computed_value("flex-basis", "content"); 25 test_computed_value("flex-basis", "fit-content"); 26 test_computed_value("flex-basis", "min-content"); 27 test_computed_value("flex-basis", "max-content"); 28 29 test_computed_value("flex-basis", "calc(10px + 0.5em)", "30px"); 30 test_computed_value("flex-basis", "calc(10px - 0.5em)", "0px"); 31 test_computed_value("flex-basis", "calc(10%)", "10%"); 32 // https://github.com/w3c/csswg-drafts/issues/3482 33 test_computed_value("flex-basis", "calc(0% + 10px)", "calc(0% + 10px)"); 34 test_computed_value("flex-basis", "calc(10% + 0px)", "10%"); 35 </script> 36 </body> 37 </html>