Unreviewed, GTK css2.1 rebaseline after r101343.
[WebKit-https.git] / LayoutTests / animations / timing-functions.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2    "http://www.w3.org/TR/html4/loose.dtd">
3
4 <html lang="en">
5 <head>
6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7   <title>Test timing functions</title>
8   <style type="text/css" media="screen">
9     .box {
10       position: relative;
11       left: 100px;
12       top: 0px;
13       height: 5px;
14       width: 5px;
15       background-color: blue;
16       -webkit-animation-duration: 1s;
17       -webkit-animation-name: anim;
18     }
19     @-webkit-keyframes anim {
20         from { left: 100px; }
21         to   { left: 200px; }
22     }
23     #box1 {
24     }
25     #box2 {
26       -webkit-animation-timing-function: ease;
27     }
28     #box3 {
29       -webkit-animation-timing-function: linear;
30     }
31     #box4 {
32       -webkit-animation-timing-function: step-start;
33     }
34     #box5 {
35       -webkit-animation-timing-function: step-end;
36     }
37     #box6 {
38       -webkit-animation-timing-function: steps(3);
39     }
40     #box7 {
41       -webkit-animation-timing-function: steps(3, start);
42     }
43     #box8 {
44       -webkit-animation-timing-function: steps(3, end);
45     }
46     
47   </style>
48   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
49   <script type="text/javascript" charset="utf-8">
50
51     const expectedValues = [
52       // [animation-name, time, element-id, property, expected-value, tolerance]
53       ["anim", 0.25, "box1", "left", 141, 5],
54       ["anim", 0.50, "box1", "left", 180, 5],
55       ["anim", 0.75, "box1", "left", 196, 5],
56       ["anim", 0.25, "box2", "left", 141, 5],
57       ["anim", 0.50, "box2", "left", 180, 5],
58       ["anim", 0.75, "box2", "left", 196, 5],
59       ["anim", 0.25, "box3", "left", 125, 5],
60       ["anim", 0.50, "box3", "left", 150, 5],
61       ["anim", 0.75, "box3", "left", 175, 5],
62       ["anim", 0.25, "box4", "left", 200, 5],
63       ["anim", 0.50, "box4", "left", 200, 5],
64       ["anim", 0.75, "box4", "left", 200, 5],
65       ["anim", 0.25, "box5", "left", 100, 5],
66       ["anim", 0.50, "box5", "left", 100, 5],
67       ["anim", 0.75, "box5", "left", 100, 5],
68       ["anim", 0.25, "box6", "left", 100, 5],
69       ["anim", 0.50, "box6", "left", 133, 5],
70       ["anim", 0.75, "box6", "left", 166, 5],
71       ["anim", 0.25, "box7", "left", 133, 5],
72       ["anim", 0.50, "box7", "left", 166, 5],
73       ["anim", 0.75, "box7", "left", 200, 5],
74       ["anim", 0.25, "box8", "left", 100, 5],
75       ["anim", 0.50, "box8", "left", 133, 5],
76       ["anim", 0.75, "box8", "left", 166, 5],
77     ];
78     
79     runAnimationTest(expectedValues);
80     
81   </script>
82 </head>
83 <body>
84 This test performs an animation of the left property. It animates over 1 second.
85 It takes 3 snapshots and expects each result to be within a specified range.
86 <div class="box" id="box1">
87 </div>
88 <div class="box" id="box2">
89 </div>
90 <div class="box" id="box3">
91 </div>
92 <div class="box" id="box4">
93 </div>
94 <div class="box" id="box5">
95 </div>
96 <div class="box" id="box6">
97 </div>
98 <div class="box" id="box7">
99 </div>
100 <div class="box" id="box8">
101 </div>
102 <div id="result">
103 </div>
104 </body>
105 </html>