inline-size-computed.html (1186B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Logical Properties and Values: getComputedStyle().inlineSize</title> 6 <link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> 7 <meta name="assert" content="inline-size computed value is an absolute length."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/computed-testcommon.js"></script> 11 <style> 12 #parent { 13 width: 200px; 14 } 15 #target { 16 width: 0px; 17 height: 0px; 18 font-size: 40px; 19 } 20 #child { 21 width: 60px; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="parent"> 27 <div id="target"> 28 <div id="child"> 29 </div> 30 </div> 31 </div> 32 <script> 33 test_computed_value("inline-size", "auto", "200px"); // parent width 34 35 test_computed_value("inline-size", "10px"); 36 test_computed_value("inline-size", "20%", "40px"); 37 test_computed_value("inline-size", "calc(0.5em + 10px)", "30px"); 38 test_computed_value("inline-size", "calc(-0.5em + 10px)", "0px"); 39 40 test_computed_value("inline-size", "min-content", "60px"); // child width 41 test_computed_value("inline-size", "max-content", "60px"); 42 </script> 43 </body> 44 </html>