f44ee4662251d276bc47406248ab376f55a538d5
[WebKit-https.git] / LayoutTests / animations / multiple-animations-timing-function.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
2 <html>
3 <head>
4     <style>
5         #box {
6             position: relative;
7             height: 100px;
8             width: 100px;
9             margin: 20px;
10             background-color: red;
11             -webkit-animation:
12                 horizontal 2s ease-in 1 alternate,
13                 vertical 2s ease-out 1 alternate;
14         }
15
16         @-webkit-keyframes horizontal {
17             from { left: 0px;   }
18             to   { left: 200px; }
19         }
20
21         @-webkit-keyframes vertical {
22             from { top: 0px;   }
23             to   { top: 200px; }
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         const expectedValues = [
29           // [animation-name, time, element-id, property, expected-value, tolerance]
30           ["horizontal", 0.5, "box", "left", 18, 10],
31           ["horizontal", 1.5, "box", "left", 124, 10],
32           ["vertical", 0.5, "box", "top", 75, 10],
33           ["vertical", 1.5, "box", "top", 181, 10],
34         ];
35
36         runAnimationTest(expectedValues);
37     </script>
38 </head>
39 <body>
40     <div id="box"></div>
41     <div id="result"></div>
42 </body>
43 </html>