calc-evaluation.html (904B)
1 <!DOCTYPE html> 2 <title>CSS Container Queries Test: calc()</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 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/cq-testcommon.js"></script> 8 <style> 9 :root { font-size: 10px; } 10 11 /* To make output more readable */ 12 :root > * { font-size: initial; } 13 14 #container { 15 container-type: size; 16 width: 200px; 17 height: 50px; 18 } 19 @container (width = calc(100px + 10rem)) { 20 #target { color: green; } 21 } 22 </style> 23 <div id=container> 24 <div id=target></div> 25 </div> 26 <script> 27 setup(() => assert_implements_size_container_queries()); 28 29 test(() => { 30 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 31 }, 'em relative inline-size'); 32 </script>