font-size-animation.html (1447B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> 3 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3751"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script> 7 CSS.registerProperty({ 8 name: '--length', 9 syntax: '<length>', 10 initialValue: '0px', 11 inherits: false 12 }); 13 </script> 14 <style> 15 @keyframes font_size_animation { 16 from { 17 font-size: 10px; 18 width: 10em; 19 --length: 10em; 20 } 21 to { 22 font-size: 20px; 23 width: 20em; 24 --length: 20em; 25 } 26 } 27 #target1 { 28 font-size: 1px; 29 animation: font_size_animation 10s -5s linear paused; 30 } 31 </style> 32 <div id=target1></div> 33 <script> 34 test(function() { 35 // At the time of writing, the correct (absolute) answer is not 36 // yet defined. However, whatever the correct answer is, there should 37 // be no difference in 'width' and a custom property registered with 38 // "<length>". 39 // 40 // See https://github.com/w3c/csswg-drafts/issues/3751 41 assert_equals(getComputedStyle(target1).getPropertyValue('width'), 42 getComputedStyle(target1).getPropertyValue('--length')); 43 }, 'Animating font-size handled identically for standard and custom properties'); 44 </script>