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