[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / added-while-suspended.html
1 <!DOCTYPE html>
2 <title>Test that new animations do not run while we are suspended</title>
3 <style>
4 #box {
5     position: relative;
6     height: 100px;
7     width: 100px;
8     background-color: blue;
9     -webkit-animation-name: move;
10     -webkit-animation-duration: 0.1s;
11 }
12
13 #box-with-delay {
14     position: relative;
15     height: 100px;
16     width: 100px;
17     background-color: blue;
18     -webkit-animation-name: move;
19     -webkit-animation-duration: 0.1s;
20     -webkit-animation-delay: 0.3s;
21 }
22
23 @-webkit-keyframes move {
24     from { left: 0; }
25     to { left: 500px; }
26 }
27 </style>
28 <script>
29
30 var animationsYetToEnd = 2;
31
32 function suspend()
33 {
34     if (window.internals)
35         internals.suspendAnimations();
36 }
37
38 function resume()
39 {
40     if (window.internals)
41         internals.resumeAnimations();
42 }
43
44 function animationStarted(event)
45 {
46     log("Animation started on element with id: " + event.target.id);
47 }
48
49 function animationEnded(event)
50 {
51     log("Animation ended on element with id: " + event.target.id);
52     animationsYetToEnd--;
53     if (!animationsYetToEnd)
54         endTest();
55 }
56
57 function addDivWithId(id)
58 {
59     var div = document.createElement("div");
60     div.id = id;
61     document.body.appendChild(div);
62 }
63
64 function addFirstBox()
65 {
66     if (window.internals)
67         log("Animations should be suspended: " + (window.internals.animationsAreSuspended() ? "PASS" : "FAIL"));
68
69     log("*** Adding first box with animation");
70     addDivWithId("box");
71     setTimeout(addSecondBox, 100);
72 }
73
74 function addSecondBox()
75 {
76     log("*** Adding second box with animation and delay");
77     addDivWithId("box-with-delay");
78     setTimeout(resumeAndContinue, 50);
79 }
80
81 function resumeAndContinue()
82 {
83     log("*** Resuming Animations");
84     resume();
85 }
86
87 function endTest()
88 {
89     if (window.internals)
90         log("Animations should not be suspended: " + (window.internals.animationsAreSuspended() ? "FAIL" : "PASS"));
91     log("*** Animations finished");
92     resume(); // Just in case.
93     if (window.testRunner)
94         testRunner.notifyDone();
95 }
96
97 function startTest()
98 {
99     document.addEventListener("webkitAnimationStart", animationStarted, false);
100     document.addEventListener("webkitAnimationEnd", animationEnded, false);
101
102     if (window.internals)
103         log("Animations should not be suspended: " + (window.internals.animationsAreSuspended() ? "FAIL" : "PASS"));
104
105     setTimeout(function() {
106         log("*** Suspending Animations");
107         suspend();
108         setTimeout(addFirstBox, 50);
109     }, 50);
110 }
111
112 function log(message)
113 {
114     var results = document.getElementById("results");
115     results.innerHTML = results.innerHTML + message + "<br>";
116 }
117
118 if (window.testRunner) {
119     testRunner.waitUntilDone();
120     testRunner.dumpAsText();
121 }
122
123 window.addEventListener("load", startTest, false);
124
125 </script>
126 <p>This test adds some elements to the document when animations should be paused. It will only have reproducible output when run in the test system</p>
127 <div id="results">
128 </div>