<html>
<style>
div {
    position: relative;
    height: 100px;
    width: 100px;
    background: blue;
    transition: left, transform 2s, 2s;
    left: 0px;
    transform: translateX(0);
}

.transform-transition {
    transform: translateX(500px);
}

.left-transition {
     left: 500px;
}

.delay1 {
    transition-delay: 0.5s;
}

.delay2 {
    transition-delay: 1s;
}
</style>
<body>
<p>
Each section below has two boxes, the top runs on the main thread, the bottom
on the compositor. The animations should be identical but start at different
times.
</p><p>
This test is successful if the each pair of boxes are mostly in sync (there
might be a small offset between them).
</p>
<hr>

No delay
<br>
<div class="main-thread"></div>
<div class="compositor"></div>

Delay - 0.5s
<br>
<div class="main-thread delay1"></div>
<div class="compositor delay1"></div>

Delay - 1s
<br>
<div class="main-thread delay2"></div>
<div class="compositor delay2"></div>

<script>
window.onload = function()
{
    function toggleTransition() {
        var mainThread = document.querySelectorAll(".main-thread");
        for (var i = 0; i < mainThread.length; i++)
            mainThread[i].classList.toggle("left-transition");
        var compositor = document.querySelectorAll(".compositor");
        for (var i = 0; i < compositor.length; i++)
            compositor[i].classList.toggle("transform-transition");
    }

    toggleTransition();
    setTimeout(toggleTransition, 300);
    setTimeout(toggleTransition, 1000);
    setTimeout(toggleTransition, 2500);
}
</script>

</body>
</html>