blob: 2b4c380daa59e6eb6eefe6e3299421f3030868d3 [file] [log] [blame]
graouts@webkit.org80535072018-09-27 09:49:52 +00001<!doctype html>
dino@apple.com1dc50652012-04-28 04:59:53 +00002<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>