<!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>