Keyframe animation doesn't 't show up in the Animations timeline
[WebKit-https.git] / LayoutTests / inspector / animation / resources / lifecycle-utilities.js
1 window.animations = [];
2
3 function createAnimation(selector, keyframes = [], options = {}) {
4     let animation = null;
5
6     let target = document.querySelector(selector);
7     if (target)
8         animation = target.animate(keyframes, options);
9     else
10         animation = new Animation(new KeyframeEffect(null, keyframes, options));
11
12     window.animations.push(animation);
13 }
14
15 function destroyAnimations() {
16     for (let animation of window.animations) {
17         if (!animation)
18             return;
19
20         animation.cancel();
21
22         if (animation.effect) {
23             if (animation.effect.target) {
24                 animation.effect.target.remove();
25                 animation.effect.target = null;
26             }
27
28             animation.effect = null;
29         }
30     }
31
32     window.animations = [];
33
34     // Force GC to make sure the animation and it's target are both destroyed, as otherwise the
35     // frontend will not receive Animation.animationDestroyed events.
36     setTimeout(() => {
37         GCController.collect();
38     });
39 }
40
41 TestPage.registerInitializer(() => {
42     function jsonKeyframeFilter(key, value) {
43         if (key === "easing" && value instanceof WI.CubicBezier)
44             return value.toString();
45         return value;
46     }
47
48     InspectorTest.AnimationLifecycleUtilities = {};
49
50     InspectorTest.AnimationLifecycleUtilities.awaitAnimationCreated = async function(animationType) {
51         let nameChangedPromise = null;
52         if (animationType === WI.Animation.Type.WebAnimation)
53             nameChangedPromise = WI.Animation.awaitEvent(WI.Animation.Event.NameChanged);
54
55         let animationCollectionItemAddedEvent = await WI.animationManager.animationCollection.awaitEvent(WI.Collection.Event.ItemAdded);
56
57         let animation = animationCollectionItemAddedEvent.data.item;
58
59         await nameChangedPromise;
60
61         InspectorTest.pass(`Animation created '${animation.displayName}'.`);
62
63         for (let i = 0; i < animation.backtrace.length; ++i) {
64             let callFrame = animation.backtrace[i];
65             let traceText = `  ${i}: `;
66             traceText += callFrame.functionName || "(anonymous function)";
67
68             if (callFrame.nativeCode)
69                 traceText += " - [native code]";
70             else if (callFrame.programCode)
71                 traceText += " - [program code]";
72             else if (callFrame.sourceCodeLocation) {
73                 let location = callFrame.sourceCodeLocation;
74                 traceText += " - " + sanitizeURL(location.sourceCode.url) + `:${location.lineNumber}:${location.columnNumber}`;
75             }
76
77             InspectorTest.log(traceText);
78         }
79
80         InspectorTest.expectEqual(animation.animationType, animationType, `Animation type should be ${WI.Animation.displayNameForAnimationType(animationType)}.`);
81
82         if (animation.startDelay)
83             InspectorTest.log("startDelay: " + JSON.stringify(animation.startDelay));
84         if (animation.endDelay)
85             InspectorTest.log("endDelay: " + JSON.stringify(animation.endDelay));
86         if (animation.iterationCount)
87             InspectorTest.log("iterationCount: " + (animation.iterationCount === Infinity ? "Infinity" : JSON.stringify(animation.iterationCount)));
88         if (animation.iterationStart)
89             InspectorTest.log("iterationStart: " + JSON.stringify(animation.iterationStart));
90         if (animation.iterationDuration)
91             InspectorTest.log("iterationDuration: " + JSON.stringify(animation.iterationDuration));
92         if (animation.timingFunction)
93             InspectorTest.log("timingFunction: " + JSON.stringify(String(animation.timingFunction)));
94         if (animation.playbackDirection)
95             InspectorTest.log("playbackDirection: " + JSON.stringify(animation.playbackDirection));
96         if (animation.fillMode)
97             InspectorTest.log("fillMode: " + JSON.stringify(animation.fillMode));
98         if (animation.keyframes.length) {
99             InspectorTest.log("keyframes:");
100             InspectorTest.json(animation.keyframes, jsonKeyframeFilter);
101         }
102
103         InspectorTest.newline();
104
105         return animation
106     };
107
108     InspectorTest.AnimationLifecycleUtilities.awaitAnimationDestroyed = async function(animationIdentifier) {
109         let animationCollectionItemRemovedEvent = await WI.animationManager.animationCollection.awaitEvent(WI.Collection.Event.ItemRemoved)
110
111         InspectorTest.pass("Animation destroyed.");
112
113         let animation = animationCollectionItemRemovedEvent.data.item;
114         InspectorTest.expectEqual(animation.animationId, animationIdentifier, "Removed animation has expected ID.");
115     };
116
117     InspectorTest.AnimationLifecycleUtilities.createAnimation = async function(animationType, {selector, keyframes, options} = {}) {
118         InspectorTest.log("Creating animation...\n");
119
120         let stringifiedSelector = JSON.stringify(selector || null);
121         let stringifiedKeyframes = JSON.stringify(keyframes || []);
122         let stringifiedOptions = JSON.stringify(options || {});
123
124         let [animation] = await Promise.all([
125             InspectorTest.AnimationLifecycleUtilities.awaitAnimationCreated(animationType),
126             InspectorTest.evaluateInPage(`createAnimation(${stringifiedSelector}, ${stringifiedKeyframes}, ${stringifiedOptions})`)
127         ]);
128
129         return animation;
130     };
131
132     InspectorTest.AnimationLifecycleUtilities.destroyAnimations = async function() {
133         InspectorTest.log("Destroying animations...\n");
134         await InspectorTest.evaluateInPage(`destroyAnimations()`);
135     };
136 });