[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / animations / animation-direction-alternate-reverse.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style type="text/css" media="screen">
6   
7     #container {
8       position: relative;
9       border: 1px solid black;
10       height: 100px;
11       width: 500px;
12     }
13     
14     #box {
15       position: absolute;
16       height: 100px;
17       width: 100px;
18       background-color: blue;
19       -webkit-animation-name: move;
20       -webkit-animation-duration: 2s;
21       -webkit-animation-direction: alternate-reverse;
22       -webkit-animation-iteration-count: 2;
23       -webkit-animation-timing-function: linear;
24     }
25
26     @-webkit-keyframes move {
27       0%   {
28         left: 0;
29       }
30       100% {
31         left: 400px;
32       }
33     }
34     
35   </style>
36   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
37   <script type="text/javascript" charset="utf-8">
38
39     const expectedValues = [
40       // [animation-name, time, element-id, property, expected-value, tolerance]
41       ["move", 1.0, "box", "left", 200, 20],
42       ["move", 2.0, "box", "left", 0, 20],
43       ["move", 3.0, "box", "left", 200, 20],
44       ["move", 4.0, "box", "left", 0, 20],
45     ];
46     
47     runAnimationTest(expectedValues);
48   </script>
49 </head>
50 <body>
51
52 <!-- Test animation-direction: alternate-reverse -->
53 <div id="container">
54   <div id="box"></div>
55 </div>
56
57 <div id="result"></div>
58
59 </body>
60 </html>