registered-neutral-keyframe.html (829B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 @keyframes test { 7 to { --x: to; } 8 } 9 #target { 10 --x: underlying; 11 } 12 </style> 13 <div id="target"></div> 14 <script> 15 CSS.registerProperty({ 16 name: '--x', 17 syntax: '*', 18 inherits: false, 19 }); 20 21 test(() => { 22 target.style.animation = 'test 10s'; 23 target.style.animationDelay = '-2.5s'; 24 assert_equals(getComputedStyle(target).getPropertyValue('--x'), 'underlying', 'at 25%'); 25 26 target.style.animationDelay = '-7.5s'; 27 assert_equals(getComputedStyle(target).getPropertyValue('--x'), 'to', 'at 75%'); 28 }, 'CSS Animations neutral keyframes on registered custom properties should produce the underlying value'); 29 </script>