| 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 validateFinishEvent(playerMiddle, event); | |
| 50 } | |
| 51 | |
| 52 function onFinishBottom(event) { | |
| 53 validateFinishEvent(playerBottom, 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 playerTop = document.getElementById('top').animate(keyframes, 600); | |
| 64 playerTop.name = 'playerTop'; | |
| 65 playerTop.onfinish = onFinishTop; | |
| 66 | |
| 67 playerMiddle = document.getElementById('middle').animate(keyframes, 100); | |
| 68 playerMiddle.name = 'playerMiddle'; | |
| 69 playerMiddle.onfinish = onFinishMiddle; | |
| 70 | |
| 71 playerBottom = document.getElementById('bottom').animate(keyframes, 100); | |
| 72 playerBottom.name = 'playerBottom'; | |
| 73 playerBottom.onfinish = onFinishBottom; | |
| 74 | |
| 75 if (window.testRunner) { | |
| 76 testRunner.dumpAsText(); | |
| 77 testRunner.waitUntilDone(); | |
| 78 } | |
| 79 } | |
| 80 | |
| 81 window.onload = animate; | |
| 82 | |
| 83 </script> | |
| 84 </head> | |
| 85 <body> | |
| 86 <div class="anim" id="top"></div> | |
| 87 <div class="anim" id="middle"></div> | |
| 88 <div class="anim" id="bottom"></div> | |
| 89 <div id="results"></div> | |
| 90 </body> | |
| 91 </html> | |
| 92 | |
| OLD | NEW |