browser_animation_pause-resume-button_end-time.js (2833B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test whether the animation can rewind if the current time is over end time when 7 // the resume button clicked. 8 9 add_task(async function () { 10 await addTab(URL_ROOT + "doc_simple_animation.html"); 11 await removeAnimatedElementsExcept([ 12 ".animated", 13 ".end-delay", 14 ".long", 15 ".negative-delay", 16 ]); 17 const { animationInspector, panel } = await openAnimationInspector(); 18 19 info("Check animations state after resuming with infinite animation"); 20 info("Make the current time of animation to be over its end time"); 21 clickOnCurrentTimeScrubberController(animationInspector, panel, 1); 22 await waitUntilAnimationsPlayState(animationInspector, "paused"); 23 info("Resume animations"); 24 clickOnPauseResumeButton(animationInspector, panel); 25 await wait(1000); 26 assertPlayState(animationInspector.state.animations, [ 27 "running", 28 "finished", 29 "finished", 30 "finished", 31 ]); 32 clickOnCurrentTimeScrubberController(animationInspector, panel, 0); 33 await waitUntilAnimationsPlayState(animationInspector, "paused"); 34 35 info("Check animations state after resuming without infinite animation"); 36 info("Remove infinite animation"); 37 await setClassAttribute(animationInspector, ".animated", "ball still"); 38 await waitUntil(() => panel.querySelectorAll(".animation-item").length === 3); 39 40 info("Make the current time of animation to be over its end time"); 41 clickOnCurrentTimeScrubberController(animationInspector, panel, 1.1); 42 await waitUntilAnimationsPlayState(animationInspector, "paused"); 43 await changePlaybackRateSelector(animationInspector, panel, 0.1); 44 info("Resume animations"); 45 clickOnPauseResumeButton(animationInspector, panel); 46 await waitUntilAnimationsPlayState(animationInspector, "running"); 47 assertCurrentTimeLessThanDuration(animationInspector.state.animations); 48 assertScrubberPosition(panel); 49 }); 50 51 function assertPlayState(animations, expectedState) { 52 animations.forEach((animation, index) => { 53 is( 54 animation.state.playState, 55 expectedState[index], 56 `The playState of animation [${index}] should be ${expectedState[index]}` 57 ); 58 }); 59 } 60 61 function assertCurrentTimeLessThanDuration(animations) { 62 animations.forEach((animation, index) => { 63 Assert.less( 64 animation.state.currentTime, 65 animation.state.duration, 66 `The current time of animation[${index}] should be less than its duration` 67 ); 68 }); 69 } 70 71 function assertScrubberPosition(panel) { 72 const scrubberEl = panel.querySelector(".current-time-scrubber"); 73 const marginInlineStart = parseFloat(scrubberEl.style.marginInlineStart); 74 Assert.greaterOrEqual( 75 marginInlineStart, 76 0, 77 "The translateX of scrubber position should be zero or more" 78 ); 79 }