--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -83291,28 +83291,40 @@
]
],
"cors/status.htm": [
[
"/cors/status.htm",
{}
]
],
+ "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",
{}
]
],
"css-timing-1/frames-timing-functions-syntax.html": [
[
"/css-timing-1/frames-timing-functions-syntax.html",
{}
]
],
+ "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",
{}
]
],
"cssom-view/HTMLBody-ScrollArea_quirksmode.html": [
[
@@ -159526,26 +159538,34 @@
"cors/support.js": [
"8307ed240a531033c96da89197dcfb5ea25cde87",
"support"
],
"css-timing-1/OWNERS": [
"7c9899aa9065ffe6e1206b630124d4939ae53c8f",
"support"
],
+ "css-timing-1/cubic-bezier-timing-functions-output.html": [
+ "77a45437209844f7e5128bd6aa2efeeacf876187",
+ "testharness"
+ ],
"css-timing-1/frames-timing-functions-output.html": [
"d3e2e004ba1ccea736c9c655291e9480f954d1db",
"testharness"
],
"css-timing-1/frames-timing-functions-syntax.html": [
"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": [
"d2e5101f623e29cc993fe2460f6c85f6ec31b471",
"testharness"
],
"cssom-view/HTMLBody-ScrollArea_quirksmode.html": [
"cfe4e07fb9efa140a55175d3cf50ceaced93e1c9",
@@ -205451,17 +205471,17 @@
"10d9ee521240475a1729c2facfcea8b50342614e",
"testharness"
],
"web-animations/animation-model/keyframe-effects/effect-value-overlapping-keyframes.html": [
"a79db70a385ad767263f285c9401b66611087e42",
"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": [
"b01c7c5145c183fdca80dec4ca1966b0f72a7003",
"testharness"
],
"web-animations/animation-model/keyframe-effects/spacing-keyframes.html": [
"318bc877791852b0829a3e10cb19e2a20a15adab",
@@ -205639,17 +205659,17 @@
"d07563840ebcddfa0b0ba7ee1e5561faa56564e6",
"support"
],
"web-animations/resources/keyframe-utils.js": [
"7a0f21838f4bbda51fe7e0b5d8e55952c6cdcbd4",
"support"
],
"web-animations/testcommon.js": [
- "d006a9010160b07b99084cad055dc0563ae19f19",
+ "26d892976e935d0352ef1ede012435cc67be9f79",
"support"
],
"web-animations/timing-model/animation-effects/active-time.html": [
"42eb1a23e89ae60ccd0a3664a9a583df1eb30d49",
"testharness"
],
"web-animations/timing-model/animation-effects/current-iteration.html": [
"b08a35ae832ce33da7fe7fee22e589a6b85a6353",
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/meta/css-timing-1/__dir__.ini
@@ -0,0 +1,1 @@
+prefs: [dom.animations-api.core.enabled:true]
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css-timing-1/cubic-bezier-timing-functions-output.html
@@ -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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css-timing-1/step-timing-functions-output.html
@@ -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>
--- a/testing/web-platform/tests/css-timing-1/testcommon.js
+++ b/testing/web-platform/tests/css-timing-1/testcommon.js
@@ -15,8 +15,51 @@ function createElement(test, tagName, do
}
var element = doc.createElement(tagName || 'div');
doc.body.appendChild(element);
test.add_cleanup(function() {
element.remove();
});
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));
+ }
+}
--- a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html
+++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html
@@ -3,17 +3,16 @@
<title>Tests for calculation of the transformed distance when computing an effect value</title>
<link rel="help" href="https://w3c.github.io/web-animations/#the-effect-value-of-a-keyframe-animation-effect">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<script src="../../resources/easing-tests.js"></script>
<body>
<div id="log"></div>
-<div id="target"></div>
<script>
'use strict';
// Test that applying easing to keyframes is applied as expected
gEasingTests.forEach(params => {
test(function(t) {
const target = createDiv(t);
@@ -75,343 +74,10 @@ gEasingTests.forEach(params => {
`The 'width' of the animated elements should be equal ` +
`at ${sampleTime}ms`);
});
});
}, 'Linear-equivalent cubic-bezier keyframe easing applied to an effect ' +
`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>
--- a/testing/web-platform/tests/web-animations/testcommon.js
+++ b/testing/web-platform/tests/web-animations/testcommon.js
@@ -85,21 +85,16 @@ function createPseudo(test, type) {
assert_true(anims.length >= 1);
var anim = anims[anims.length - 1];
assert_equals(anim.effect.target.parentElement, div);
assert_equals(anim.effect.target.type, '::' + type);
anim.cancel();
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) {
var omt = 1-t;
return 3 * omt * omt * t * x1 + 3 * omt * t * t * x2 + t * t * t;
}
function yForT(t) {