4 <style type="text/css">
10 background-color: blue;
27 <script type="text/javascript">
29 function log(message) {
30 var results = document.getElementById('results');
31 results.innerHTML += message + '<br>';
34 function validateFinishEvent(player, event) {
35 if (event.target === player) {
36 log('PASS: ' + player.name + ' is target');
38 log('FAIL: expected target named ' + player.name + ', actual target is ' + event.target);
40 if (event.currentTime === player.currentTime) {
41 log('PASS: event currentTime equals player currentTime');
43 log('FAIL: event currentTime ' + event.currentTime + ' does not equal player currentTime ' + player.currentTime);
45 if (event.timelineTime === document.timeline.currentTime) {
46 log('PASS: event timelineTime equals timeline currentTime');
48 log('FAIL: event timelineTime ' + event.timelineTime +
49 ' does not equal timeline currentTime ' + document.timeline.currentTime);
54 {left: '10px', offset: 0},
55 {left: '100px', offset: 1}
58 var playerTop, playerMiddle, playerBottom;
59 var firstTop = true, firstMiddle = true, firstBottom = true;
61 function onFinishTop(event) {
62 validateFinishEvent(playerTop, event);
66 playerTop.currentTime = 0;
68 playerMiddle = document.getElementById('middle').animate(keyframes, 0.05);
69 playerMiddle.name = 'playerMiddle';
70 playerMiddle.onfinish = onFinishMiddle;
74 function onFinishMiddle(event) {
75 validateFinishEvent(playerMiddle, event);
81 playerBottom = document.getElementById('bottom').animate(keyframes, 0.05);
82 playerBottom.name = 'playerBottom';
83 playerBottom.onfinish = onFinishBottom;
87 function onFinishBottom(event) {
88 validateFinishEvent(playerBottom, event);
92 playerBottom.reverse();
94 testRunner.notifyDone();
100 playerTop = document.getElementById('top').animate(keyframes, 0.05);
101 playerTop.name = 'playerTop';
102 playerTop.onfinish = onFinishTop;
104 if (window.testRunner) {
105 testRunner.dumpAsText();
106 testRunner.waitUntilDone();
110 window.onload = animate;
115 <div class="anim" id="top"></div>
116 <div class="anim" id="middle"></div>
117 <div class="anim" id="bottom"></div>
118 <div id="results"></div>