blob: d69e7b48994c222eb317af9b173e9a8339c473ab [file] [log] [blame]
<html>
<style>
div {
position: relative;
height: 100px;
width: 100px;
background: blue;
}
</style>
<body>
<p>
Each section has below has two boxes.
<ul>
<li>Top - runs on main thread.</li>
<li>Bottom - runs on the compositor, unless otherwise specified.</li>
</ul>
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 0s.
<br>
<div class='test0 anim-left'></div>
<div class='test0 anim-transform'></div>
Start delay 3s. Bottom does not run on compositor.
<br>
<div class='test1 anim-left'></div>
<div class='test1 anim-transform'></div>
Start delay 6s.
<br>
<div class='test2 anim-left'></div>
<div class='test2 anim-transform'></div>
Start delay 9s.
<br>
<div class='test3 anim-left'></div>
<div class='test3 anim-transform'></div>
<script>
document.getElementsByClassName('test0 anim-left')[0].animate(
[{left: '0'}, {left: '300px'}],
{duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});
document.getElementsByClassName('test0 anim-transform')[0].animate(
[{transform: 'translateX(0)'}, {transform: 'translateX(300px)'}],
{duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});
setTimeout(function() {
document.getElementsByClassName('test1 anim-left')[0].animate(
[{left: '0', easing: 'ease-in'}, {left: '300px'}],
{duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});
document.getElementsByClassName('test1 anim-transform')[0].animate(
[{transform: 'translateX(0)', easing: 'ease-in'}, {transform: 'translateX(300px)'}],
{duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});
}, 3000);
setTimeout(function() {
document.getElementsByClassName('test2 anim-left')[0].animate(
[{left: '0', easing: 'ease-in'}, {left: '300px'}],
{duration: 2000, easing: 'ease-out'});
document.getElementsByClassName('test2 anim-transform')[0].animate(
[{transform: 'translateX(0)', easing: 'ease-in'}, {transform: 'translateX(300px)'}],
{duration: 2000, easing: 'ease-out'});
}, 6000);
setTimeout(function() {
document.getElementsByClassName('test3 anim-left')[0].animate([
{left: '0'},
{left: '100px', easing: 'ease-in'},
{left: '200px'},
{left: '300px'}
], {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});
document.getElementsByClassName('test3 anim-transform')[0].animate([
{transform: 'translateX(0)'},
{transform: 'translateX(100px)', easing: 'ease-in'},
{transform: 'translateX(200px)'},
{transform: 'translateX(300px)'}
], {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});
}, 9000);
</script>
</body>
</html>