compositor-animation-multiple-timelines.html

<html>
<style>
div {
    position: relative;
    height: 100px;
    width: 100px;
    background: yellow;
}
</style>
<body>
<p>
Each section below has two boxes, the top runs on the main thread, the bottom
on the compositor.
</p><p>
This test is successful if the boxes are mostly in sync and all finish at the
same time.
</p>
<hr>

Multiple iframes test.
<br>
<div id="test1_blink">BLINK THREAD</div>
<div id="test1_impl">IMPL THREAD</div>
<hr>

<script>
var leftKeyframes = [
    {left: '100px'},
    {left: '600px'}
    ];
var translateKeyframes = [
    {transform: 'translateX(100px)'},
    {transform: 'translateX(600px)'}
    ];

var player1_blink = test1_blink.animate(leftKeyframes, {
        duration: 5000,
        delay: 100,
    });
var player1_impl = test1_impl.animate(translateKeyframes, {
        duration: 5000,
        delay: 100,
    });
</script>

<iframe src="compositor-animation-steps.html" style="border: 0; width: 100%; height: 50%">No iframe</iframe>

<iframe src="compositor-animation-same-property.html" style="border: 0; width: 100%; height: 50%">No iframe</iframe>

</body>
</html>

chromium/third_party/blink/manual_tests/animation/compositor-animation-multiple-timelines.html