blob: e9d4dd42212adad0d87cd01c4c036d7751cc47c0 [file] [log] [blame]
graouts@webkit.org80535072018-09-27 09:49:52 +00001<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
dino@apple.come519fcb2010-06-26 02:01:29 +00002
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>
simon.fraser@apple.com93531132011-04-26 03:16:31 +000071 <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
dino@apple.come519fcb2010-06-26 02:01:29 +000072 <script type="text/javascript" charset="utf-8">
73
graouts@webkit.org886d6952018-05-14 18:19:30 +000074 runAnimationTest([
dino@apple.come519fcb2010-06-26 02:01:29 +000075 // [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],
graouts@webkit.org886d6952018-05-14 18:19:30 +000087 ["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 ]);
dino@apple.come519fcb2010-06-26 02:01:29 +000092
93 </script>
94</head>
95<body>
96This test performs animations of the transform property on five boxes over 2 seconds.
97Box 1 has all keyframes. Box 2 has a missing "from" keyframe.
98Box 3 has a missing "to" keyframe.
99Box 4 has both "from" and "to" keyframes missing, but other keyframes which
100should trigger the generation of "from" and "to". Box 5 has no keyframes, and
101should not animate.
102The 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>