blob: e0d4b0ec525917b2d2d71f1fb0a97eb856bb5272 [file] [log] [blame]
<!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 {
position: relative;
height: 100px;
width: 100px;
background-color: blue;
-webkit-animation-name: move;
-webkit-animation-duration: 0.1s;
-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()
{
if (window.internals)
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()
{
if (window.internals)
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()
{
if (window.internals)
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);
if (window.internals)
log("Animations should not be suspended: " + (window.internals.animationsAreSuspended() ? "FAIL" : "PASS"));
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>