| <html> |
| <style> |
| div { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background: blue; |
| } |
| </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> |
| |
| Delay is set to -1s |
| <br> |
| <div id="test1a">MT</div> |
| <div id="test1b">CT</div> |
| |
| Delay is 0 |
| <br> |
| <div id="test2a">MT</div> |
| <div id="test2b">CT</div> |
| |
| Delay is set to 1s |
| <br> |
| <div id="test3a">MT</div> |
| <div id="test3b">CT</div> |
| |
| <script> |
| var transformKeyframes = [ |
| {transform: 'translateX(0px)'}, |
| {transform: 'translateX(500px)'}]; |
| var leftKeyframes = [ |
| {left: '0'}, |
| {left: '500px'}]; |
| var players = []; |
| players.push(test1a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 2, |
| fill: 'forwards', |
| delay: -1000 |
| })); |
| players.push(test1b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 2, |
| fill: 'forwards', |
| delay: -1000 |
| })); |
| players.push(test2a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 4, |
| fill: 'forwards', |
| delay: 0 |
| })); |
| players.push(test2b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 4, |
| fill: 'forwards', |
| delay: 0 |
| })); |
| players.push(test3a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 8, |
| fill: 'forwards', |
| delay: 1000 |
| })); |
| players.push(test3b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 8, |
| fill: 'forwards', |
| delay: 1000 |
| })); |
| |
| setTimeout(function() { |
| players.forEach(function(player) { |
| player.playbackRate = 0.5; |
| }); |
| }, 500); |
| setTimeout(function() { |
| players.forEach(function(player) { |
| player.playbackRate = 1.5; |
| }); |
| }, 1500); |
| </script> |
| </body> |
| </html> |
