OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 | |
3 <html> | |
4 <head> | |
5 <style type="text/css"> | |
6 .box { | |
7 position: relative; | |
8 height: 25px; | |
9 width: 25px; | |
10 background-color: blue; | |
11 margin: 10px; | |
12 } | |
13 .animation { | |
14 animation-duration: 0.1s; | |
15 animation-name: animation; | |
16 } | |
17 #animation1 { | |
18 animation-delay: 0.05s; | |
19 } | |
20 #animation2 { | |
21 animation-delay: -0.05s; | |
22 } | |
23 #animation3 { | |
24 animation-delay: -0.15s; | |
25 } | |
26 @keyframes animation { | |
27 from { left: 0; } | |
28 to { left: 500px; } | |
29 } | |
30 </style> | |
31 <script type="text/javascript"> | |
32 if (window.testRunner) { | |
33 testRunner.dumpAsText(); | |
34 testRunner.waitUntilDone(); | |
35 } | |
36 function log(text) { | |
37 var div = document.createElement('div'); | |
38 div.innerText = text; | |
39 document.getElementById('log').appendChild(div); | |
40 } | |
41 | |
42 var count = 0; | |
43 document.addEventListener('animationstart', function(event) { | |
44 var pass = event.elapsedTime === [0, 0.05, 0.15][count++]; | |
45 log((pass ? 'PASS' : 'FAIL') + ': ' + event.target.id + ': Start event:
elapsedTime=' + event.elapsedTime); | |
46 }, false); | |
47 | |
48 document.addEventListener('animationend', function(event) { | |
49 var pass = event.elapsedTime === 0.1; | |
50 log((pass ? 'PASS' : 'FAIL') + ': ' + event.target.id + ': End event: el
apsedTime=' + event.elapsedTime); | |
51 switch (count) { | |
52 case 1: | |
53 document.getElementById('animation2').classList.add('animation'); | |
54 break; | |
55 case 2: | |
56 document.getElementById('animation3').classList.add('animation'); | |
57 break; | |
58 case 3: | |
59 if (window.testRunner) | |
60 testRunner.notifyDone(); | |
61 } | |
62 }, false); | |
63 </script> | |
64 </head> | |
65 <body> | |
66 <p>Tests animation events with a negative delay. | |
67 <div id="animation1" class="box animation"></div> | |
68 <div id="animation2" class="box"></div> | |
69 <div id="animation3" class="box"></div> | |
70 <div id="log"></div> | |
71 </body> | |
72 </html> | |
OLD | NEW |