[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / keyframes-iteration-count-non-integer.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2    "http://www.w3.org/TR/html4/loose.dtd">
3
4 <html lang="en">
5 <head>
6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7   <title>Keyframes test</title>
8   <style type="text/css" media="screen">
9     #box {
10         position: absolute;
11         left: 0;
12         top: 100px;
13         height: 100px;
14         width: 100px;
15         background-color: blue;
16         -webkit-animation-duration: 2s;
17         -webkit-animation-timing-function: linear;
18         -webkit-animation-name: "anim";
19         -webkit-animation-iteration-count: 0.3;
20     }
21     @-webkit-keyframes "anim" {
22         from { left: 50px; }
23         20%  { left: 100px; }
24         40%  { left: 100px; }
25         60%  { left: 200px; }
26         80%  { left: 200px; }
27         to   { left: 300px; }
28     }
29     </style>
30     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
31     <script type="text/javascript" charset="utf-8">
32
33     if (window.testRunner)
34         testRunner.dumpAsText();
35     
36     document.addEventListener("webkitAnimationEnd", function(event){
37         var result;
38         if (event.elapsedTime < 1)
39             result = "PASS end of animation";
40         else
41             result = "FAIL end of animation";
42         document.getElementById('result').innerHTML = result;
43
44         if (window.testRunner)
45             testRunner.notifyDone();
46     }, false);
47     
48   </script>
49 </head>
50 <body>
51 This test performs an animation of the left property with a non integer iteration count.
52 <div id="box">
53 </div>
54 <div id="result">
55 </div>
56 </body>
57 </html>