min-inline-size-computed.html (1501B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Logical Properties and Values: getComputedStyle().minInlineSize</title> 6 <link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-min-inline-size"> 7 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> 8 <meta name="assert" content="Computed min-inline-size is the specified keyword, or the length-percentage made absolute."> 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 #container { 17 display: flex; 18 } 19 #box { 20 min-inline-size: auto; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="target"></div> 26 <div id="container"> 27 <div id="box"></div> 28 </div> 29 <script> 30 test_computed_value("min-inline-size", "auto", "0px"); 31 32 test_computed_value("min-inline-size", "10px"); 33 test_computed_value("min-inline-size", "20%"); 34 test_computed_value("min-inline-size", "calc(10px + 0.5em)", "30px"); 35 test_computed_value("min-inline-size", "calc(10px - 0.5em)", "0px"); 36 test_computed_value("min-inline-size", "calc(20% + 10px)"); 37 38 test_computed_value("min-inline-size", "min-content"); 39 test_computed_value("min-inline-size", "max-content"); 40 41 test(() => { 42 const picture = document.getElementById('box'); 43 assert_equals(getComputedStyle(picture).minInlineSize, 'auto'); 44 }, 'min-inline-size auto computes to auto with flex layout.'); 45 </script> 46 </body> 47 </html>