mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-11 12:25:53 +00:00
Bug 1248340 - Part 7: Move the tests of input range outside [0, 1] into css-timing-1. r=birtles
MozReview-Commit-ID: 8AMdaABvxaF --HG-- extra : rebase_source : a5f0715461d18f835a291fdd957b5d421adb98d7
This commit is contained in:
parent
482e5b27cf
commit
53af8ec729
@ -83296,6 +83296,12 @@
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css-timing-1/cubic-bezier-timing-functions-output.html": [
|
||||
[
|
||||
"/css-timing-1/cubic-bezier-timing-functions-output.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css-timing-1/frames-timing-functions-output.html": [
|
||||
[
|
||||
"/css-timing-1/frames-timing-functions-output.html",
|
||||
@ -83308,6 +83314,12 @@
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css-timing-1/step-timing-functions-output.html": [
|
||||
[
|
||||
"/css-timing-1/step-timing-functions-output.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css-values/unset-value-storage.html": [
|
||||
[
|
||||
"/css-values/unset-value-storage.html",
|
||||
@ -159531,6 +159543,10 @@
|
||||
"7c9899aa9065ffe6e1206b630124d4939ae53c8f",
|
||||
"support"
|
||||
],
|
||||
"css-timing-1/cubic-bezier-timing-functions-output.html": [
|
||||
"77a45437209844f7e5128bd6aa2efeeacf876187",
|
||||
"testharness"
|
||||
],
|
||||
"css-timing-1/frames-timing-functions-output.html": [
|
||||
"d3e2e004ba1ccea736c9c655291e9480f954d1db",
|
||||
"testharness"
|
||||
@ -159539,8 +159555,12 @@
|
||||
"7ac5eef9cec74746aa076912285398f525b01c06",
|
||||
"testharness"
|
||||
],
|
||||
"css-timing-1/step-timing-functions-output.html": [
|
||||
"4b514aac1efca5813e5a551290f8c84f678bd41d",
|
||||
"testharness"
|
||||
],
|
||||
"css-timing-1/testcommon.js": [
|
||||
"f9664126fbf6858bd305a3086d3a70afb20b0396",
|
||||
"a39c8c7fdd3b58d03d5a544ebe51f82e65ac5645",
|
||||
"support"
|
||||
],
|
||||
"css-values/unset-value-storage.html": [
|
||||
@ -205456,7 +205476,7 @@
|
||||
"testharness"
|
||||
],
|
||||
"web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html": [
|
||||
"59e86254c8c118bd30b5c6742cfeaceba783eaee",
|
||||
"a0f0dc7d2f4833a68c6f8a5f908c498b05c6b22e",
|
||||
"testharness"
|
||||
],
|
||||
"web-animations/animation-model/keyframe-effects/effect-value-visibility.html": [
|
||||
@ -205644,7 +205664,7 @@
|
||||
"support"
|
||||
],
|
||||
"web-animations/testcommon.js": [
|
||||
"d006a9010160b07b99084cad055dc0563ae19f19",
|
||||
"26d892976e935d0352ef1ede012435cc67be9f79",
|
||||
"support"
|
||||
],
|
||||
"web-animations/timing-model/animation-effects/active-time.html": [
|
||||
|
1
testing/web-platform/meta/css-timing-1/__dir__.ini
Normal file
1
testing/web-platform/meta/css-timing-1/__dir__.ini
Normal file
@ -0,0 +1 @@
|
||||
prefs: [dom.animations-api.core.enabled:true]
|
@ -0,0 +1,221 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<meta name="assert"
|
||||
content="This test checks the output of Cubic Bézier functions" />
|
||||
<title>Tests for the output of Cubic Bézier timing functions</title>
|
||||
<link rel="help"
|
||||
href="https://drafts.csswg.org/css-timing/#cubic-bezier-timing-functions">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="testcommon.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<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');
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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>
|
@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<meta name="assert"
|
||||
content="This test checks the output of step timing functions" />
|
||||
<title>Tests for the output of step timing functions</title>
|
||||
<link rel="help"
|
||||
href="https://drafts.csswg.org/css-timing/#step-timing-functions">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="testcommon.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
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)' });
|
||||
|
||||
// The bezier function produces values greater than 1 (but always less than 2)
|
||||
// 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, '200px');
|
||||
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)' });
|
||||
|
||||
// The bezier function produces values greater than 1 (but always less than 2)
|
||||
// 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-end' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, 3, 1, 3)' });
|
||||
|
||||
// The bezier function produces values greater than 2 (but always less than 3)
|
||||
// in the range (~0.245, ~0.882)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 500;
|
||||
assert_equals(getComputedStyle(target).left, '200px');
|
||||
anim.currentTime = 900;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'step-end easing with input progress greater than 2');
|
||||
|
||||
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)' });
|
||||
|
||||
// The bezier function produces negative values (but always greater than -1)
|
||||
// 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-start' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, -2, 1, -2)' });
|
||||
|
||||
// The bezier function produces values less than -1 (but always greater than
|
||||
// -2) in the range (~0.118, ~0.755)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 100;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 500;
|
||||
assert_equals(getComputedStyle(target).left, '-100px');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'step-start easing with input progress less 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, -0.5, 1, -0.5)' });
|
||||
|
||||
// The bezier function produces negative values (but always greater than -1)
|
||||
// in (0, 0.766312060)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 750;
|
||||
assert_equals(getComputedStyle(target).left, '-100px');
|
||||
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');
|
||||
|
||||
</script>
|
||||
</body>
|
@ -20,3 +20,46 @@ function createElement(test, tagName, doc) {
|
||||
});
|
||||
return element;
|
||||
}
|
||||
|
||||
// Convert px unit value to a Number
|
||||
function pxToNum(str) {
|
||||
return Number(String(str).match(/^(-?[\d.]+)px$/)[1]);
|
||||
}
|
||||
|
||||
// Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1).
|
||||
function cubicBezier(x1, y1, x2, y2) {
|
||||
function xForT(t) {
|
||||
var omt = 1-t;
|
||||
return 3 * omt * omt * t * x1 + 3 * omt * t * t * x2 + t * t * t;
|
||||
}
|
||||
|
||||
function yForT(t) {
|
||||
var omt = 1-t;
|
||||
return 3 * omt * omt * t * y1 + 3 * omt * t * t * y2 + t * t * t;
|
||||
}
|
||||
|
||||
function tForX(x) {
|
||||
// Binary subdivision.
|
||||
var mint = 0, maxt = 1;
|
||||
for (var i = 0; i < 30; ++i) {
|
||||
var guesst = (mint + maxt) / 2;
|
||||
var guessx = xForT(guesst);
|
||||
if (x < guessx) {
|
||||
maxt = guesst;
|
||||
} else {
|
||||
mint = guesst;
|
||||
}
|
||||
}
|
||||
return (mint + maxt) / 2;
|
||||
}
|
||||
|
||||
return function bezierClosure(x) {
|
||||
if (x == 0) {
|
||||
return 0;
|
||||
}
|
||||
if (x == 1) {
|
||||
return 1;
|
||||
}
|
||||
return yForT(tForX(x));
|
||||
}
|
||||
}
|
||||
|
@ -8,7 +8,6 @@
|
||||
<script src="../../resources/easing-tests.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
@ -80,338 +79,5 @@ 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)' });
|
||||
|
||||
// The bezier function produces values greater than 1 (but always less than 2)
|
||||
// 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, '200px');
|
||||
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)' });
|
||||
|
||||
// The bezier function produces values greater than 1 (but always less than 2)
|
||||
// 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-end' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, 3, 1, 3)' });
|
||||
|
||||
// The bezier function produces values greater than 2 (but always less than 3)
|
||||
// in the range (~0.245, ~0.882)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 500;
|
||||
assert_equals(getComputedStyle(target).left, '200px');
|
||||
anim.currentTime = 900;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'step-end easing with input progress greater than 2');
|
||||
|
||||
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)' });
|
||||
|
||||
// The bezier function produces negative values (but always greater than -1)
|
||||
// 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-start' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, -2, 1, -2)' });
|
||||
|
||||
// The bezier function produces values less than -1 (but always greater than
|
||||
// -2) in the range (~0.118, ~0.755)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 100;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 500;
|
||||
assert_equals(getComputedStyle(target).left, '-100px');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'step-start easing with input progress less 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, -0.5, 1, -0.5)' });
|
||||
|
||||
// The bezier function produces negative values (but always greater than -1)
|
||||
// in (0, 0.766312060)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 750;
|
||||
assert_equals(getComputedStyle(target).left, '-100px');
|
||||
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);
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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>
|
||||
|
@ -90,11 +90,6 @@ function createPseudo(test, type) {
|
||||
return anim.effect.target;
|
||||
}
|
||||
|
||||
// Convert px unit value to a Number
|
||||
function pxToNum(str) {
|
||||
return Number(String(str).match(/^(-?[\d.]+)px$/)[1]);
|
||||
}
|
||||
|
||||
// Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1).
|
||||
function cubicBezier(x1, y1, x2, y2) {
|
||||
function xForT(t) {
|
||||
|
Loading…
Reference in New Issue
Block a user