| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #testDiv { |
| transition: transform 30s linear, color 2s, left 4s linear, top 4s linear; |
| position: absolute; |
| } |
| </style> |
| </head> |
| <body> |
| <script src="../../resources/js-test.js"></script> |
| <div id="testDiv">TEST</div> |
| <script> |
| description("Tests that CSS animations that are created while the page is hidden are properly resumed when the page becomes visible."); |
| jsTestIsAsync = true; |
| |
| function registerAnimation() |
| { |
| testDiv.style.transform = "rotate(170deg) scale(0.2781941414347284)"; |
| } |
| |
| function checkTransformAndFinishTest() |
| { |
| shouldBecomeEqual("window.getComputedStyle(testDiv).transform != pausedTransform", "true", finishJSTest); |
| } |
| |
| onload = function() { |
| debug("Suspend animations"); |
| internals.suspendAnimations(); |
| |
| setTimeout(function() { |
| registerAnimation("170"); |
| setTimeout(function() { |
| shouldBeTrue("internals.animationsAreSuspended()"); |
| shouldBe("internals.numberOfActiveAnimations()", "0"); |
| |
| pausedTransform = window.getComputedStyle(testDiv).transform; |
| |
| // Change style to make sure it does not make the animation active. |
| testDiv.style.backgroundColor = "green"; |
| testDiv.offsetLeft; |
| |
| shouldBeTrue("internals.animationsAreSuspended()"); |
| shouldBe("internals.numberOfActiveAnimations()", "0"); |
| |
| setTimeout(function() { |
| shouldBe("window.getComputedStyle(testDiv).transform", "pausedTransform"); |
| |
| debug("Resume animations"); |
| internals.resumeAnimations(); |
| shouldBecomeEqual("internals.numberOfActiveAnimations()", "1", checkTransformAndFinishTest); |
| }, 50); |
| }, 500); |
| }, 0); |
| } |
| </script> |
| </body> |
| </html> |
