| <html> |
| <style> |
| div { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background: yellow; |
| } |
| </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> |
| |
| Add second translate animation on timeout (with fill=forwards) |
| <br> |
| <div id="test1_blink">BLINK THREAD</div> |
| <div id="test1_impl">IMPL THREAD</div> |
| <hr> |
| |
| Add second translate animation on timeout if first one was paused earlier |
| <br> |
| <div id="test2_blink">BLINK THREAD</div> |
| <div id="test2_impl">IMPL THREAD</div> |
| <hr> |
| |
| Add second translate animation on timeout if first one was finished earlier |
| <br> |
| <div id="test3_blink">BLINK THREAD</div> |
| <div id="test3_impl">IMPL THREAD</div> |
| <hr> |
| |
| Add second translate animation on timeout if first higher-priority one was paused earlier |
| <br> |
| <div id="test4_blink">BLINK THREAD</div> |
| <div id="test4_impl">IMPL THREAD</div> |
| <hr> |
| |
| <script> |
| var leftKeyframes = [ |
| {left: '100px'}, |
| {left: '600px'} |
| ]; |
| var translateKeyframes = [ |
| {transform: 'translateX(100px)'}, |
| {transform: 'translateX(600px)'} |
| ]; |
| |
| var leftKeyframes2 = [ |
| {left: '600px'}, |
| {left: '700px'} |
| ]; |
| var translateKeyframes2 = [ |
| {transform: 'translateX(600px)'}, |
| {transform: 'translateX(700px)'} |
| ]; |
| |
| var player1_blink = test1_blink.animate(leftKeyframes, { |
| duration: 5000, |
| delay: 100, |
| fill: 'forwards' |
| }); |
| var player1_impl = test1_impl.animate(translateKeyframes, { |
| duration: 5000, |
| delay: 100, |
| fill: 'forwards' |
| }); |
| |
| var player2_blink = test2_blink.animate(leftKeyframes, { |
| duration: 5000, |
| delay: 100, |
| }); |
| var player2_impl = test2_impl.animate(translateKeyframes, { |
| duration: 5000, |
| delay: 100, |
| }); |
| |
| var player3_blink = test3_blink.animate(leftKeyframes, { |
| duration: 5000, |
| delay: 100, |
| }); |
| var player3_impl = test3_impl.animate(translateKeyframes, { |
| duration: 5000, |
| delay: 100, |
| }); |
| |
| // Create detached lower-priority second player with short animation |
| var player4_blink2 = test4_blink.animate(leftKeyframes2, { |
| duration: 1000, |
| delay: 500, |
| }); |
| player4_blink2.cancel(); |
| var player4_impl2 = test4_impl.animate(translateKeyframes2, { |
| duration: 1000, |
| delay: 500, |
| }); |
| player4_impl2.cancel(); |
| |
| var player4_blink = test4_blink.animate(leftKeyframes, { |
| duration: 5000, |
| delay: 100, |
| }); |
| var player4_impl = test4_impl.animate(translateKeyframes, { |
| duration: 5000, |
| delay: 100, |
| }); |
| |
| setTimeout(function() { |
| player2_blink.pause(); |
| player2_impl.pause(); |
| |
| player3_blink.finish(); |
| player3_impl.finish(); |
| |
| player4_blink.pause(); |
| player4_impl.pause(); |
| }, 1500); |
| |
| setTimeout(function() { |
| var player1_blink2 = test1_blink.animate(leftKeyframes2, { |
| duration: 1000, |
| delay: 500, |
| fill: 'forwards' |
| }); |
| var player1_impl2 = test1_impl.animate(translateKeyframes2, { |
| duration: 1000, |
| delay: 500, |
| fill: 'forwards' |
| }); |
| |
| var player2_blink2 = test2_blink.animate(leftKeyframes2, { |
| duration: 1000, |
| delay: 500, |
| }); |
| var player2_impl2 = test2_impl.animate(translateKeyframes2, { |
| duration: 1000, |
| delay: 500, |
| }); |
| |
| var player3_blink2 = test3_blink.animate(leftKeyframes2, { |
| duration: 1000, |
| delay: 500, |
| }); |
| var player3_impl2 = test3_impl.animate(translateKeyframes2, { |
| duration: 1000, |
| delay: 500, |
| }); |
| |
| player4_blink2.play(); |
| player4_impl2.play(); |
| }, 2500); |
| </script> |
| </body> |
| </html> |
