1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
<!doctype html>
<meta charset=utf-8>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<body>
<style>
@keyframes anim {
to { margin-left: 100px; }
}
.transition-div {
margin-left: 100px;
}
</style>
<div id="log"></div>
<script>
'use strict';
// We clamp +infinity or -inifinity value in floating point to
// maximum floating point value or -maxinum floating point value.
const max_float = '3.40282e38';
test(function(t) {
var div = addDiv(t);
var anim = div.animate({ }, 100 * MS_PER_SEC);
anim.effect.updateTiming({ easing: 'cubic-bezier(0, 1e+39, 0, 0)' });
assert_equals(anim.effect.getComputedTiming().easing,
'cubic-bezier(0, ' + max_float + ', 0, 0)',
'y1 control point for effect easing is out of upper boundary');
anim.effect.updateTiming({ easing: 'cubic-bezier(0, 0, 0, 1e+39)' });
assert_equals(anim.effect.getComputedTiming().easing,
'cubic-bezier(0, 0, 0, ' + max_float + ')',
'y2 control point for effect easing is out of upper boundary');
anim.effect.updateTiming({ easing: 'cubic-bezier(0, -1e+39, 0, 0)' });
assert_equals(anim.effect.getComputedTiming().easing,
'cubic-bezier(0, ' + '-' + max_float + ', 0, 0)',
'y1 control point for effect easing is out of lower boundary');
anim.effect.updateTiming({ easing: 'cubic-bezier(0, 0, 0, -1e+39)' });
assert_equals(anim.effect.getComputedTiming().easing,
'cubic-bezier(0, 0, 0, ' + '-' + max_float + ')',
'y2 control point for effect easing is out of lower boundary');
}, 'Clamp y1 and y2 control point out of boundaries for effect easing' );
test(function(t) {
var div = addDiv(t);
var anim = div.animate({ }, 100 * MS_PER_SEC);
anim.effect.setKeyframes([ { easing: 'cubic-bezier(0, 1e+39, 0, 0)' }]);
assert_equals(anim.effect.getKeyframes()[0].easing,
'cubic-bezier(0, ' + max_float + ', 0, 0)',
'y1 control point for keyframe easing is out of upper boundary');
anim.effect.setKeyframes([ { easing: 'cubic-bezier(0, 0, 0, 1e+39)' }]);
assert_equals(anim.effect.getKeyframes()[0].easing,
'cubic-bezier(0, 0, 0, ' + max_float + ')',
'y2 control point for keyframe easing is out of upper boundary');
anim.effect.setKeyframes([ { easing: 'cubic-bezier(0, -1e+39, 0, 0)' }]);
assert_equals(anim.effect.getKeyframes()[0].easing,
'cubic-bezier(0, ' + '-' + max_float + ', 0, 0)',
'y1 control point for keyframe easing is out of lower boundary');
anim.effect.setKeyframes([ { easing: 'cubic-bezier(0, 0, 0, -1e+39)' }]);
assert_equals(anim.effect.getKeyframes()[0].easing,
'cubic-bezier(0, 0, 0, ' + '-' + max_float + ')',
'y2 control point for keyframe easing is out of lower boundary');
}, 'Clamp y1 and y2 control point out of boundaries for keyframe easing' );
test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim 100s cubic-bezier(0, 1e+39, 0, 0)';
assert_equals(div.getAnimations()[0].effect.getKeyframes()[0].easing,
'cubic-bezier(0, ' + max_float + ', 0, 0)',
'y1 control point for CSS animation is out of upper boundary');
div.style.animation = 'anim 100s cubic-bezier(0, 0, 0, 1e+39)';
assert_equals(div.getAnimations()[0].effect.getKeyframes()[0].easing,
'cubic-bezier(0, 0, 0, ' + max_float + ')',
'y2 control point for CSS animation is out of upper boundary');
div.style.animation = 'anim 100s cubic-bezier(0, -1e+39, 0, 0)';
assert_equals(div.getAnimations()[0].effect.getKeyframes()[0].easing,
'cubic-bezier(0, ' + '-' + max_float + ', 0, 0)',
'y1 control point for CSS animation is out of lower boundary');
div.style.animation = 'anim 100s cubic-bezier(0, 0, 0, -1e+39)';
assert_equals(div.getAnimations()[0].effect.getKeyframes()[0].easing,
'cubic-bezier(0, 0, 0, ' + '-' + max_float + ')',
'y2 control point for CSS animation is out of lower boundary');
}, 'Clamp y1 and y2 control point out of boundaries for CSS animation' );
test(function(t) {
var div = addDiv(t, {'class': 'transition-div'});
div.style.transition = 'margin-left 100s cubic-bezier(0, 1e+39, 0, 0)';
flushComputedStyle(div);
div.style.marginLeft = '0px';
assert_equals(div.getAnimations()[0].effect.getTiming().easing,
'cubic-bezier(0, ' + max_float + ', 0, 0)',
'y1 control point for CSS transition on upper boundary');
div.style.transition = '';
div.style.marginLeft = '';
div.style.transition = 'margin-left 100s cubic-bezier(0, 0, 0, 1e+39)';
flushComputedStyle(div);
div.style.marginLeft = '0px';
assert_equals(div.getAnimations()[0].effect.getTiming().easing,
'cubic-bezier(0, 0, 0, ' + max_float + ')',
'y2 control point for CSS transition on upper boundary');
div.style.transition = '';
div.style.marginLeft = '';
div.style.transition = 'margin-left 100s cubic-bezier(0, -1e+39, 0, 0)';
flushComputedStyle(div);
div.style.marginLeft = '0px';
assert_equals(div.getAnimations()[0].effect.getTiming().easing,
'cubic-bezier(0, ' + '-' + max_float + ', 0, 0)',
'y1 control point for CSS transition on lower boundary');
div.style.transition = '';
div.style.marginLeft = '';
div.style.transition = 'margin-left 100s cubic-bezier(0, 0, 0, -1e+39)';
flushComputedStyle(div);
div.style.marginLeft = '0px';
assert_equals(div.getAnimations()[0].effect.getTiming().easing,
'cubic-bezier(0, 0, 0, ' + '-' + max_float + ')',
'y2 control point for CSS transition on lower boundary');
}, 'Clamp y1 and y2 control point out of boundaries for CSS transition' );
test(function(t) {
var div = addDiv(t);
var anim = div.animate({ }, { duration: 100 * MS_PER_SEC, fill: 'forwards' });
anim.pause();
// The positive steepest function on both edges.
anim.effect.updateTiming({ easing: 'cubic-bezier(0, 1e+39, 0, 1e+39)' });
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
'progress on lower edge for the highest value of y1 and y2 control points');
anim.finish();
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
'progress on upper edge for the highest value of y1 and y2 control points');
// The negative steepest function on both edges.
anim.effect.updateTiming({ easing: 'cubic-bezier(0, -1e+39, 0, -1e+39)' });
anim.currentTime = 0;
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
'progress on lower edge for the lowest value of y1 and y2 control points');
anim.finish();
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
'progress on lower edge for the lowest value of y1 and y2 control points');
}, 'Calculated values on both edges');
</script>
</body>
|
