mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-27 20:25:44 +00:00
Bug 1332206 - Move tests for timing functions with inputs outside [0, 1]; r=hiro
These should be part of the tests for the transformed distance since that is currently the only place where they can occur. This patch also revises the test descriptions somewhat to make it clearer what is being tested. MozReview-Commit-ID: D4YfAiZUBYR --HG-- extra : rebase_source : 778034d7bd02431cb2ebaee7da7e1fe3f745c400
This commit is contained in:
parent
0a80bcf958
commit
e754344e5f
@ -203748,7 +203748,7 @@
|
||||
"testharness"
|
||||
],
|
||||
"web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html": [
|
||||
"19ef984086a26528a4e8e036f1cd6dbdfc73c02f",
|
||||
"6c4b483ec111146c19c1f9ba436087b12805bb52",
|
||||
"testharness"
|
||||
],
|
||||
"web-animations/animation-model/keyframe-effects/effect-value-visibility.html": [
|
||||
@ -203892,7 +203892,7 @@
|
||||
"testharness"
|
||||
],
|
||||
"web-animations/interfaces/KeyframeEffect/effect-easing.html": [
|
||||
"f4d26058580e01e18953debbf4e53be08db9c29a",
|
||||
"951c6bf632c9751e2c697249f88df645d08f164e",
|
||||
"testharness"
|
||||
],
|
||||
"web-animations/interfaces/KeyframeEffect/getComputedTiming.html": [
|
||||
|
@ -80,5 +80,306 @@ gEasingTests.forEach(params => {
|
||||
`with a ${params.desc} does not alter the result`);
|
||||
});
|
||||
|
||||
// Test that different easing functions correctly handle inputs outside the
|
||||
// range [0, 1]. This only occurs when we have an easing specified on the
|
||||
// effect that produces a value outside [0, 1] which we then pass to an easing
|
||||
// on a keyframe.
|
||||
|
||||
function assert_style_left_at(animation, time, easingFunction) {
|
||||
animation.currentTime = time;
|
||||
var portion = time / animation.effect.timing.duration;
|
||||
assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left),
|
||||
easingFunction(portion) * 100,
|
||||
0.01,
|
||||
'The left of the animation should be approximately ' +
|
||||
easingFunction(portion) * 100 + ' at ' + time + 'ms');
|
||||
}
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate([ { left: '0px', easing: 'step-start' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
||||
anim.pause();
|
||||
|
||||
// The bezier function produces values greater than 1 in (0.23368794, 1)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 230;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 250;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'step-start easing with input progress greater than 1');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate([ { left: '0px', easing: 'step-end' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
||||
anim.pause();
|
||||
|
||||
// The bezier function produces values greater than 1 in (0.23368794, 1)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 230;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 250;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'step-end easing with input progress greater than 1');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate([ { left: '0px', easing: 'step-start' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
||||
anim.pause();
|
||||
|
||||
// The bezier function produces negative values in (0, 0.766312060)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 750;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 800;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'step-start easing with input progress less than 0');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate([ { left: '0px', easing: 'step-end' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
||||
anim.pause();
|
||||
|
||||
// The bezier function produces negative values in (0, 0.766312060)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 750;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 800;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'step-end easing with input progress less than 0');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate(
|
||||
// http://cubic-bezier.com/#.5,1,.5,0
|
||||
[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
||||
var keyframeEasing = function(x) {
|
||||
assert_greater_than_equal(x, 0.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
assert_less_than_equal(x, 1.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
return cubicBezier(0.5, 1, 0.5, 0)(x);
|
||||
}
|
||||
var keyframeEasingExtrapolated = function(x) {
|
||||
assert_greater_than(x, 1.0,
|
||||
'This function should be called in (1.0, infinity) range');
|
||||
// p3x + (p2y - p3y) / (p2x - p3x) * (x - p3x)
|
||||
return 1.0 + (0 - 1) / (0.5 - 1) * (x - 1.0);
|
||||
}
|
||||
var effectEasing = function(x) {
|
||||
return cubicBezier(0, 1.5, 1, 1.5)(x);
|
||||
}
|
||||
|
||||
anim.pause();
|
||||
|
||||
// The effect-easing produces values greater than 1 in (0.23368794, 1)
|
||||
assert_style_left_at(anim, 0, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 230, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 240, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
// Near the extreme point of the effect-easing function
|
||||
assert_style_left_at(anim, 700, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 990, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 1000, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
}, 'cubic-bezier easing with input progress greater than 1');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate(
|
||||
// http://cubic-bezier.com/#0,1.5,1,1.5
|
||||
[ { left: '0px', easing: 'cubic-bezier(0, 1.5, 1, 1.5)' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
||||
var easing = function(x) {
|
||||
assert_greater_than_equal(x, 0.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
assert_less_than_equal(x, 1.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
return cubicBezier(0, 1.5, 1, 1.5)(x);
|
||||
}
|
||||
var easingExtrapolated = function(x) {
|
||||
assert_greater_than(x, 1.0,
|
||||
'This function should be called in negative range');
|
||||
// For cubic-bezier(0, 1.5, 1, 1.5), the tangent at the
|
||||
// endpoint (x = 1.0) is infinity so we should just return 1.0.
|
||||
return 1.0;
|
||||
}
|
||||
|
||||
anim.pause();
|
||||
|
||||
// The effect-easing produces values greater than 1 in (0.23368794, 1)
|
||||
assert_style_left_at(anim, 0, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
assert_style_left_at(anim, 230, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
assert_style_left_at(anim, 240, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
// Near the extreme point of the effect-easing function
|
||||
assert_style_left_at(anim, 700, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 990, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 1000, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
}, 'cubic-bezier easing with input progress greater than 1 and where the ' +
|
||||
'tangent on the upper boundary is infinity');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate(
|
||||
// http://cubic-bezier.com/#.5,1,.5,0
|
||||
[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
||||
var keyframeEasing = function(x) {
|
||||
assert_greater_than_equal(x, 0.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
assert_less_than_equal(x, 1.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
return cubicBezier(0.5, 1, 0.5, 0)(x);
|
||||
}
|
||||
var keyframeEasingExtrapolated = function(x) {
|
||||
assert_less_than(x, 0.0,
|
||||
'This function should be called in negative range');
|
||||
// p0x + (p1y - p0y) / (p1x - p0x) * (x - p0x)
|
||||
return (1 / 0.5) * x;
|
||||
}
|
||||
var effectEasing = function(x) {
|
||||
return cubicBezier(0, -0.5, 1, -0.5)(x);
|
||||
}
|
||||
|
||||
anim.pause();
|
||||
|
||||
// The effect-easing produces negative values in (0, 0.766312060)
|
||||
assert_style_left_at(anim, 0, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 10, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
// Near the extreme point of the effect-easing function
|
||||
assert_style_left_at(anim, 300, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 750, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 770, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 1000, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
}, 'cubic-bezier easing with input progress less than 0');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate(
|
||||
// http://cubic-bezier.com/#0,-0.5,1,-0.5
|
||||
[ { left: '0px', easing: 'cubic-bezier(0, -0.5, 1, -0.5)' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
||||
var easing = function(x) {
|
||||
assert_greater_than_equal(x, 0.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
assert_less_than_equal(x, 1.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
return cubicBezier(0, -0.5, 1, -0.5)(x);
|
||||
}
|
||||
var easingExtrapolated = function(x) {
|
||||
assert_less_than(x, 0.0,
|
||||
'This function should be called in negative range');
|
||||
// For cubic-bezier(0, -0.5, 1, -0.5), the tangent at the
|
||||
// endpoint (x = 0.0) is infinity so we should just return 0.0.
|
||||
return 0.0;
|
||||
}
|
||||
|
||||
anim.pause();
|
||||
|
||||
// The effect-easing produces negative values in (0, 0.766312060)
|
||||
assert_style_left_at(anim, 0, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
assert_style_left_at(anim, 10, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
// Near the extreme point of the effect-easing function
|
||||
assert_style_left_at(anim, 300, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 750, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 770, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
assert_style_left_at(anim, 1000, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
}, 'cubic-bezier easing with input progress less than 0 and where the ' +
|
||||
'tangent on the lower boundary is infinity');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
@ -13,307 +13,6 @@
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
function assert_style_left_at(animation, time, easingFunction) {
|
||||
animation.currentTime = time;
|
||||
var portion = time / animation.effect.timing.duration;
|
||||
assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left),
|
||||
easingFunction(portion) * 100,
|
||||
0.01,
|
||||
'The left of the animation should be approximately ' +
|
||||
easingFunction(portion) * 100 + ' at ' + time + 'ms');
|
||||
}
|
||||
|
||||
// Other test cases that effect easing produces values outside of [0,1].
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate([ { left: '0px', easing: 'step-start' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
||||
anim.pause();
|
||||
|
||||
// The bezier function produces values greater than 1 in (0.23368794, 1)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 230;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 250;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'effect easing produces values greater than 1 with step-start keyframe');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate([ { left: '0px', easing: 'step-end' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
||||
anim.pause();
|
||||
|
||||
// The bezier function produces values greater than 1 in (0.23368794, 1)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 230;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 250;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'effect easing produces values greater than 1 with step-end keyframe');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate([ { left: '0px', easing: 'step-start' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
||||
anim.pause();
|
||||
|
||||
// The bezier function produces negative values in (0, 0.766312060)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 750;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 800;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'effect easing produces negative values with step-start keyframe');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate([ { left: '0px', easing: 'step-end' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
||||
anim.pause();
|
||||
|
||||
// The bezier function produces negative values in (0, 0.766312060)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 750;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 800;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'effect easing produces negative values with step-end keyframe');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate(
|
||||
// http://cubic-bezier.com/#.5,1,.5,0
|
||||
[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
||||
var keyframeEasing = function(x) {
|
||||
assert_greater_than_equal(x, 0.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
assert_less_than_equal(x, 1.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
return cubicBezier(0.5, 1, 0.5, 0)(x);
|
||||
}
|
||||
var keyframeEasingExtrapolated = function(x) {
|
||||
assert_greater_than(x, 1.0,
|
||||
'This function should be called in (1.0, infinity) range');
|
||||
// p3x + (p2y - p3y) / (p2x - p3x) * (x - p3x)
|
||||
return 1.0 + (0 - 1) / (0.5 - 1) * (x - 1.0);
|
||||
}
|
||||
var effectEasing = function(x) {
|
||||
return cubicBezier(0, 1.5, 1, 1.5)(x);
|
||||
}
|
||||
|
||||
anim.pause();
|
||||
|
||||
// The effect-easing produces values greater than 1 in (0.23368794, 1)
|
||||
assert_style_left_at(anim, 0, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 230, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 240, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
// Near the extreme point of the effect-easing function
|
||||
assert_style_left_at(anim, 700, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 990, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 1000, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
}, 'effect easing produces values greater than 1 with keyframe easing ' +
|
||||
'producing values greater than 1');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate(
|
||||
// http://cubic-bezier.com/#0,1.5,1,1.5
|
||||
[ { left: '0px', easing: 'cubic-bezier(0, 1.5, 1, 1.5)' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
||||
var easing = function(x) {
|
||||
assert_greater_than_equal(x, 0.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
assert_less_than_equal(x, 1.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
return cubicBezier(0, 1.5, 1, 1.5)(x);
|
||||
}
|
||||
var easingExtrapolated = function(x) {
|
||||
assert_greater_than(x, 1.0,
|
||||
'This function should be called in negative range');
|
||||
// For cubic-bezier(0, 1.5, 1, 1.5), the tangent at the
|
||||
// endpoint (x = 1.0) is infinity so we should just return 1.0.
|
||||
return 1.0;
|
||||
}
|
||||
|
||||
anim.pause();
|
||||
|
||||
// The effect-easing produces values greater than 1 in (0.23368794, 1)
|
||||
assert_style_left_at(anim, 0, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
assert_style_left_at(anim, 230, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
assert_style_left_at(anim, 240, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
// Near the extreme point of the effect-easing function
|
||||
assert_style_left_at(anim, 700, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 990, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 1000, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
}, 'effect easing which produces values greater than 1 and the tangent on ' +
|
||||
'the upper boundary is infinity with keyframe easing producing values ' +
|
||||
'greater than 1');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate(
|
||||
// http://cubic-bezier.com/#.5,1,.5,0
|
||||
[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
||||
var keyframeEasing = function(x) {
|
||||
assert_greater_than_equal(x, 0.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
assert_less_than_equal(x, 1.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
return cubicBezier(0.5, 1, 0.5, 0)(x);
|
||||
}
|
||||
var keyframeEasingExtrapolated = function(x) {
|
||||
assert_less_than(x, 0.0,
|
||||
'This function should be called in negative range');
|
||||
// p0x + (p1y - p0y) / (p1x - p0x) * (x - p0x)
|
||||
return (1 / 0.5) * x;
|
||||
}
|
||||
var effectEasing = function(x) {
|
||||
return cubicBezier(0, -0.5, 1, -0.5)(x);
|
||||
}
|
||||
|
||||
anim.pause();
|
||||
|
||||
// The effect-easing produces negative values in (0, 0.766312060)
|
||||
assert_style_left_at(anim, 0, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 10, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
// Near the extreme point of the effect-easing function
|
||||
assert_style_left_at(anim, 300, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 750, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 770, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 1000, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
}, 'effect easing produces negative values with keyframe easing ' +
|
||||
'producing negative values');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate(
|
||||
// http://cubic-bezier.com/#0,-0.5,1,-0.5
|
||||
[ { left: '0px', easing: 'cubic-bezier(0, -0.5, 1, -0.5)' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
||||
var easing = function(x) {
|
||||
assert_greater_than_equal(x, 0.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
assert_less_than_equal(x, 1.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
return cubicBezier(0, -0.5, 1, -0.5)(x);
|
||||
}
|
||||
var easingExtrapolated = function(x) {
|
||||
assert_less_than(x, 0.0,
|
||||
'This function should be called in negative range');
|
||||
// For cubic-bezier(0, -0.5, 1, -0.5), the tangent at the
|
||||
// endpoint (x = 0.0) is infinity so we should just return 0.0.
|
||||
return 0.0;
|
||||
}
|
||||
|
||||
anim.pause();
|
||||
|
||||
// The effect-easing produces negative values in (0, 0.766312060)
|
||||
assert_style_left_at(anim, 0, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
assert_style_left_at(anim, 10, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
// Near the extreme point of the effect-easing function
|
||||
assert_style_left_at(anim, 300, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 750, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 770, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
assert_style_left_at(anim, 1000, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
}, 'effect easing which produces negative values and the tangent on ' +
|
||||
'the lower boundary is infinity with keyframe easing producing ' +
|
||||
'negative values');
|
||||
|
||||
gInvalidEasings.forEach(function(invalidEasing) {
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
|
Loading…
Reference in New Issue
Block a user