current-time-scrubber_head.js (3711B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 /* import-globals-from head.js */ 7 8 // Test for following CurrentTimeScrubber and CurrentTimeScrubberController components: 9 // * element existence 10 // * scrubber position validity 11 // * make animations currentTime to change by click on the controller 12 // * mouse drag on the scrubber 13 14 // eslint-disable-next-line no-unused-vars 15 async function testCurrentTimeScrubber(isRTL) { 16 await addTab(URL_ROOT + "doc_simple_animation.html"); 17 await removeAnimatedElementsExcept([".long"]); 18 const { animationInspector, panel } = await openAnimationInspector(); 19 20 info("Checking scrubber controller existence"); 21 const controllerEl = panel.querySelector(".current-time-scrubber-area"); 22 ok(controllerEl, "scrubber controller should exist"); 23 24 info("Checking scrubber existence"); 25 const scrubberEl = controllerEl.querySelector(".current-time-scrubber"); 26 ok(scrubberEl, "scrubber should exist"); 27 28 info("Checking scrubber changes current time of animation and the position"); 29 const duration = animationInspector.state.timeScale.getDuration(); 30 clickOnCurrentTimeScrubberController( 31 animationInspector, 32 panel, 33 isRTL ? 1 : 0 34 ); 35 await waitUntilAnimationsPlayState(animationInspector, "paused"); 36 await waitUntilCurrentTimeChangedAt(animationInspector, 0); 37 assertPosition( 38 scrubberEl, 39 controllerEl, 40 isRTL ? duration : 0, 41 animationInspector 42 ); 43 44 clickOnCurrentTimeScrubberController( 45 animationInspector, 46 panel, 47 isRTL ? 0 : 1 48 ); 49 await waitUntilCurrentTimeChangedAt(animationInspector, duration); 50 assertPosition( 51 scrubberEl, 52 controllerEl, 53 isRTL ? 0 : duration, 54 animationInspector 55 ); 56 57 clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5); 58 await waitUntilCurrentTimeChangedAt(animationInspector, duration * 0.5); 59 assertPosition(scrubberEl, controllerEl, duration * 0.5, animationInspector); 60 61 info("Checking current time scrubber position during running"); 62 // Running again 63 clickOnPauseResumeButton(animationInspector, panel); 64 await waitUntilAnimationsPlayState(animationInspector, "running"); 65 let previousX = scrubberEl.getBoundingClientRect().x; 66 await wait(1000); 67 let currentX = scrubberEl.getBoundingClientRect().x; 68 isnot(previousX, currentX, "Scrubber should be moved"); 69 70 info("Checking draggable on scrubber over animation list"); 71 clickOnPauseResumeButton(animationInspector, panel); 72 await waitUntilAnimationsPlayState(animationInspector, "paused"); 73 previousX = scrubberEl.getBoundingClientRect().x; 74 await dragOnCurrentTimeScrubber(animationInspector, panel, 5, 30); 75 currentX = scrubberEl.getBoundingClientRect().x; 76 isnot(previousX, currentX, "Scrubber should be draggable"); 77 78 info( 79 "Checking a behavior which mouse out from animation inspector area " + 80 "during dragging from controller" 81 ); 82 await dragOnCurrentTimeScrubberController(animationInspector, panel, 0.5, 2); 83 ok( 84 !panel 85 .querySelector(".animation-list-container") 86 .classList.contains("active-scrubber"), 87 "Click and DnD should be inactive" 88 ); 89 } 90 91 function assertPosition(scrubberEl, controllerEl, time, animationInspector) { 92 const controllerBounds = controllerEl.getBoundingClientRect(); 93 const scrubberBounds = scrubberEl.getBoundingClientRect(); 94 const scrubberX = 95 scrubberBounds.x + scrubberBounds.width / 2 - controllerBounds.x; 96 const timeScale = animationInspector.state.timeScale; 97 const expected = Math.round( 98 (time / timeScale.getDuration()) * controllerBounds.width 99 ); 100 is(scrubberX, expected, `Position should be ${expected} at ${time}ms`); 101 }