LayoutTests/animations/needs-layout.html

<style>
    #overlay {
        position: absolute;
        left: 100px;
        top: 100px;
        width: 200px;
        height: 200px;
        transform: translate(100px);
        background-color: green;
    }

    #container .child {
        position: absolute;
        left: 150px;
        top: 150px;
        width: 100px;
        height: 100px;
        background-color: red;
        animation: 5s anim;
    }

    @keyframes anim {
        0% {
            transform: translate(80%, 0);
        }
        100% {
            transform: translate(80%, 100px);
        }
    }

</style>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

function test() {
    var el = document.getElementById("container");
    var child = document.createElement("div");

    child.classList.add("child");
    el.appendChild(child);
    setTimeout(function () {
        child.style.webkitAnimationPlayState = "paused";
        if (window.testRunner)
            testRunner.notifyDone();
    }, 10);
}

window.addEventListener("load", function () {
    setTimeout(test, 10);
}, false);
</script>
<body>
    <div id="container"></div>
    <div id="overlay"></div>
</body>
</html>