/* Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ */ "use strict"; /* import-globals-from head.js */ // Test for following CurrentTimeScrubber and CurrentTimeScrubberController components: // * element existence // * scrubber position validity // * make animations currentTime to change by click on the controller // * mouse drag on the scrubber // eslint-disable-next-line no-unused-vars async function testCurrentTimeScrubber(isRTL) { await addTab(URL_ROOT + "doc_simple_animation.html"); await removeAnimatedElementsExcept([".long"]); const { animationInspector, panel } = await openAnimationInspector(); info("Checking scrubber controller existence"); const controllerEl = panel.querySelector(".current-time-scrubber-area"); ok(controllerEl, "scrubber controller should exist"); info("Checking scrubber existence"); const scrubberEl = controllerEl.querySelector(".current-time-scrubber"); ok(scrubberEl, "scrubber should exist"); info("Checking scrubber changes current time of animation and the position"); const duration = animationInspector.state.timeScale.getDuration(); clickOnCurrentTimeScrubberController( animationInspector, panel, isRTL ? 1 : 0 ); await waitUntilAnimationsPlayState(animationInspector, "paused"); await waitUntilCurrentTimeChangedAt(animationInspector, 0); assertPosition( scrubberEl, controllerEl, isRTL ? duration : 0, animationInspector ); clickOnCurrentTimeScrubberController( animationInspector, panel, isRTL ? 0 : 1 ); await waitUntilCurrentTimeChangedAt(animationInspector, duration); assertPosition( scrubberEl, controllerEl, isRTL ? 0 : duration, animationInspector ); clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5); await waitUntilCurrentTimeChangedAt(animationInspector, duration * 0.5); assertPosition(scrubberEl, controllerEl, duration * 0.5, animationInspector); info("Checking current time scrubber position during running"); // Running again clickOnPauseResumeButton(animationInspector, panel); await waitUntilAnimationsPlayState(animationInspector, "running"); let previousX = scrubberEl.getBoundingClientRect().x; await wait(1000); let currentX = scrubberEl.getBoundingClientRect().x; isnot(previousX, currentX, "Scrubber should be moved"); info("Checking draggable on scrubber over animation list"); clickOnPauseResumeButton(animationInspector, panel); await waitUntilAnimationsPlayState(animationInspector, "paused"); previousX = scrubberEl.getBoundingClientRect().x; await dragOnCurrentTimeScrubber(animationInspector, panel, 5, 30); currentX = scrubberEl.getBoundingClientRect().x; isnot(previousX, currentX, "Scrubber should be draggable"); info( "Checking a behavior which mouse out from animation inspector area " + "during dragging from controller" ); await dragOnCurrentTimeScrubberController(animationInspector, panel, 0.5, 2); ok( !panel .querySelector(".animation-list-container") .classList.contains("active-scrubber"), "Click and DnD should be inactive" ); } function assertPosition(scrubberEl, controllerEl, time, animationInspector) { const controllerBounds = controllerEl.getBoundingClientRect(); const scrubberBounds = scrubberEl.getBoundingClientRect(); const scrubberX = scrubberBounds.x + scrubberBounds.width / 2 - controllerBounds.x; const timeScale = animationInspector.state.timeScale; const expected = Math.round( (time / timeScale.getDuration()) * controllerBounds.width ); is(scrubberX, expected, `Position should be ${expected} at ${time}ms`); }