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
148
149
150
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test whether the layout of graphs were broken by seek and resume.
add_task(async function () {
await addTab(URL_ROOT + "doc_multi_timings.html");
await removeAnimatedElementsExcept([
".delay-positive",
".delay-negative",
".enddelay-positive",
".enddelay-negative",
]);
const { animationInspector, panel } = await openAnimationInspector();
info("Get initial coordinates result as test data");
const initialCoordinatesResult = [];
for (let i = 0; i < animationInspector.state.animations.length; i++) {
const itemEl = await findAnimationItemByIndex(panel, i);
const svgEl = itemEl.querySelector("svg");
const svgViewBoxX = svgEl.viewBox.baseVal.x;
const svgViewBoxWidth = svgEl.viewBox.baseVal.width;
const pathEl = svgEl.querySelector(".animation-computed-timing-path");
const pathX = pathEl.transform.baseVal[0].matrix.e;
const delayEl = itemEl.querySelector(".animation-delay-sign");
let delayX = null;
let delayWidth = null;
if (delayEl) {
const computedStyle = delayEl.ownerGlobal.getComputedStyle(delayEl);
delayX = computedStyle.left;
delayWidth = computedStyle.width;
}
const endDelayEl = itemEl.querySelector(".animation-end-delay-sign");
let endDelayX = null;
let endDelayWidth = null;
if (endDelayEl) {
const computedStyle = endDelayEl.ownerGlobal.getComputedStyle(endDelayEl);
endDelayX = computedStyle.left;
endDelayWidth = computedStyle.width;
}
const coordinates = {
svgViewBoxX,
svgViewBoxWidth,
pathX,
delayX,
delayWidth,
endDelayX,
endDelayWidth,
};
initialCoordinatesResult.push(coordinates);
}
info("Set currentTime to rear of the end of animation of .delay-negative.");
clickOnCurrentTimeScrubberController(animationInspector, panel, 0.75);
await waitUntilAnimationsPlayState(animationInspector, "paused");
info("Resume animations");
clickOnPauseResumeButton(animationInspector, panel);
// As some animations may be finished, we check if some animations will be running.
await waitUntil(() =>
animationInspector.state.animations.some(
a => a.state.playState === "running"
)
);
info("Check the layout");
const itemEls = panel.querySelectorAll(".animation-item");
is(
itemEls.length,
initialCoordinatesResult.length,
"Count of animation item should be same to initial items"
);
info("Check the coordinates");
checkExpectedCoordinates(itemEls, initialCoordinatesResult);
});
function checkExpectedCoordinates(itemEls, initialCoordinatesResult) {
for (let i = 0; i < itemEls.length; i++) {
const expectedCoordinates = initialCoordinatesResult[i];
const itemEl = itemEls[i];
const svgEl = itemEl.querySelector("svg");
is(
svgEl.viewBox.baseVal.x,
expectedCoordinates.svgViewBoxX,
"X of viewBox of svg should be same"
);
is(
svgEl.viewBox.baseVal.width,
expectedCoordinates.svgViewBoxWidth,
"Width of viewBox of svg should be same"
);
const pathEl = svgEl.querySelector(".animation-computed-timing-path");
is(
pathEl.transform.baseVal[0].matrix.e,
expectedCoordinates.pathX,
"X of tansform of path element should be same"
);
const delayEl = itemEl.querySelector(".animation-delay-sign");
if (delayEl) {
const computedStyle = delayEl.ownerGlobal.getComputedStyle(delayEl);
is(
computedStyle.left,
expectedCoordinates.delayX,
"X of delay sign should be same"
);
is(
computedStyle.width,
expectedCoordinates.delayWidth,
"Width of delay sign should be same"
);
} else {
ok(!expectedCoordinates.delayX, "X of delay sign should exist");
ok(!expectedCoordinates.delayWidth, "Width of delay sign should exist");
}
const endDelayEl = itemEl.querySelector(".animation-end-delay-sign");
if (endDelayEl) {
const computedStyle = endDelayEl.ownerGlobal.getComputedStyle(endDelayEl);
is(
computedStyle.left,
expectedCoordinates.endDelayX,
"X of endDelay sign should be same"
);
is(
computedStyle.width,
expectedCoordinates.endDelayWidth,
"Width of endDelay sign should be same"
);
} else {
ok(!expectedCoordinates.endDelayX, "X of endDelay sign should exist");
ok(
!expectedCoordinates.endDelayWidth,
"Width of endDelay sign should exist"
);
}
}
}
|
