| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style type="text/css"> | |
| 5 .anim { | |
| 6 position: absolute; | |
| 7 left: 10px; | |
| 8 height: 90px; | |
| 9 width: 100px; | |
| 10 background-color: black; | |
| 11 } | |
| 12 </style> | |
| 13 <script type="text/javascript"> | |
| 14 | |
| 15 function log(message) { | |
| 16 var results = document.getElementById('results'); | |
| 17 results.innerHTML += message + '<br>'; | |
| 18 } | |
| 19 | |
| 20 function validateFinishEvent(player, event, currentTime) { | |
| 21 if (event.target === player) { | |
| 22 log('PASS: ' + player.name + ' is target'); | |
| 23 } else { | |
| 24 log('FAIL: expected target named ' + player.name + ', actual target is '
+ event.target); | |
| 25 } | |
| 26 if ((currentTime !== undefined && event.currentTime == currentTime) || event
.currentTime === player.currentTime) { | |
| 27 log('PASS: event currentTime equals player currentTime'); | |
| 28 } else { | |
| 29 log('FAIL: event currentTime ' + event.currentTime + ' does not equal pl
ayer currentTime ' + player.currentTime); | |
| 30 } | |
| 31 if (event.timelineTime === document.timeline.currentTime) { | |
| 32 log('PASS: event timelineTime equals timeline currentTime'); | |
| 33 } else { | |
| 34 log('FAIL: event timelineTime ' + event.timelineTime + | |
| 35 ' does not equal timeline currentTime ' + document.timeline.currentT
ime); | |
| 36 } | |
| 37 } | |
| 38 | |
| 39 var playerTop, playerMiddle, playerBottom; | |
| 40 | |
| 41 function onFinishTop(event) { | |
| 42 validateFinishEvent(playerTop, event); | |
| 43 playerMiddle.cancel(); | |
| 44 } | |
| 45 | |
| 46 function onFinishMiddle(event) { | |
| 47 validateFinishEvent(playerMiddle, event, 0); | |
| 48 playerBottom.currentTime = 0; | |
| 49 } | |
| 50 | |
| 51 function onFinishBottom(event) { | |
| 52 validateFinishEvent(playerBottom, event); | |
| 53 if (window.testRunner) { | |
| 54 testRunner.notifyDone(); | |
| 55 } | |
| 56 } | |
| 57 | |
| 58 function animate() { | |
| 59 | |
| 60 var keyframes = [ | |
| 61 {left: '10px', offset: 0}, | |
| 62 {left: '100px', offset: 1} | |
| 63 ]; | |
| 64 | |
| 65 var timing = { | |
| 66 fill: 'none', | |
| 67 iterations: Infinity, | |
| 68 duration: 9001 | |
| 69 }; | |
| 70 | |
| 71 playerTop = document.getElementById('top').animate(keyframes, timing); | |
| 72 playerTop.name = 'playerTop'; | |
| 73 playerTop.onfinish = onFinishTop; | |
| 74 | |
| 75 playerMiddle = document.getElementById('middle').animate(keyframes, timing); | |
| 76 playerMiddle.name = 'playerMiddle'; | |
| 77 playerMiddle.onfinish = onFinishMiddle; | |
| 78 | |
| 79 playerBottom = document.getElementById('bottom').animate(keyframes, timing); | |
| 80 playerBottom.name = 'playerBottom'; | |
| 81 playerBottom.onfinish = onFinishBottom; | |
| 82 | |
| 83 // Finish event does not fire while currentTime is negative. | |
| 84 playerBottom.currentTime = -9001; | |
| 85 playerBottom.source = null; | |
| 86 | |
| 87 playerTop.currentTime = 100; | |
| 88 playerTop.source = null; | |
| 89 | |
| 90 if (window.testRunner) { | |
| 91 testRunner.dumpAsText(); | |
| 92 testRunner.waitUntilDone(); | |
| 93 } | |
| 94 } | |
| 95 | |
| 96 window.onload = animate; | |
| 97 | |
| 98 </script> | |
| 99 </head> | |
| 100 <body> | |
| 101 <div class="anim" id="top"></div> | |
| 102 <div class="anim" id="middle"></div> | |
| 103 <div class="anim" id="bottom"></div> | |
| 104 <div id="results"></div> | |
| 105 </body> | |
| 106 </html> | |
| 107 | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1158783011:
Web Animations: Don't fire finish event when cancelling (Closed)
Base URL: svn://svn.chromium.org/blink/trunk