Keyframe animation doesn't 't show up in the Animations timeline
[WebKit-https.git] / LayoutTests / inspector / animation / lifecycle-css-animation.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="../../http/tests/inspector/resources/inspector-test.js"></script>
5 <script src="resources/lifecycle-utilities.js"></script>
6 <style>
7 @keyframes fade-in {
8     from {
9         color: red;
10         opacity: 0;
11     }
12     50% {
13         color: green;
14         opacity: 0.5;
15     }
16     to {
17         color: blue;
18         opacity: 1;
19     }
20 }
21 div#target.active {
22     animation-name: fade-in;
23     animation-duration: 400ms;
24     animation-timing-function: cubic-bezier(0.1, 0.2, 0.3, 0.4);
25     animation-delay: 100ms;
26     animation-direction: alternate;
27     animation-fill-mode: both;
28 }
29 div#target.active.finite {
30     animation-iteration-count: 2;
31 }
32 div#target.active.infinite {
33     animation-iteration-count: infinite;
34 }
35 </style>
36 <script>
37 function test()
38 {
39     let suite = InspectorTest.createAsyncSuite("Animation.Lifecycle");
40
41     suite.addTestCase({
42         name: "Animation.Lifecycle.CSSAnimation.Finite",
43         description: "Check that Web Inspector is notified whenever CSS animations are created/destroyed.",
44         async test() {
45             InspectorTest.expectEqual(WI.animationManager.animationCollection.size, 0, "There should not be any animations.");
46
47             let [animation] = await Promise.all([
48                 InspectorTest.AnimationLifecycleUtilities.awaitAnimationCreated(WI.Animation.Type.CSSAnimation),
49                 InspectorTest.evaluateInPage(`document.getElementById("target").classList.add("active", "finite")`),
50             ]);
51
52             await Promise.all([
53                 InspectorTest.AnimationLifecycleUtilities.awaitAnimationDestroyed(animation.animationId),
54                 InspectorTest.AnimationLifecycleUtilities.destroyAnimations(),
55                 InspectorTest.evaluateInPage(`document.getElementById("target").classList.remove("active", "finite")`),
56             ]);
57         },
58     });
59
60     suite.addTestCase({
61         name: "Animation.Lifecycle.CSSAnimation.Infinite",
62         description: "Check that Web Inspector is notified whenever CSS animations are created/destroyed.",
63         async test() {
64             InspectorTest.expectEqual(WI.animationManager.animationCollection.size, 0, "There should not be any animations.");
65
66             let [animation] = await Promise.all([
67                 InspectorTest.AnimationLifecycleUtilities.awaitAnimationCreated(WI.Animation.Type.CSSAnimation),
68                 InspectorTest.evaluateInPage(`document.getElementById("target").classList.add("active", "infinite")`),
69             ]);
70
71             await Promise.all([
72                 InspectorTest.AnimationLifecycleUtilities.awaitAnimationDestroyed(animation.animationId),
73                 InspectorTest.AnimationLifecycleUtilities.destroyAnimations(),
74                 InspectorTest.evaluateInPage(`document.getElementById("target").classList.remove("active", "infinite")`),
75             ]);
76         },
77     });
78
79     suite.runTestCasesAndFinish();
80 }
81 </script>
82 </head>
83 <body onload="runTest()">
84     <p>Tests for the Animation.animationCreated and Animation.animationDestroyed events.</p>
85     <div id="target"></div>
86 </body>
87 </html>