| <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> |
