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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test whether animation was changed after altering following properties.
// * delay
// * direction
// * duration
// * easing (animationTimingFunction in case of CSS Animationns)
// * fill
// * iterations
// * endDelay (script animation only)
// * iterationStart (script animation only)
// * playbackRate (script animation only)
const SEC = 1000;
const TEST_EFFECT_TIMING = {
delay: 20 * SEC,
direction: "reverse",
duration: 20 * SEC,
easing: "steps(1)",
endDelay: 20 * SEC,
fill: "backwards",
iterations: 20,
iterationStart: 20 * SEC,
};
const TEST_PLAYBACK_RATE = 0.1;
add_task(async function () {
await addTab(URL_ROOT + "doc_simple_animation.html");
await removeAnimatedElementsExcept([".animated", ".end-delay"]);
const { animationInspector } = await openAnimationInspector();
await setCSSAnimationProperties(animationInspector);
await assertProperties(animationInspector.state.animations[0], false);
await setScriptAnimationProperties(animationInspector);
await assertProperties(animationInspector.state.animations[1], true);
});
async function setCSSAnimationProperties(animationInspector) {
const properties = {
animationDelay: `${TEST_EFFECT_TIMING.delay}ms`,
animationDirection: TEST_EFFECT_TIMING.direction,
animationDuration: `${TEST_EFFECT_TIMING.duration}ms`,
animationFillMode: TEST_EFFECT_TIMING.fill,
animationIterationCount: TEST_EFFECT_TIMING.iterations,
animationTimingFunction: TEST_EFFECT_TIMING.easing,
};
await setStyles(animationInspector, ".animated", properties);
}
async function setScriptAnimationProperties(animationInspector) {
await setEffectTimingAndPlayback(
animationInspector,
".end-delay",
TEST_EFFECT_TIMING,
TEST_PLAYBACK_RATE
);
}
async function assertProperties(animation, isScriptAnimation) {
await waitUntil(() => animation.state.delay === TEST_EFFECT_TIMING.delay);
ok(true, `Delay should be ${TEST_EFFECT_TIMING.delay}`);
await waitUntil(
() => animation.state.direction === TEST_EFFECT_TIMING.direction
);
ok(true, `Direction should be ${TEST_EFFECT_TIMING.direction}`);
await waitUntil(
() => animation.state.duration === TEST_EFFECT_TIMING.duration
);
ok(true, `Duration should be ${TEST_EFFECT_TIMING.duration}`);
await waitUntil(() => animation.state.fill === TEST_EFFECT_TIMING.fill);
ok(true, `Fill should be ${TEST_EFFECT_TIMING.fill}`);
await waitUntil(
() => animation.state.iterationCount === TEST_EFFECT_TIMING.iterations
);
ok(true, `Iterations should be ${TEST_EFFECT_TIMING.iterations}`);
if (isScriptAnimation) {
await waitUntil(() => animation.state.easing === TEST_EFFECT_TIMING.easing);
ok(true, `Easing should be ${TEST_EFFECT_TIMING.easing}`);
await waitUntil(
() => animation.state.iterationStart === TEST_EFFECT_TIMING.iterationStart
);
ok(true, `IterationStart should be ${TEST_EFFECT_TIMING.iterationStart}`);
await waitUntil(() => animation.state.playbackRate === TEST_PLAYBACK_RATE);
ok(true, `PlaybackRate should be ${TEST_PLAYBACK_RATE}`);
} else {
await waitUntil(
() =>
animation.state.animationTimingFunction === TEST_EFFECT_TIMING.easing
);
ok(true, `AnimationTimingFunction should be ${TEST_EFFECT_TIMING.easing}`);
}
}
|
