Index: ManualTests/animation/compositor-animation-same-property.html |
diff --git a/ManualTests/animation/compositor-animation-same-property.html b/ManualTests/animation/compositor-animation-same-property.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..ebb0519d745e5aeec800ad7bc7b777a17d176773 |
--- /dev/null |
+++ b/ManualTests/animation/compositor-animation-same-property.html |
@@ -0,0 +1,159 @@ |
+<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> |