| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css"> |
| .anim { |
| position: absolute; |
| left: 10px; |
| height: 90px; |
| width: 100px; |
| background-color: blue; |
| opacity: 0.1; |
| } |
| |
| #top { |
| top: 0px; |
| } |
| #middle { |
| top: 100px; |
| } |
| #bottom { |
| top: 200px; |
| } |
| #results { |
| top: 300px; |
| } |
| </style> |
| <script type="text/javascript"> |
| |
| function log(message) { |
| var results = document.getElementById('results'); |
| results.innerHTML += message + '<br>'; |
| } |
| |
| function validateFinishEvent(player, event) { |
| if (event.target === player) { |
| log('PASS: ' + player.name + ' is target'); |
| } else { |
| log('FAIL: expected target named ' + player.name + ', actual target is ' + event.target); |
| } |
| if (event.currentTime === player.currentTime) { |
| log('PASS: event currentTime equals player currentTime'); |
| } else { |
| log('FAIL: event currentTime ' + event.currentTime + ' does not equal player currentTime ' + player.currentTime); |
| } |
| if (event.timelineTime === document.timeline.currentTime) { |
| log('PASS: event timelineTime equals timeline currentTime'); |
| } else { |
| log('FAIL: event timelineTime ' + event.timelineTime + |
| ' does not equal timeline currentTime ' + document.timeline.currentTime); |
| } |
| } |
| |
| var keyframes = [ |
| {left: '10px', offset: 0}, |
| {left: '100px', offset: 1} |
| ]; |
| |
| var playerTop, playerMiddle, playerBottom; |
| var firstTop = true, firstMiddle = true, firstBottom = true; |
| |
| function onFinishTop(event) { |
| validateFinishEvent(playerTop, event); |
| |
| if (firstTop) { |
| firstTop = false; |
| playerTop.currentTime = 0; |
| } else { |
| playerMiddle = document.getElementById('middle').animate(keyframes, 0.05); |
| playerMiddle.name = 'playerMiddle'; |
| playerMiddle.onfinish = onFinishMiddle; |
| } |
| } |
| |
| function onFinishMiddle(event) { |
| validateFinishEvent(playerMiddle, event); |
| |
| if (firstMiddle) { |
| firstMiddle = false; |
| playerMiddle.play(); |
| } else { |
| playerBottom = document.getElementById('bottom').animate(keyframes, 0.05); |
| playerBottom.name = 'playerBottom'; |
| playerBottom.onfinish = onFinishBottom; |
| } |
| } |
| |
| function onFinishBottom(event) { |
| validateFinishEvent(playerBottom, event); |
| |
| if (firstBottom) { |
| firstBottom = false; |
| playerBottom.reverse(); |
| } else { |
| testRunner.notifyDone(); |
| } |
| } |
| |
| function animate() { |
| |
| playerTop = document.getElementById('top').animate(keyframes, 0.05); |
| playerTop.name = 'playerTop'; |
| playerTop.onfinish = onFinishTop; |
| |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| } |
| |
| window.onload = animate; |
| |
| </script> |
| </head> |
| <body> |
| <div class="anim" id="top"></div> |
| <div class="anim" id="middle"></div> |
| <div class="anim" id="bottom"></div> |
| <div id="results"></div> |
| </body> |
| </html> |
| |
