| 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) { | |
| 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 (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 if (window.testRunner) { | |
| 44 testRunner.notifyDone(); | |
| 45 } | |
| 46 } | |
| 47 | |
| 48 function onFinishMiddle(event) { | |
| 49 log('FAIL: seeking to finish should not queue event'); | |
| 50 } | |
| 51 | |
| 52 function onFinishBottom(event) { | |
| 53 log('FAIL: seeking past finish should not queue event'); | |
| 54 } | |
| 55 | |
| 56 function animate() { | |
| 57 | |
| 58 var keyframes = [ | |
| 59 {left: '10px', opacity: '1', offset: 0}, | |
| 60 {left: '100px', opacity: '0', offset: 1} | |
| 61 ]; | |
| 62 | |
| 63 playerMiddle = document.getElementById('middle').animate(keyframes, 70.0); | |
| 64 playerMiddle.name = 'playerMiddle'; | |
| 65 playerMiddle.onfinish = onFinishMiddle; | |
| 66 playerMiddle.finish(); | |
| 67 playerMiddle.currentTime = 0; | |
| 68 playerMiddle.pause(); | |
| 69 | |
| 70 playerBottom = document.getElementById('bottom').animate(keyframes, 70.0); | |
| 71 playerBottom.name = 'playerBottom'; | |
| 72 playerBottom.onfinish = onFinishBottom; | |
| 73 playerBottom.currentTime = 80.0; | |
| 74 playerBottom.currentTime = 0; | |
| 75 playerBottom.pause(); | |
| 76 | |
| 77 playerTop = document.getElementById('top').animate(keyframes, 90.0); | |
| 78 playerTop.name = 'playerTop'; | |
| 79 playerTop.onfinish = onFinishTop; | |
| 80 playerTop.finish(); | |
| 81 | |
| 82 if (window.testRunner) { | |
| 83 testRunner.dumpAsText(); | |
| 84 testRunner.waitUntilDone(); | |
| 85 } | |
| 86 } | |
| 87 | |
| 88 window.onload = animate; | |
| 89 | |
| 90 </script> | |
| 91 </head> | |
| 92 <body> | |
| 93 <div class="anim" id="top"></div> | |
| 94 <div class="anim" id="middle"></div> | |
| 95 <div class="anim" id="bottom"></div> | |
| 96 <div id="results"></div> | |
| 97 </body> | |
| 98 </html> | |
| 99 | |
| OLD | NEW |