1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7 <title>Test animation with missing from and to keyframes</title>
8 <style type="text/css" media="screen">
15 transform: translateX(10px);
16 background-color: blue;
17 -webkit-animation-duration: 2s;
18 -webkit-animation-timing-function: linear;
22 -webkit-animation-name: anim1;
24 @-webkit-keyframes anim1 {
25 from { transform: translateX(10px); }
26 40% { transform: translateX(30px); }
27 60% { transform: translateX(10px); }
28 to { transform: translateX(20px); }
32 -webkit-animation-name: anim2;
33 background-color: red;
35 @-webkit-keyframes anim2 {
36 40% { transform: translateX(30px); }
37 60% { transform: translateX(10px); }
38 to { transform: translateX(20px); }
42 transform: translateX(20px);
43 -webkit-animation-name: anim3;
44 background-color: green;
46 @-webkit-keyframes anim3 {
47 from { transform: translateX(10px); }
48 40% { transform: translateX(30px); }
49 60% { transform: translateX(10px); }
53 -webkit-animation-name: anim4;
54 background-color: yellow;
56 @-webkit-keyframes anim4 {
57 40% { transform: translateX(30px); }
58 60% { transform: translateX(20px); }
65 <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
66 <script type="text/javascript" charset="utf-8">
68 const expectedValues = [
69 // [time, element-id, property, expected-value, tolerance]
70 [0.4, "box1", "webkitTransform.4", 20, 2],
71 [1.0, "box1", "webkitTransform.4", 20, 2],
72 [1.6, "box1", "webkitTransform.4", 15, 2],
73 [0.4, "box2", "webkitTransform.4", 20, 2],
74 [1.0, "box2", "webkitTransform.4", 20, 2],
75 [1.6, "box2", "webkitTransform.4", 15, 2],
76 [0.4, "box3", "webkitTransform.4", 20, 2],
77 [1.0, "box3", "webkitTransform.4", 20, 2],
78 [1.6, "box3", "webkitTransform.4", 15, 2],
79 [0.4, "box4", "webkitTransform.4", 20, 2],
80 [1.0, "box4", "webkitTransform.4", 25, 2],
81 [1.6, "box4", "webkitTransform.4", 15, 2]
84 runAnimationTest(expectedValues);
89 This test performs animations of the transform property on four boxes over 2 seconds.
90 Box 1 has all keyframes. Box 2 has a missing "from" keyframe.
91 Box 3 has a missing "to" keyframe.
92 Box 4 has both "from" and "to" keyframes missing, but other keyframes which
93 should trigger the generation of "from" and "to". Box 5 has no keyframes, and
95 The test takes 3 snapshots each and expects each result to be within a specified range.
96 <div class="box" id="box1">
98 <div class="box" id="box2">
100 <div class="box" id="box3">
102 <div class="box" id="box4">