824421f34ef03068538964efbfedf5efa2fd3475
[WebKit-https.git] / LayoutTests / fast / animation / css-animation-resuming-when-visible-with-style-change.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
2 <html>
3 <head>
4 <style>
5 #testDiv {
6     transition: transform 30s linear, color 2s, left 4s linear, top 4s linear;
7     position: absolute;
8 }
9 </style>
10 </head>
11 <body>
12 <script src="../../resources/js-test.js"></script>
13 <div id="testDiv">TEST</div>
14 <script>
15 description("Tests that CSS animations that are created while the page is hidden are properly resumed when the page becomes visible.");
16 jsTestIsAsync = true;
17
18 function registerAnimation()
19 {
20     testDiv.style.transform = "rotate(170deg) scale(0.2781941414347284)";
21 }
22
23 function checkTransformAndFinishTest()
24 {
25     shouldBecomeEqual("window.getComputedStyle(testDiv).transform != pausedTransform", "true", finishJSTest);
26 }
27
28 onload = function() {
29     debug("Suspend animations");
30     internals.suspendAnimations();
31
32     setTimeout(function() {
33         registerAnimation("170");
34         setTimeout(function() {
35             shouldBeTrue("internals.animationsAreSuspended()");
36             shouldBe("internals.numberOfActiveAnimations()", "0");
37
38             pausedTransform = window.getComputedStyle(testDiv).transform;
39
40             // Change style to make sure it does not make the animation active.
41             testDiv.style.backgroundColor = "green";
42             testDiv.offsetLeft;
43
44             shouldBeTrue("internals.animationsAreSuspended()");
45             shouldBe("internals.numberOfActiveAnimations()", "0");
46
47             setTimeout(function() {
48                 shouldBe("window.getComputedStyle(testDiv).transform", "pausedTransform");
49
50                 debug("Resume animations");
51                 internals.resumeAnimations();
52                 shouldBecomeEqual("internals.numberOfActiveAnimations()", "1", checkTransformAndFinishTest);
53             }, 50);
54         }, 500);
55     }, 0);
56 }
57 </script>
58 </body>
59 </html>