compositor-neutral-keyframes.html | Explore in Territory

<html>
<style>
div {
    position: relative;
    height: 100px;
    width: 100px;
    background: blue;
    will-change: transform;
    left: 0px;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 2;
}

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

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

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

@keyframes anim-transform {
    100% { transform: translateX(300px); }
}
</style>
<body>
<p>
The 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>

<div id="target-left" class='anim-left'></div>
<div id="target-transform" class='anim-transform'></div>

</body>
<script>
  setTimeout(function() { document.getElementById('target-left').style.left = '500px'; }, 2000);
  setTimeout(function() { document.getElementById('target-transform').style.transform = 'translateX(500px)'; }, 2000);
</script>
</html>

chromium/third_party/blink/manual_tests/animation/compositor-neutral-keyframes.html