event-trigger-alternate.tentative.html (2668B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/web-animations-2#animation-trigger"> 5 <script src="/resources/testdriver.js"></script> 6 <script src="/resources/testdriver-vendor.js"></script> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/web-animations/testcommon.js"></script> 10 </head> 11 <body> 12 <div id="event-target">Click me!</div> 13 14 <div id="animation-target">Watch me!</div> 15 <script> 16 promise_test(async (test) => { 17 const eventTarget = document.getElementById("event-target"); 18 const animationTarget = document.getElementById("animation-target"); 19 const ANIMATION_DURATION_MS = 100000; 20 const animation = new Animation( 21 new KeyframeEffect( 22 animationTarget, 23 [ 24 { transform: "translateY(0)" }, 25 { transform: "translateY(3rem)" }, 26 ], 27 { duration: ANIMATION_DURATION_MS, fill: "both" } 28 )); 29 const trigger = new EventTrigger({ 30 eventType: "click", 31 eventTarget: eventTarget 32 }); 33 trigger.addAnimation(animation, "play-alternate"); 34 await waitForAnimationFrames(1); 35 assert_equals(animation.playState, "idle", "animation is idle"); 36 assert_equals(animation.playbackRate, 1, "playbackRate is initially 1"); 37 await test_driver.click(eventTarget); 38 await waitForAnimationFrames(1); 39 assert_equals(animation.playState, "running", "animation is running after first click"); 40 assert_equals(animation.playbackRate, 1, "playbackRate is 1 after first click"); 41 42 // Advance to middle of duration so that animation doesn't finish too 43 // quickly after reversing. 44 animation.currentTime = animation.startTime + (ANIMATION_DURATION_MS/2); 45 await waitForAnimationFrames(1); 46 47 await test_driver.click(eventTarget); 48 await waitForAnimationFrames(1); 49 assert_equals(animation.playState, "running", "animation is running after second click"); 50 assert_equals(animation.playbackRate, -1, "playbackRate is -1 after second click"); 51 animation.pause(); 52 await waitForAnimationFrames(1); 53 await test_driver.click(eventTarget); 54 await waitForAnimationFrames(1); 55 assert_equals(animation.playState, "running", "animation is running after third click"); 56 assert_equals(animation.playbackRate, 1, "playbackRate is 1 after third click"); 57 }, "Basic event-based animation-trigger with 'alternate' behavior"); 58 </script> 59 </body> 60 </html>