blob: 4ee1d038b6994ff531cb4307ec8ee9d7a76c6166 [file] [log] [blame]
<!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)";
}
onload = function() {
setTimeout(function() {
registerAnimation("170");
setTimeout(function() {
shouldBeFalse("internals.animationsAreSuspended()");
shouldBe("internals.numberOfActiveAnimations()", "1");
debug("Suspend animations");
internals.suspendAnimations();
setTimeout(function() {
shouldBeTrue("internals.animationsAreSuspended()");
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()");
setTimeout(function() {
shouldBeTrue("internals.animationsAreSuspended()");
shouldBe("window.getComputedStyle(testDiv).transform", "pausedTransform");
debug("Resume animations...");
internals.resumeAnimations();
shouldBecomeEqual("window.getComputedStyle(testDiv).transform != pausedTransform", "true", finishJSTest);
}, 100);
}, 0);
}, 500);
}, 0);
}
</script>
</body>
</html>