<!doctype html>
<meta charset=utf-8>
<script src="../testcommon.js"></script>
<body>
<style>
@keyframes anim {
to { margin-left: 100px; }
}
.transition-div {
margin-left: 100px;
}
</style>
<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.40282e+38;
test(function(t) {
var div = addDiv(t);
var anim = div.animate({ }, 100 * MS_PER_SEC);
anim.effect.timing.easing = 'cubic-bezier(0, 1e+39, 0, 0)';
assert_equals(anim.effect.timing.easing,
'cubic-bezier(0, ' + max_float + ', 0, 0)',
'y1 control point for effect easing is out of upper boundary');
anim.effect.timing.easing = 'cubic-bezier(0, 0, 0, 1e+39)';
assert_equals(anim.effect.timing.easing,
'cubic-bezier(0, 0, 0, ' + max_float + ')',
'y2 control point for effect easing is out of upper boundary');
anim.effect.timing.easing = 'cubic-bezier(0, -1e+39, 0, 0)';
assert_equals(anim.effect.timing.easing,
'cubic-bezier(0, ' + -max_float + ', 0, 0)',
'y1 control point for effect easing is out of lower boundary');
anim.effect.timing.easing = 'cubic-bezier(0, 0, 0, -1e+39)';
assert_equals(anim.effect.timing.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.getKeyframes()[0].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.getKeyframes()[0].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.getKeyframes()[0].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.getKeyframes()[0].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.timing.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.timing.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');
done();
</script>
</body>