226af7c2b44e5e4a22a370eca6ad414b86ef7816
[WebKit-https.git] / LayoutTests / animations / multiple-keyframes.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2
3 <html lang="en">
4 <head>
5   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6   <title>Test animation with multiple keyframes</title>
7   <style type="text/css" media="screen">
8     #box {
9       position: relative;
10       left: 10px;
11       top: 10px;
12       height: 100px;
13       width: 100px;
14       background-color: blue;
15       -webkit-animation-duration: 2s;
16       -webkit-animation-timing-function: linear;
17       -webkit-animation-name: anim;
18     }
19     @-webkit-keyframes anim {
20         from { left: 10px; }
21         40% { left: 30px; }
22         60% { left: 10px; }
23         to   { left: 20px; }
24     }
25   </style>
26   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
27   <script type="text/javascript" charset="utf-8">
28
29     const expectedValues = [
30       // [animation-name, time, element-id, property, expected-value, tolerance]
31       ["anim", 0.4, "box", "left", 20, 2],
32       ["anim", 1.2, "box", "left", 10, 2],
33       ["anim", 1.6, "box", "left", 15, 2],
34     ];
35     
36     runAnimationTest(expectedValues);
37     
38   </script>
39 </head>
40 <body>
41 This test performs a keyframed animation of the left property. It animates over 2 seconds.
42 It takes 3 snapshots and expects each result to be within a specified range.
43 <div id="box">
44 </div>
45 <div id="result">
46 </div>
47 </body>
48 </html>