2010-09-09 Dean Jackson <dino@apple.com>
[WebKit-https.git] / LayoutTests / animations / animation-drt-api-multiple-keyframes.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   <style>
8     body {
9       margin: 0;
10     }
11     
12     div {
13       position: relative;
14       left: 100px;
15       height: 200px;
16       width: 200px;
17       background-color: red;
18       -webkit-animation-duration: 5s;
19       -webkit-animation-timing-function: linear;
20     }
21
22     @-webkit-keyframes anim {
23       from { left: 10px; }
24       40% { left: 30px; }
25       60% { left: 15px; }
26       to { left: 20px; }
27     }
28    </style>
29
30    <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
31    <script type="text/javascript" charset="utf-8">
32     if (window.layoutTestController)
33       layoutTestController.waitUntilDone();
34    
35     function animationStarted()
36     {
37       if (window.layoutTestController) {
38         if (!layoutTestController.pauseAnimationAtTimeOnElementWithId("anim", 3, "box"))
39           throw("Animation is not running");
40
41         layoutTestController.notifyDone();
42       }
43     }
44
45     function startTest()
46     {
47       document.getElementById("box").style.webkitAnimationName = "anim";
48       waitForAnimationToStart(document.getElementById('box'), animationStarted);
49     }
50    </script>
51 </head>
52 <body onload="startTest()">
53   <h1>Test for DRT pauseAnimationAtTimeOnElementWithId() API on animations with multiple keyframes</h1>
54
55   <div id="box">
56   </div>
57
58 </body>
59 </html>