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