1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
/* 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`);
}
|
