var-evaluation.html (1009B)
1 <!DOCTYPE html> 2 <title>CSS Container Queries Test: var() in size query values</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 4 <link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#units"> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8088"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/cq-testcommon.js"></script> 9 <style> 10 #container { 11 container-type: size; 12 width: 200px; 13 --query: 100px; 14 --invalid-value: initial; 15 } 16 17 @container (width > var(--invalid-value, var(--query, 500px))) { 18 #target { 19 height: 50px; 20 background-color: green; 21 } 22 } 23 </style> 24 <div id=container> 25 <div id=target></div> 26 </div> 27 <script> 28 setup(() => assert_implements_size_container_queries()); 29 30 test(() => { 31 assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)'); 32 }, 'inline-size with var-substitution'); 33 </script>