| 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: blue; | |
| 11 opacity: 0.1; | |
| 12 } | |
| 13 | |
| 14 #top { | |
| 15 top: 0px; | |
| 16 } | |
| 17 #middle { | |
| 18 top: 100px; | |
| 19 } | |
| 20 #bottom { | |
| 21 top: 200px; | |
| 22 } | |
| 23 #results { | |
| 24 top: 300px; | |
| 25 } | |
| 26 </style> | |
| 27 <script type="text/javascript"> | |
| 28 | |
| 29 function log(message) { | |
| 30 var results = document.getElementById('results'); | |
| 31 results.innerHTML += message + '<br>'; | |
| 32 } | |
| 33 | |
| 34 function validateFinishEvent(player, event) { | |
| 35 if (event.target === player) { | |
| 36 log('PASS: ' + player.name + ' is target'); | |
| 37 } else { | |
| 38 log('FAIL: expected target named ' + player.name + ', actual target is '
+ event.target); | |
| 39 } | |
| 40 if (event.currentTime === player.currentTime) { | |
| 41 log('PASS: event currentTime equals player currentTime'); | |
| 42 } else { | |
| 43 log('FAIL: event currentTime ' + event.currentTime + ' does not equal pl
ayer currentTime ' + player.currentTime); | |
| 44 } | |
| 45 if (event.timelineTime === document.timeline.currentTime) { | |
| 46 log('PASS: event timelineTime equals timeline currentTime'); | |
| 47 } else { | |
| 48 log('FAIL: event timelineTime ' + event.timelineTime + | |
| 49 ' does not equal timeline currentTime ' + document.timeline.currentT
ime); | |
| 50 } | |
| 51 } | |
| 52 | |
| 53 var keyframes = [ | |
| 54 {left: '10px', offset: 0}, | |
| 55 {left: '100px', offset: 1} | |
| 56 ]; | |
| 57 | |
| 58 var playerTop, playerMiddle, playerBottom; | |
| 59 var firstTop = true, firstMiddle = true, firstBottom = true; | |
| 60 | |
| 61 function onFinishTop(event) { | |
| 62 validateFinishEvent(playerTop, event); | |
| 63 | |
| 64 if (firstTop) { | |
| 65 firstTop = false; | |
| 66 playerTop.currentTime = 0; | |
| 67 } else { | |
| 68 playerMiddle = document.getElementById('middle').animate(keyframes, 0.05
); | |
| 69 playerMiddle.name = 'playerMiddle'; | |
| 70 playerMiddle.onfinish = onFinishMiddle; | |
| 71 } | |
| 72 } | |
| 73 | |
| 74 function onFinishMiddle(event) { | |
| 75 validateFinishEvent(playerMiddle, event); | |
| 76 | |
| 77 if (firstMiddle) { | |
| 78 firstMiddle = false; | |
| 79 playerMiddle.play(); | |
| 80 } else { | |
| 81 playerBottom = document.getElementById('bottom').animate(keyframes, 0.05
); | |
| 82 playerBottom.name = 'playerBottom'; | |
| 83 playerBottom.onfinish = onFinishBottom; | |
| 84 } | |
| 85 } | |
| 86 | |
| 87 function onFinishBottom(event) { | |
| 88 validateFinishEvent(playerBottom, event); | |
| 89 | |
| 90 if (firstBottom) { | |
| 91 firstBottom = false; | |
| 92 playerBottom.reverse(); | |
| 93 } else { | |
| 94 if (window.testRunner) { | |
| 95 testRunner.notifyDone(); | |
| 96 } | |
| 97 } | |
| 98 } | |
| 99 | |
| 100 function animate() { | |
| 101 | |
| 102 playerTop = document.getElementById('top').animate(keyframes, 0.05); | |
| 103 playerTop.name = 'playerTop'; | |
| 104 playerTop.onfinish = onFinishTop; | |
| 105 | |
| 106 if (window.testRunner) { | |
| 107 testRunner.dumpAsText(); | |
| 108 testRunner.waitUntilDone(); | |
| 109 } | |
| 110 } | |
| 111 | |
| 112 window.onload = animate; | |
| 113 | |
| 114 </script> | |
| 115 </head> | |
| 116 <body> | |
| 117 <div class="anim" id="top"></div> | |
| 118 <div class="anim" id="middle"></div> | |
| 119 <div class="anim" id="bottom"></div> | |
| 120 <div id="results"></div> | |
| 121 </body> | |
| 122 </html> | |
| 123 | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2140023002:
Clean up player-finish-*.html tests to match W3C (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master