[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / transitions / created-while-suspended.html
1 <!DOCTYPE html>
2 <title>Test that newly created transitions do not run while we are suspended</title>
3 <style>
4 #box {
5     position: relative;
6     left: 0px;
7     height: 50px;
8     width: 50px;
9     background-color: blue;
10 }
11 </style>
12 <script>
13 var box;
14
15 let transitionAllowedToRun = false;
16
17 function suspend()
18 {
19     if (window.internals)
20         internals.suspendAnimations();
21 }
22
23 function resume()
24 {
25     if (window.internals)
26         internals.resumeAnimations();
27 }
28
29 function transitionEnded(event)
30 {
31     if (transitionAllowedToRun)
32         log("PASS: Transition ended on element with id: " + event.target.id);
33     else
34         log("FAIL: Transition ended on element with id: " + event.target.id);
35
36     if (window.testRunner)
37         testRunner.notifyDone();
38 }
39
40 function suspendAndCreate()
41 {
42     log("*** Suspending Animations/Transitions");
43     suspend();
44     setTimeout(function() {
45         if (window.internals)
46             log("Transitions should be suspended: " + (window.internals.animationsAreSuspended() ? "PASS" : "FAIL"));
47
48         log("*** Creating the box.")
49         box = document.createElement("div");
50         box.id = "box";
51         document.addEventListener("webkitTransitionEnd", transitionEnded, false);
52         document.body.insertBefore(box, document.querySelector("#results"));
53         setTimeout(function() {
54             log("*** Adding transition property and setting left to 100px. We should NOT see transition events.")
55             box.style.webkitTransitionDuration = "100ms";
56             box.style.left = "100px";
57             setTimeout(resumeAnimations, 200);
58         }, 100);
59     }, 100);
60 }
61
62 function resumeAnimations()
63 {
64     log("*** Resuming Animations/Transitions");
65     transitionAllowedToRun = true;
66     resume();
67     if (window.internals)
68         log("Transitions should not be suspended: " + (window.internals.animationsAreSuspended() ? "FAIL" : "PASS"));
69 }
70
71 function startTest()
72 {
73     log("*** Starting test.")
74
75     if (window.internals)
76         log("Transitions should not be suspended: " + (window.internals.animationsAreSuspended() ? "FAIL" : "PASS"));
77
78     suspendAndCreate();
79 }
80
81 function log(message)
82 {
83     var results = document.getElementById("results");
84     results.innerHTML = results.innerHTML + message + "<br>";
85 }
86
87 if (window.testRunner) {
88     testRunner.waitUntilDone();
89     testRunner.dumpAsText();
90 }
91
92 window.addEventListener("load", startTest, false);
93
94 </script>
95 <p>This test creates a box, adds a transition, then sets the left property. It will only have reproducible output when run in the test system</p>
96 <div id="results">
97 </div>