28c1f6ceb043f80397527debb0d48a02e0ec51ac
[WebKit-https.git] / LayoutTests / animations / missing-from-to.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
2
3 <html lang="en">
4 <head>
5   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6   <title>Test animation with missing from and to keyframes</title>
7   <style type="text/css" media="screen">
8     .box {
9       position: relative;
10       left: 10px;
11       top: 10px;
12       height: 20px;
13       width: 20px;
14       background-color: blue;
15       -webkit-animation-duration: 2s;
16       -webkit-animation-timing-function: linear;
17     }
18   
19     #box1 {
20       -webkit-animation-name: anim1;
21     }
22     @-webkit-keyframes anim1 {
23         from { left: 10px; }
24         40% { left: 30px; }
25         60% { left: 10px; }
26         to { left: 20px; }
27     }
28
29     #box2 {
30       -webkit-animation-name: anim2;
31       background-color: red;
32     }
33     @-webkit-keyframes anim2 {
34         40% { left: 30px; }
35         60% { left: 10px; }
36         to { left: 20px; }
37     }
38
39     #box3 {
40       left: 20px;
41       -webkit-animation-name: anim3;
42       background-color: green;
43     }
44     @-webkit-keyframes anim3 {
45         from { left: 10px; }
46         40% { left: 30px; }
47         60% { left: 10px; }
48     }
49
50     #box4 {
51       -webkit-animation-name: anim4;
52       background-color: yellow;
53     }
54     @-webkit-keyframes anim4 {
55         40% { left: 30px; }
56         60% { left: 20px; }
57     }
58
59     #box5 {
60       -webkit-animation-name: anim5;
61       background-color: orange;
62     }
63     @-webkit-keyframes anim5 {
64     }
65     
66     #result {
67       margin-top: 20px;
68     }
69   </style>
70   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
71   <script type="text/javascript" charset="utf-8">
72
73     runAnimationTest([
74       // [animation-name, time, element-id, property, expected-value, tolerance]
75       ["anim1", 0.4, "box1", "left", 20, 2],
76       ["anim1", 1.0, "box1", "left", 20, 2],
77       ["anim1", 1.6, "box1", "left", 15, 2],
78       ["anim2", 0.4, "box2", "left", 20, 2],
79       ["anim2", 1.0, "box2", "left", 20, 2],
80       ["anim2", 1.6, "box2", "left", 15, 2],
81       ["anim3", 0.4, "box3", "left", 20, 2],
82       ["anim3", 1.0, "box3", "left", 20, 2],
83       ["anim3", 1.6, "box3", "left", 15, 2],
84       ["anim4", 0.4, "box4", "left", 20, 2],
85       ["anim4", 1.0, "box4", "left", 25, 2],
86       ["anim4", 1.6, "box4", "left", 15, 2],
87       ["anim5", 0.4, "box5", "left", 10, 0],
88       ["anim5", 1.0, "box5", "left", 10, 0],
89       ["anim5", 1.6, "box5", "left", 10, 0]
90     ]);
91     
92   </script>
93 </head>
94 <body>
95 This test performs animations of the left property on five boxes over 2 seconds.
96 Box 1 has all keyframes. Box 2 has a missing "from" keyframe.
97 Box 3 has a missing "to" keyframe.
98 Box 4 has both "from" and "to" keyframes missing, but other keyframes which
99 should trigger the generation of "from" and "to". Box 5 has no keyframes, and
100 should not animate.
101 The test takes 3 snapshots each and expects each result to be within a specified range.
102 <div class="box" id="box1">
103 </div>
104 <div class="box" id="box2">
105 </div>
106 <div class="box" id="box3">
107 </div>
108 <div class="box" id="box4">
109 </div>
110 <div class="box" id="box5">
111 </div>
112 <div id="result">
113 </div>
114 </body>
115 </html>