[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / animation-direction-reverse.html
1 <html lang="en">
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4   <title>Test of -webkit-animation-play-state</title>
5   <style type="text/css" media="screen">
6     body {
7       margin: 0;
8     }
9
10     #box {
11       position: absolute;
12       left: 0px;
13       top: 100px;
14       height: 100px;
15       width: 100px;
16       background-color: red;
17       margin: 0;
18       -webkit-animation-duration: 2s;
19       -webkit-animation-direction: reverse;
20       -webkit-animation-timing-function: linear;
21       -webkit-animation-name: "move1";
22     }
23     @-webkit-keyframes "move1" {
24       from { -webkit-transform: translateX(0px); }
25       to   { -webkit-transform: translateX(200px); }
26     }
27     #result {
28       color: white; /* hide from pixel results */
29     }
30   </style>
31   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
32   <script type="text/javascript" charset="utf-8">
33     const expectedValues = [
34       // [animation-name, time, element-id, property, expected-value, tolerance]
35       ["move1", 0.5, "box", "webkitTransform", [1,0,0,1, 150,0], 20],
36       ["move1", 1.0, "box", "webkitTransform", [1,0,0,1,100,0], 20],
37       ["move1", 2.5, "box", "webkitTransform", 'none', 20],
38     ];
39
40     function pauseAnimation()
41     {
42         document.getElementById("box").style.webkitAnimationPlayState = "paused";
43     }
44
45     function setTimers()
46     {
47         setTimeout(pauseAnimation, 2500);
48     }
49
50     runAnimationTest(expectedValues, setTimers, null, true);
51
52   </script>
53 </head>
54 <body>
55 <div id="box"></div>
56 <div id="result"></div>
57 </div>
58 </body>
59 </html>