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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that changing the cubic-bezier curve in the widget does change the dot animation
// preview too.
const {
CubicBezierWidget,
} = require("devtools/client/shared/widgets/CubicBezierWidget");
const {
PREDEFINED,
} = require("devtools/client/shared/widgets/CubicBezierPresets");
const TEST_URI = CHROME_URL_ROOT + "doc_cubic-bezier-01.html";
registerCleanupFunction(() => {
Services.prefs.clearUserPref("ui.prefersReducedMotion");
});
add_task(async function() {
const { host, doc } = await createHost("bottom", TEST_URI);
// Unset "prefers reduced motion", otherwise the dot animation preview won't be created.
// See Bug 1637842
// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
Services.prefs.setIntPref("ui.prefersReducedMotion", 0);
const container = doc.querySelector("#cubic-bezier-container");
const w = new CubicBezierWidget(container, PREDEFINED.linear);
await previewDotReactsToChanges(w, [0.6, -0.28, 0.74, 0.05]);
await previewDotReactsToChanges(w, [0.9, 0.03, 0.69, 0.22]);
await previewDotReactsToChanges(w, [0.68, -0.55, 0.27, 1.55]);
await previewDotReactsToChanges(w, PREDEFINED.ease, "ease");
await previewDotReactsToChanges(w, PREDEFINED["ease-in-out"], "ease-in-out");
w.destroy();
host.destroy();
});
async function previewDotReactsToChanges(widget, coords, expectedEasing) {
const onUpdated = widget.once("updated");
widget.coordinates = coords;
await onUpdated;
const animatedDot = widget.timingPreview.dot;
const animations = animatedDot.getAnimations();
if (!expectedEasing) {
expectedEasing = `cubic-bezier(${coords[0]}, ${coords[1]}, ${coords[2]}, ${coords[3]})`;
}
is(animations.length, 1, "The dot is animated");
const goingToRight = animations[0].effect.getKeyframes()[2];
is(
goingToRight.easing,
expectedEasing,
`The easing when going to the right was set correctly to ${coords}`
);
const goingToLeft = animations[0].effect.getKeyframes()[6];
is(
goingToLeft.easing,
expectedEasing,
`The easing when going to the left was set correctly to ${coords}`
);
}
|
