transition-base-response-002.html (808B)
1 <!DOCTYPE html> 2 <title>Test that rem units are responsive to transitioning font-size on root</title> 3 <link rel="help" href="https://drafts.csswg.org/css-transitions/"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 :root { 8 font-size: 20px; 9 } 10 :root.change { 11 transition: font-size steps(2, start) 10s; 12 font-size: 30px; 13 } 14 15 #target1 { 16 width: 1rem; 17 } 18 </style> 19 <div id="target1"></div> 20 <output id=output></output> 21 <script> 22 test(() => { 23 let unused = getComputedStyle(document.documentElement).getPropertyValue('font-size'); 24 document.documentElement.className = 'change'; 25 assert_equals(getComputedStyle(target1).getPropertyValue('width'), '25px'); 26 }, 'Transitioning font-size on root affects rem units'); 27 </script>