animation-base-response-002.html (700B)
1 <!DOCTYPE html> 2 <title>Test that rem units are responsive to animated font-size on root</title> 3 <link rel="help" href="https://drafts.csswg.org/css-animations/"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 @keyframes font_size_animation { 8 from { font-size: 10px; } 9 to { font-size: 20px; } 10 } 11 :root { 12 font-size: 1px; 13 animation: font_size_animation steps(2, end) 1000s -500s; 14 } 15 16 #target1 { 17 width: 1rem; 18 } 19 </style> 20 <div id="target1"></div> 21 <script> 22 test(() => { 23 assert_equals(getComputedStyle(target1).getPropertyValue('width'), '15px'); 24 }, 'Animated font-size on root affects rem units'); 25 </script>