<!DOCTYPE html>
<title>Test that new animations do not run while we are suspended</title>
<style>
#box {
position: relative;
height: 100px;
width: 100px;
background-color: blue;
-webkit-animation-name: move;
-webkit-animation-duration: 0.1s;
}
#box-with-delay {
-webkit-animation-delay: 0.3s;
@-webkit-keyframes move {
from { left: 0; }
to { left: 500px; }
</style>
<script>
var animationsYetToEnd = 2;
function suspend()
{
if (window.internals)
internals.suspendAnimations();
function resume()
internals.resumeAnimations();
function animationStarted(event)
log("Animation started on element with id: " + event.target.id);
function animationEnded(event)
log("Animation ended on element with id: " + event.target.id);
animationsYetToEnd--;
if (!animationsYetToEnd)
endTest();
function addDivWithId(id)
var div = document.createElement("div");
div.id = id;
document.body.appendChild(div);
function addFirstBox()
log("Animations should be suspended: " + (window.internals.animationsAreSuspended() ? "PASS" : "FAIL"));
log("*** Adding first box with animation");
addDivWithId("box");
setTimeout(addSecondBox, 100);
function addSecondBox()
log("*** Adding second box with animation and delay");
addDivWithId("box-with-delay");
setTimeout(resumeAndContinue, 50);
function resumeAndContinue()
log("*** Resuming Animations");
resume();
function endTest()
log("Animations should not be suspended: " + (window.internals.animationsAreSuspended() ? "FAIL" : "PASS"));
log("*** Animations finished");
resume(); // Just in case.
if (window.testRunner)
testRunner.notifyDone();
function startTest()
document.addEventListener("webkitAnimationStart", animationStarted, false);
document.addEventListener("webkitAnimationEnd", animationEnded, false);
setTimeout(function() {
log("*** Suspending Animations");
suspend();
setTimeout(addFirstBox, 50);
}, 50);
function log(message)
var results = document.getElementById("results");
results.innerHTML = results.innerHTML + message + "<br>";
if (window.testRunner) {
testRunner.waitUntilDone();
testRunner.dumpAsText();
window.addEventListener("load", startTest, false);
</script>
<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>
<div id="results">
</div>