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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test for following summary graph with the animation which has infinity duration.
// * Tooltips
// * Graph path
// * Delay sign
const TEST_DATA = [
{
targetClass: "infinity",
expectedIterationPath: [
{ x: 0, y: 0 },
{ x: 200000, y: 0 },
],
expectedTooltip: {
duration: "\u221E",
},
},
{
targetClass: "infinity-delay-iteration-start",
expectedDelayPath: [
{ x: 0, y: 0 },
{ x: 100000, y: 0 },
],
expectedDelaySign: {
marginInlineStart: "0%",
width: "50%",
},
expectedIterationPath: [
{ x: 100000, y: 50 },
{ x: 200000, y: 50 },
],
expectedTooltip: {
delay: "100s",
duration: "\u221E",
iterationStart: "0.5 (\u221E)",
},
},
{
targetClass: "limited",
expectedIterationPath: [
{ x: 0, y: 0 },
{ x: 100000, y: 100 },
],
expectedTooltip: {
duration: "100s",
},
},
];
add_task(async function () {
await addTab(URL_ROOT + "doc_infinity_duration.html");
const { panel } = await openAnimationInspector();
for (const testData of TEST_DATA) {
const {
targetClass,
expectedDelayPath,
expectedDelaySign,
expectedIterationPath,
expectedTooltip,
} = testData;
const animationItemEl = await findAnimationItemByTargetSelector(
panel,
`.${targetClass}`
);
const summaryGraphEl = animationItemEl.querySelector(
".animation-summary-graph"
);
info(`Check tooltip for the animation of .${targetClass}`);
assertTooltip(summaryGraphEl, expectedTooltip);
if (expectedDelayPath) {
info(`Check delay path for the animation of .${targetClass}`);
assertDelayPath(summaryGraphEl, expectedDelayPath);
}
if (expectedDelaySign) {
info(`Check delay sign for the animation of .${targetClass}`);
assertDelaySign(summaryGraphEl, expectedDelaySign);
}
info(`Check iteration path for the animation of .${targetClass}`);
assertIterationPath(summaryGraphEl, expectedIterationPath);
}
});
function assertDelayPath(summaryGraphEl, expectedPath) {
assertPath(
summaryGraphEl,
".animation-computed-timing-path .animation-delay-path",
expectedPath
);
}
function assertDelaySign(summaryGraphEl, expectedSign) {
const signEl = summaryGraphEl.querySelector(".animation-delay-sign");
is(
signEl.style.marginInlineStart,
expectedSign.marginInlineStart,
`marginInlineStart position should be ${expectedSign.marginInlineStart}`
);
is(
signEl.style.width,
expectedSign.width,
`Width should be ${expectedSign.width}`
);
}
function assertIterationPath(summaryGraphEl, expectedPath) {
assertPath(
summaryGraphEl,
".animation-computed-timing-path .animation-iteration-path",
expectedPath
);
}
function assertPath(summaryGraphEl, pathSelector, expectedPath) {
const pathEl = summaryGraphEl.querySelector(pathSelector);
assertPathSegments(pathEl, true, expectedPath);
}
function assertTooltip(summaryGraphEl, expectedTooltip) {
const tooltip = summaryGraphEl.getAttribute("title");
const { delay, duration, iterationStart } = expectedTooltip;
if (delay) {
const expected = `Delay: ${delay}`;
ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
}
if (duration) {
const expected = `Duration: ${duration}`;
ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
}
if (iterationStart) {
const expected = `Iteration start: ${iterationStart}`;
ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
}
}
|
