animation-timeline-in-keyframe.html (915B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#animation-timeline"> 3 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#keyframes"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 </head> 7 <style> 8 @keyframes test { 9 from { width: 100px; animation-timeline: --foo; } 10 to { width: 100px; animation-timeline: --foo; } 11 } 12 #target { 13 width: 50px; 14 animation-name: test; 15 animation-duration: 1s; 16 animation-play-state: paused; 17 } 18 </style> 19 <div id="target"></div> 20 <script> 21 test(() => { 22 let style = getComputedStyle(document.getElementById('target')); 23 // Checking 'width' verifies that the animation is applied at all. 24 assert_equals(style.width, '100px'); 25 assert_equals(style.animationTimeline, 'auto'); 26 }, 'The animation-timeline property may not be used in keyframes'); 27 </script>