<html>
<style>
div {
    position: relative;
    height: 100px;
    width: 100px;
    background: blue;
    transform: translateZ(0);
    animation-direction: alternate;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 6;
}

.test0 {
    animation-delay: -30s;
}

.test1 {
    animation-delay: -3s;
}

.test2 {
    animation-delay: 0s;
}

.test3 {
    animation-delay: 3s;
}

.anim-left {
    animation-name: anim-left;
    z-index: 100;
}

.anim-transform {
    animation-name: anim-transform;
    z-index: 200;
}

@keyframes anim-left {
    0% {
        left: 0px;
    }
    100% {
        left: 300px;
    }
}

@keyframes anim-transform {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(300px);
    }
}
</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 boxes are mostly in sync (there might be a small
offset between them).
</p>
<hr>

Start delay -30s (starts 30 seconds into animation by which the animation has finished, hence no animation)
<br>
<div class='test0 anim-left'></div>
<div class='test0 anim-transform'></div>

Start delay -3s (starts 3 seconds into the animation, should finish first.)
<br>
<div class='test1 anim-left'></div>
<div class='test1 anim-transform'></div>

Start delay 0s (no start delay, should finish second.)
<br>
<div class='test2 anim-left'></div>
<div class='test2 anim-transform'></div>

Start delay 3s (starts 3 seconds after page load, should finish last.)
<br>
<div class='test3 anim-left'></div>
<div class='test3 anim-transform'></div>
</body>
</html>