<!-- webkit-test-runner [ enablePageCache=true ] -->
<style>
@-webkit-keyframes bounce {
    from {
        -webkit-transform: translate3d(0,0,0);
    }
    to {
        -webkit-transform: translate3d(200px,0,0);
    }
}

#animator {
    position: relative;
    top: 0px;
    width: 100px;
    height: 100px;
    background-color: blue;
    -webkit-animation-name: bounce;
    -webkit-animation-duration: 80ms;
    -webkit-animation-iteration-count: infinite;
}
</style>
<script>
var hasNavigated = false;

function sawIteration(event) {
    if (hasNavigated) {
        document.getElementById("results").innerText = "PASS: Saw iteration after navigation";
        testRunner.notifyDone();
    }
}

function startTest() {
    var animator = document.getElementById("animator");
    animator.addEventListener("webkitAnimationIteration", sawIteration, false);
    setTimeout(function() {
        hasNavigated = true;
        window.location.href = "resources/page-cache-helper.html";
    }, 200);
}

if (window.testRunner) {
    window.testRunner.dumpAsText();
    window.testRunner.waitUntilDone();
}

window.addEventListener("load", startTest, false);
</script>
<p>
    This tests that animations continue when restored from the page cache.
</p>

<div id="animator"></div>
<div id="results"></div>