[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / animation-end-event-short-iterations.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <title>Test animations with repeated iterations and short loops</title>
5   <style>
6     #box {
7       position: relative;
8       left: 100px;
9       top: 10px;
10       height: 100px;
11       width: 100px;
12       -webkit-animation-duration: 0.001s;
13       -webkit-animation-name: anim;
14       background-color: #999;
15       -webkit-animation-iteration-count: 2;
16     }
17     @-webkit-keyframes anim {
18         from { left: 200px; }
19         to   { left: 300px; }
20     }
21   </style>
22   <script>
23     if (window.testRunner) {
24         testRunner.dumpAsText();
25         testRunner.waitUntilDone();
26     }
27   
28     onload = function()
29     {
30         document.addEventListener('webkitAnimationEnd', function() {
31             document.getElementById('result').innerHTML = 'PASS: got webkitAnimationEnd event';      
32             if (window.testRunner)
33                 testRunner.notifyDone();
34         }, false);
35         
36         // Animation begins once we append the DOM node to the document.
37         var boxNode = document.createElement('div');
38         boxNode.id = 'box';
39         document.body.appendChild(boxNode);
40     }
41   </script>
42 </head>
43 <body>
44 Checks that we still end an animation properly (i.e. fire a webkitAnimationEnd
45 event) when using more than one iteration with very short durations.
46 <pre id="result">FAIL: no webkitAnimationEnd event received</pre>
47 </body>
48 </html>