style-query-registered-custom-rem-change.html (1090B)
1 <!DOCTYPE html> 2 <title>CSS Container Queries Test: style() query with rem unit for registered custom property</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#style-container"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/cq-testcommon.js"></script> 7 <style> 8 @property --length { 9 syntax: "<length>"; 10 initial-value: 0px; 11 inherits: false; 12 } 13 14 :root, body { font-size: 16px; } 15 #container { --length: 100px; } 16 17 #target { color: red; } 18 @container style(--length: calc(1rem * 10)) { 19 #target { color: green; } 20 } 21 </style> 22 <div id="container"> 23 <div id="target">Should be green</div> 24 </div> 25 <script> 26 test(() => { 27 assert_equals(getComputedStyle(target).color, "rgb(255, 0, 0)"); 28 }, "Initially, 1rem * 10 evaluates to 160px"); 29 30 test(() => { 31 document.documentElement.style.fontSize = "10px"; 32 assert_equals(getComputedStyle(target).color, "rgb(0, 128, 0)"); 33 }, "Changing the :root font-size to 10px makes 1rem * 10 evaluate to 100px"); 34 </script>