| <!DOCTYPE html> |
| <html> |
| <meta charset="utf-8"> |
| <title>getAnimations for scroll-linked animations</title> |
| <link rel="help" |
| href="https://www.w3.org/TR/web-animations-1/#animation-effect-phases-and-states"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="support/testcommon.js"></script> |
| <style> |
| @keyframes slide { |
| from { transform: translateX(100px); } |
| to { transform: translateX(100px); } |
| } |
| |
| #container { |
| border: 10px solid lightgray; |
| overflow-x: scroll; |
| height: 200px; |
| width: 200px; |
| scroll-timeline-name: --timeline; |
| } |
| #spacer { |
| height: 200vh; |
| } |
| #target { |
| background-color: green; |
| height: 100px; |
| width: 100px; |
| animation: slide 1s linear; |
| animation-timeline: --timeline; |
| } |
| </style> |
| <body> |
| <div id="container"> |
| <div id="spacer"></div> |
| <div id="target"></div> |
| </div> |
| </body> |
| <script type="text/javascript"> |
| setup(assert_implements_animation_timeline); |
| |
| promise_test(async t => { |
| let animations = document.getAnimations(); |
| assert_equals(animations.length, 1, |
| 'Single running animation'); |
| assert_true(animations[0].timeline instanceof ScrollTimeline, |
| 'Animation associated with a scroll timeline'); |
| |
| // Canceled animation is no longer current. |
| const anim = animations[0]; |
| animations[0].cancel(); |
| |
| assert_equals( |
| document.getAnimations().length, 0, |
| 'A canceled animation is no longer returned by getAnimations'); |
| |
| // Replaying an animation makes it current. |
| anim.play(); |
| assert_equals( |
| document.getAnimations().length, 1, |
| 'A play-pending animation is return by getAnimations'); |
| |
| // Animation effect is still current even if the timeline's source element |
| // cannot be scrolled. |
| spacer.style = 'display: none'; |
| t.add_cleanup(() => { |
| spacer.style = ''; |
| }); |
| |
| animations = document.getAnimations(); |
| assert_equals( |
| animations.length, 1, |
| 'Running animation is included in getAnimations list even if ' + |
| 'currentTime is null'); |
| assert_true(animations[0].timeline instanceof ScrollTimeline, |
| 'Animation has timeline associated with an element that ' + |
| 'cannot be scrolled'); |
| assert_equals(animations[0].timeline.currentTime, null, |
| 'Inactive timeline when timeline\'s source element cannot ' + |
| 'be scrolled'); |
| }, 'getAnimations includes inactive scroll-linked animations that have not ' + |
| 'been canceled'); |
| </script> |
