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