2b4c380daa59e6eb6eefe6e3299421f3030868d3
[WebKit-https.git] / LayoutTests / animations / animation-direction-reverse-timing-functions.html
1 <!doctype html>
2 <html lang="en">
3 <head>
4   <title>Test of -webkit-animation-direction timing functions</title>
5   <style>
6     body {
7       margin: 0;
8     }
9
10     .box {
11       position: relative;
12       left: 20px;
13       top: 10px;
14       height: 50px;
15       width: 250px;
16       margin-bottom: 10px;
17       -webkit-animation-duration: 2s;
18       -webkit-animation-timing-function: ease; /* ease is good for testing because it is not symmetric */
19       -webkit-animation-iteration-count: 4;
20     }
21     
22     .move1 {
23       -webkit-animation-name: move1;
24       background-color: blue;
25       color: white;
26     }
27
28     .normal {
29       -webkit-animation-direction: normal;
30     }
31
32     .alternate {
33       -webkit-animation-direction: alternate;
34     }
35
36     .reverse {
37       -webkit-animation-direction: reverse;
38     }
39
40     .alternate-reverse {
41       -webkit-animation-direction: alternate-reverse;
42     }
43     
44     @-webkit-keyframes move1 {
45       from { left: 0px; }
46       to { left: 200px; }
47     }
48   </style>
49   <script src="resources/animation-test-helpers.js"></script>
50   <script>
51     const expectedValues = [
52       // [animation-name, time, element-id, property, expected-value, tolerance]
53       ["move1", 0.2, "box1", "left",  18, 10],
54       ["move1", 0.2, "box2", "left",  18, 10],
55       ["move1", 0.2, "box3", "left",  198, 10],
56       ["move1", 0.2, "box4", "left",  198, 10],
57       ["move1", 2.2, "box1", "left",  18, 10],
58       ["move1", 2.2, "box2", "left",  198, 10],
59       ["move1", 2.2, "box3", "left",  198, 10],
60       ["move1", 2.2, "box4", "left",  18, 10],
61     ];
62
63     runAnimationTest(expectedValues);
64
65   </script>
66 </head>
67 <body>
68 <div id="box1" class="box move1 normal">normal</div>
69 <div id="box2" class="box move1 alternate">alternate</div>
70 <div id="box3" class="box move1 reverse">reverse</div>
71 <div id="box4" class="box move1 alternate-reverse">alternate-reverse</div>
72 <div id="result"></div>
73 </div>
74 </body>
75 </html>