| OLD | NEW |
|---|
| (Empty) | |
| 1 <html> |
| 2 <style> |
| 3 div { |
| 4 position: relative; |
| 5 height: 100px; |
| 6 width: 100px; |
| 7 background: yellow; |
| 8 } |
| 9 </style> |
| 10 <body> |
| 11 <p> |
| 12 Each section below has two boxes, the top runs on the main thread, the bottom |
| 13 on the compositor. |
| 14 </p><p> |
| 15 This test is successful if the boxes are mostly in sync and all finish at the |
| 16 same time. |
| 17 </p> |
| 18 <hr> |
| 19 |
| 20 Add second translate animation on timeout (with fill=forwards) |
| 21 <br> |
| 22 <div id="test1_blink">BLINK THREAD</div> |
| 23 <div id="test1_impl">IMPL THREAD</div> |
| 24 <hr> |
| 25 |
| 26 Add second translate animation on timeout if first one was paused earlier |
| 27 <br> |
| 28 <div id="test2_blink">BLINK THREAD</div> |
| 29 <div id="test2_impl">IMPL THREAD</div> |
| 30 <hr> |
| 31 |
| 32 Add second translate animation on timeout if first one was finished earlier |
| 33 <br> |
| 34 <div id="test3_blink">BLINK THREAD</div> |
| 35 <div id="test3_impl">IMPL THREAD</div> |
| 36 <hr> |
| 37 |
| 38 Add second translate animation on timeout if first higher-priority one was pause
d earlier |
| 39 <br> |
| 40 <div id="test4_blink">BLINK THREAD</div> |
| 41 <div id="test4_impl">IMPL THREAD</div> |
| 42 <hr> |
| 43 |
| 44 <script> |
| 45 var leftKeyframes = [ |
| 46 {left: '100px'}, |
| 47 {left: '600px'} |
| 48 ]; |
| 49 var translateKeyframes = [ |
| 50 {transform: 'translateX(100px)'}, |
| 51 {transform: 'translateX(600px)'} |
| 52 ]; |
| 53 |
| 54 var leftKeyframes2 = [ |
| 55 {left: '600px'}, |
| 56 {left: '700px'} |
| 57 ]; |
| 58 var translateKeyframes2 = [ |
| 59 {transform: 'translateX(600px)'}, |
| 60 {transform: 'translateX(700px)'} |
| 61 ]; |
| 62 |
| 63 var player1_blink = test1_blink.animate(leftKeyframes, { |
| 64 duration: 5000, |
| 65 delay: 100, |
| 66 fill: 'forwards' |
| 67 }); |
| 68 var player1_impl = test1_impl.animate(translateKeyframes, { |
| 69 duration: 5000, |
| 70 delay: 100, |
| 71 fill: 'forwards' |
| 72 }); |
| 73 |
| 74 var player2_blink = test2_blink.animate(leftKeyframes, { |
| 75 duration: 5000, |
| 76 delay: 100, |
| 77 }); |
| 78 var player2_impl = test2_impl.animate(translateKeyframes, { |
| 79 duration: 5000, |
| 80 delay: 100, |
| 81 }); |
| 82 |
| 83 var player3_blink = test3_blink.animate(leftKeyframes, { |
| 84 duration: 5000, |
| 85 delay: 100, |
| 86 }); |
| 87 var player3_impl = test3_impl.animate(translateKeyframes, { |
| 88 duration: 5000, |
| 89 delay: 100, |
| 90 }); |
| 91 |
| 92 // Create detached lower-priority second player with short animation |
| 93 var player4_blink2 = test4_blink.animate(leftKeyframes2, { |
| 94 duration: 1000, |
| 95 delay: 500, |
| 96 }); |
| 97 player4_blink2.cancel(); |
| 98 var player4_impl2 = test4_impl.animate(translateKeyframes2, { |
| 99 duration: 1000, |
| 100 delay: 500, |
| 101 }); |
| 102 player4_impl2.cancel(); |
| 103 |
| 104 var player4_blink = test4_blink.animate(leftKeyframes, { |
| 105 duration: 5000, |
| 106 delay: 100, |
| 107 }); |
| 108 var player4_impl = test4_impl.animate(translateKeyframes, { |
| 109 duration: 5000, |
| 110 delay: 100, |
| 111 }); |
| 112 |
| 113 setTimeout(function() { |
| 114 player2_blink.pause(); |
| 115 player2_impl.pause(); |
| 116 |
| 117 player3_blink.finish(); |
| 118 player3_impl.finish(); |
| 119 |
| 120 player4_blink.pause(); |
| 121 player4_impl.pause(); |
| 122 }, 1500); |
| 123 |
| 124 setTimeout(function() { |
| 125 var player1_blink2 = test1_blink.animate(leftKeyframes2, { |
| 126 duration: 1000, |
| 127 delay: 500, |
| 128 fill: 'forwards' |
| 129 }); |
| 130 var player1_impl2 = test1_impl.animate(translateKeyframes2, { |
| 131 duration: 1000, |
| 132 delay: 500, |
| 133 fill: 'forwards' |
| 134 }); |
| 135 |
| 136 var player2_blink2 = test2_blink.animate(leftKeyframes2, { |
| 137 duration: 1000, |
| 138 delay: 500, |
| 139 }); |
| 140 var player2_impl2 = test2_impl.animate(translateKeyframes2, { |
| 141 duration: 1000, |
| 142 delay: 500, |
| 143 }); |
| 144 |
| 145 var player3_blink2 = test3_blink.animate(leftKeyframes2, { |
| 146 duration: 1000, |
| 147 delay: 500, |
| 148 }); |
| 149 var player3_impl2 = test3_impl.animate(translateKeyframes2, { |
| 150 duration: 1000, |
| 151 delay: 500, |
| 152 }); |
| 153 |
| 154 player4_blink2.play(); |
| 155 player4_impl2.play(); |
| 156 }, 2500); |
| 157 </script> |
| 158 </body> |
| 159 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 881183003:
Animation: Cancel same-property animations on compositor (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master