def7cb830b9e5e2be539ab57d6b6722f1afcceb4
[WebKit-https.git] / LayoutTests / animations / animation-direction-normal.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: normal;
20       -webkit-animation-iteration-count: 2;
21       -webkit-animation-timing-function: linear;
22       -webkit-animation-name: "move1";
23     }
24     #safezone {
25       position: absolute;
26       top: 100px;
27       height: 100px;
28       width: 120px;
29       left: 30px;
30       background-color: green;
31     }
32     @-webkit-keyframes "move1" {
33       from { -webkit-transform: translateX(0px); }
34       to   { -webkit-transform: translateX(200px); }
35     }
36     #result {
37       color: white; /* hide from pixel results */
38     }
39   </style>
40   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
41   <script type="text/javascript" charset="utf-8">
42     const expectedValues = [
43       // [animation-name, time, element-id, property, expected-value, tolerance]
44       ["move1", 0.5, "box", "webkitTransform", [1,0,0,1, 50,0], 20],
45       ["move1", 1.0, "box", "webkitTransform", [1,0,0,1,100,0], 20],
46       ["move1", 2.5, "box", "webkitTransform", [1,0,0,1, 50,0], 20],
47     ];
48
49     function pauseAnimation()
50     {
51         document.getElementById("box").style.webkitAnimationPlayState = "paused";
52     }
53
54     function setTimers()
55     {
56         setTimeout(pauseAnimation, 2500);
57     }
58
59     runAnimationTest(expectedValues, setTimers, null, true);
60
61   </script>
62 </head>
63 <body>
64 <!-- This tests the operation of -webkit-animation-play-state. After 1 second the red boxes should be hidden by the green boxes. You should see no red boxes. -->
65 <div id="box"></div>
66 <div id="safezone"></div>
67 <div id="result"></div>
68 </div>
69 </body>
70 </html>