Bug 1248340 - Part 8: Add tests for transformed-progress and input progress outside [0, 1].
MozReview-Commit-ID: 4t3fx3Adkhj
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -159543,17 +159543,17 @@
"7c9899aa9065ffe6e1206b630124d4939ae53c8f",
"support"
],
"css-timing-1/cubic-bezier-timing-functions-output.html": [
"77a45437209844f7e5128bd6aa2efeeacf876187",
"testharness"
],
"css-timing-1/frames-timing-functions-output.html": [
- "d3e2e004ba1ccea736c9c655291e9480f954d1db",
+ "fe9a931466f31605f1a09d5f95589cc54ee34663",
"testharness"
],
"css-timing-1/frames-timing-functions-syntax.html": [
"7ac5eef9cec74746aa076912285398f525b01c06",
"testharness"
],
"css-timing-1/step-timing-functions-output.html": [
"4b514aac1efca5813e5a551290f8c84f678bd41d",
@@ -205699,17 +205699,17 @@
"6e8e029f813046c3da69b4ff0c9d03d2a56b38a4",
"testharness"
],
"web-animations/timing-model/animations/updating-the-finished-state.html": [
"266f1b793aa74a59486081f3ba8f6cbb482e714b",
"testharness"
],
"web-animations/timing-model/time-transformations/transformed-progress.html": [
- "6eebd47c9e60c9590de4d1747f8b8b7866a4a275",
+ "66e2277c77e4bd7b2d8981a725fb5083a8f5e0f6",
"testharness"
],
"webaudio/.gitignore": [
"11bc81247643b0a9fc665f1e4b1f592cc1f4c670",
"support"
],
"webaudio/OWNERS": [
"d98264a830bdab63db07061e8b25080188e1aeab",
--- a/testing/web-platform/tests/css-timing-1/frames-timing-functions-output.html
+++ b/testing/web-platform/tests/css-timing-1/frames-timing-functions-output.html
@@ -72,10 +72,81 @@ test(function(t) {
div.style.left = '0px';
div.style.transitionDelay = '-1000ms';
getComputedStyle(div).left;
div.style.left = '100px';
assert_equals(getComputedStyle(div).left, '10px');
}, 'The number of frames is correctly reflected in the frames timing ' +
'function output on CSS Transitions');
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate([ { left: '0px', easing: 'frames(2)' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
+
+ // The bezier function produces values between 0.5 and 1 in
+ // (~0.0442, 0.23368), and values between 1 and 2 in (0.23368794, 1).
+ anim.currentTime = 0;
+ assert_equals(getComputedStyle(target).left, '0px');
+ anim.currentTime = 45;
+ 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');
+}, 'frames 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: 'frames(2)' },
+ { left: '100px' } ],
+ { duration: 1000,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0, 3, 1, 3)' });
+
+ // The bezier funciton produces values:
+ // Input -> Output
+ // 0.0 0.0
+ // 0.114 ~ 0.245 1.5~2.0, so frames(2) is 3.0
+ // 0.245 ~ 0.6 2.0~2.4, so frames(2) is 4.0
+ // 0.6 ~ 0.882 2.4~2.0, so frames(2) is 4.0
+ // 0.882 ~ 0.976 2.0~1.5, so frames(2) is 3.0
+ // 1.0 1.0
+ anim.currentTime = 0;
+ assert_equals(getComputedStyle(target).left, '0px');
+ anim.currentTime = 114;
+ assert_equals(getComputedStyle(target).left, '300px');
+ anim.currentTime = 500;
+ assert_equals(getComputedStyle(target).left, '400px');
+ anim.currentTime = 900;
+ assert_equals(getComputedStyle(target).left, '300px');
+}, 'frames easing with input progress greater than 1.5');
+
+test(function(t) {
+ var target = createDiv(t);
+ target.style.position = 'absolute';
+ var anim = target.animate([ { left: '0px', easing: 'frames(2)' },
+ { 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 -0.5)
+ // 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');
+}, 'frames easing with input progress less than 0');
+
</script>
</body>
--- a/testing/web-platform/tests/web-animations/timing-model/time-transformations/transformed-progress.html
+++ b/testing/web-platform/tests/web-animations/timing-model/time-transformations/transformed-progress.html
@@ -27,19 +27,20 @@ gEasingTests.forEach(params => {
expectedProgress,
0.01,
'The progress should be approximately ' +
expectedProgress + ` at ${sampleTime}ms`);
});
}, 'Transformed progress for ' + params.desc);
});
-// Additional tests for various boundary conditions of step timing functions
+// Additional tests for various boundary conditions of step timing functions and
+// frames timing functions.
-var gStepTimingFunctionTests = [
+var gStepAndFramesTimingFunctionTests = [
{
description: 'Test bounds point of step-start easing',
effect: {
delay: 1000,
duration: 1000,
fill: 'both',
easing: 'steps(2, start)'
},
@@ -247,20 +248,55 @@ var gStepTimingFunctionTests = [
{ currentTime: 1000, progress: 0.5 },
{ currentTime: 1249, progress: 0.5 },
{ currentTime: 1250, progress: 0 },
{ currentTime: 1749, progress: 0 },
{ currentTime: 1750, progress: 0.5 },
{ currentTime: 2000, progress: 0.5 },
{ currentTime: 2500, progress: 0.5 },
]
+ },
+ {
+ description: 'Test bounds point of frames easing',
+ effect: {
+ delay: 1000,
+ duration: 1000,
+ fill: 'both',
+ easing: 'frames(2)'
+ },
+ conditions: [
+ { currentTime: 0, progress: 0 },
+ { currentTime: 1000, progress: 0 },
+ { currentTime: 1499, progress: 0 },
+ { currentTime: 1500, progress: 1 },
+ { currentTime: 2000, progress: 1 }
+ ]
+ },
+ {
+ description: 'Test bounds point of frames easing ' +
+ 'with iterationStart and delay',
+ effect: {
+ delay: 1000,
+ duration: 1000,
+ fill: 'both',
+ iterationStart: 0.5,
+ easing: 'frames(2)'
+ },
+ conditions: [
+ { currentTime: 0, progress: 1 },
+ { currentTime: 1000, progress: 1 },
+ { currentTime: 1499, progress: 1 },
+ { currentTime: 1500, progress: 0 },
+ { currentTime: 1999, progress: 0 },
+ { currentTime: 2000, progress: 1 }
+ ]
}
];
-gStepTimingFunctionTests.forEach(function(options) {
+gStepAndFramesTimingFunctionTests.forEach(function(options) {
test(function(t) {
var target = createDiv(t);
var animation = target.animate(null, options.effect);
options.conditions.forEach(function(condition) {
animation.currentTime = condition.currentTime;
assert_equals(animation.effect.getComputedTiming().progress,
condition.progress,
'Progress at ' + animation.currentTime + 'ms');