compositor-animation-2-keyframe.html

<html>
<style>
div {
    position: relative;
    height: 100px;
    width: 100px;
    background: blue;
}
</style>
<body>
<p>
Each section below has three boxes.
<ul>
  <li>Top - runs on the main thread.</li>
  <li>Middle - runs on the compositor, timing function set on whole animation.</li>
  <li>Bottom - runs on the compositor, timing function set on the first keyframe.</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 (no start delay, should finish first.)
<br>
<div class='test0 anim-left'></div>
<div class='test0 anim-transform'></div>
<div class='test0 anim-transform-keyframe'></div>

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

<script>
  document.getElementsByClassName('test0 anim-left')[0].animate(
      [{left: '0'}, {left: '300px'}],
      {duration: 2000, easing: 'ease-in'});

  document.getElementsByClassName('test0 anim-transform')[0].animate(
      [{transform: 'translateX(0)'}, {transform: 'translateX(300px)'}],
      {duration: 2000, easing: 'ease-in'});

  document.getElementsByClassName('test0 anim-transform-keyframe')[0].animate(
      [{transform: 'translateX(0)', easing: 'ease-in'}, {transform: 'translateX(300px)'}],
      {duration: 2000});

  // Delay these manually otherwise won't hit the compositor.
  setTimeout(function() {
    document.getElementsByClassName('test1 anim-left')[0].animate(
        [{left: '0'}, {left: '300px'}],
        {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});

    document.getElementsByClassName('test1 anim-transform')[0].animate(
        [{transform: 'translateX(0)'}, {transform: 'translateX(300px)'}],
        {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});

    document.getElementsByClassName('test1 anim-transform-keyframe')[0].animate(
        [{transform: 'translateX(0)', easing: 'cubic-bezier(.5, -1, .5, 2)'}, {transform: 'translateX(300px)'}],
        {duration: 2000});
    }, 3000);
</script>
</body>
</html>
chromium/third_party/blink/manual_tests/animation/compositor-animation-2-keyframe.html
