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
102
103
104
105
106
107
108
109
110
111
112
113
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test for following mutations:
// * add animation
// * remove animation
// * modify animation
add_task(async function () {
await addTab(URL_ROOT + "doc_simple_animation.html");
await removeAnimatedElementsExcept([
".compositor-all",
".compositor-notall",
".no-compositor",
".still",
]);
const { animationInspector, inspector, panel } =
await openAnimationInspector();
info("Checking the mutation for add an animation");
const originalAnimationCount = animationInspector.state.animations.length;
await setClassAttribute(animationInspector, ".still", "ball no-compositor");
await waitUntil(
() =>
animationInspector.state.animations.length === originalAnimationCount + 1
);
ok(true, "Count of animation should be plus one to original count");
info(
"Checking added animation existence even the animation name is duplicated"
);
is(
getAnimationNameCount(panel, "no-compositor"),
2,
"Count of animation should be plus one to original count"
);
info("Checking the mutation for remove an animation");
await setClassAttribute(
animationInspector,
".compositor-notall",
"ball still"
);
await waitUntil(
() => animationInspector.state.animations.length === originalAnimationCount
);
ok(
true,
"Count of animation should be same to original count since we remove an animation"
);
info("Checking the mutation for modify an animation");
await selectNode(".compositor-all", inspector);
await setStyle(
animationInspector,
".compositor-all",
"animationDuration",
"100s"
);
await setStyle(
animationInspector,
".compositor-all",
"animationIterationCount",
1
);
const summaryGraphPathEl = getSummaryGraphPathElement(
panel,
"compositor-all"
);
await waitUntil(() => summaryGraphPathEl.viewBox.baseVal.width === 100000);
ok(
true,
"Width of summary graph path should be 100000 " +
"after modifing the duration and iteration count"
);
await setStyle(
animationInspector,
".compositor-all",
"animationDelay",
"100s"
);
await waitUntil(() => summaryGraphPathEl.viewBox.baseVal.width === 200000);
ok(
true,
"Width of summary graph path should be 200000 after modifing the delay"
);
ok(
summaryGraphPathEl.parentElement.querySelector(".animation-delay-sign"),
"Delay sign element shoud exist"
);
});
function getAnimationNameCount(panel, animationName) {
return [...panel.querySelectorAll(".animation-name")].reduce(
(count, element) =>
element.textContent === animationName ? count + 1 : count,
0
);
}
function getSummaryGraphPathElement(panel, animationName) {
for (const animationNameEl of panel.querySelectorAll(".animation-name")) {
if (animationNameEl.textContent === animationName) {
return animationNameEl
.closest(".animation-summary-graph")
.querySelector(".animation-summary-graph-path");
}
}
return null;
}
|
