get-animations-inactive-timeline.html (2615B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>getAnimations for scroll-linked animations</title> 5 <link rel="help" 6 href="https://www.w3.org/TR/web-animations-1/#animation-effect-phases-and-states"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="support/testcommon.js"></script> 10 <style> 11 @keyframes slide { 12 from { transform: translateX(100px); } 13 to { transform: translateX(100px); } 14 } 15 16 #container { 17 border: 10px solid lightgray; 18 overflow-x: scroll; 19 height: 200px; 20 width: 200px; 21 scroll-timeline-name: --timeline; 22 } 23 #spacer { 24 height: 200vh; 25 } 26 #target { 27 background-color: green; 28 height: 100px; 29 width: 100px; 30 animation: slide 1s linear; 31 animation-timeline: --timeline; 32 } 33 </style> 34 <body> 35 <div id="container"> 36 <div id="spacer"></div> 37 <div id="target"></div> 38 </div> 39 </body> 40 <script type="text/javascript"> 41 setup(assert_implements_animation_timeline); 42 43 promise_test(async t => { 44 let animations = document.getAnimations(); 45 assert_equals(animations.length, 1, 46 'Single running animation'); 47 assert_true(animations[0].timeline instanceof ScrollTimeline, 48 'Animation associated with a scroll timeline'); 49 50 // Canceled animation is no longer current. 51 const anim = animations[0]; 52 animations[0].cancel(); 53 54 assert_equals( 55 document.getAnimations().length, 0, 56 'A canceled animation is no longer returned by getAnimations'); 57 58 // Replaying an animation makes it current. 59 anim.play(); 60 assert_equals( 61 document.getAnimations().length, 1, 62 'A play-pending animation is return by getAnimations'); 63 64 // Animation effect is still current even if the timeline's source element 65 // cannot be scrolled. 66 spacer.style = 'display: none'; 67 t.add_cleanup(() => { 68 spacer.style = ''; 69 }); 70 71 animations = document.getAnimations(); 72 assert_equals( 73 animations.length, 1, 74 'Running animation is included in getAnimations list even if ' + 75 'currentTime is null'); 76 assert_true(animations[0].timeline instanceof ScrollTimeline, 77 'Animation has timeline associated with an element that ' + 78 'cannot be scrolled'); 79 assert_equals(animations[0].timeline.currentTime, null, 80 'Inactive timeline when timeline\'s source element cannot ' + 81 'be scrolled'); 82 }, 'getAnimations includes inactive scroll-linked animations that have not ' + 83 'been canceled'); 84 </script>