mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-24 09:27:31 +09:00
import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo
This commit is contained in:
Roy Tam
commit
dcd9973243
150858 changed files with 23884658 additions and 0 deletions
167
dom/animation/test/mozilla/file_cubic_bezier_limits.html
Normal file
167
dom/animation/test/mozilla/file_cubic_bezier_limits.html
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue