--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -205280,17 +205280,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",
+ "b4ed192ce75c7ea3d10b5a1b3d986d0d6be74396",
"testharness"
],
"web-animations/animation-model/keyframe-effects/effect-value-visibility.html": [
"b01c7c5145c183fdca80dec4ca1966b0f72a7003",
"testharness"
],
"web-animations/animation-model/keyframe-effects/spacing-keyframes.html": [
"318bc877791852b0829a3e10cb19e2a20a15adab",
@@ -205508,17 +205508,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",
+ "0252a57bfd649a0b5b8cb48f5dd36ede9d84c80b",
"testharness"
],
"webaudio/.gitignore": [
"11bc81247643b0a9fc665f1e4b1f592cc1f4c670",
"support"
],
"webaudio/OWNERS": [
"d98264a830bdab63db07061e8b25080188e1aeab",
--- 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
@@ -408,10 +408,75 @@ test(function(t) {
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');
+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 greater than 1 (but always less than 2)
+ // in (0.23368794, 1), and the values greater than 0.5 from 0.442.
+ 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 function produces values greater than 2 (but always less than 3)
+ // in the range (~0.245, ~0.882), and the values greater than 1.5 from 0.114.
+ 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 -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');
+}, '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,154 @@ 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 reverse direction',
+ effect: {
+ delay: 1000,
+ duration: 1000,
+ fill: 'both',
+ direction: 'reverse',
+ easing: 'frames(2)'
+ },
+ conditions: [
+ { currentTime: 0, progress: 1 },
+ { currentTime: 1000, progress: 1 },
+ { currentTime: 1500, progress: 1 },
+ { currentTime: 1501, progress: 0 },
+ { currentTime: 2000, progress: 0 }
+ ]
+ },
+ {
+ description: 'Test bounds point of frames easing ' +
+ 'with iterationStart not at a transition point',
+ effect: {
+ delay: 1000,
+ duration: 1000,
+ fill: 'both',
+ iterationStart: 0.25,
+ easing: 'frames(2)'
+ },
+ conditions: [
+ { currentTime: 0, progress: 0 },
+ { currentTime: 1000, progress: 0 },
+ { currentTime: 1249, progress: 0 },
+ { currentTime: 1250, progress: 1 },
+ { currentTime: 1749, progress: 1 },
+ { currentTime: 1750, progress: 0 },
+ { currentTime: 2000, progress: 0 }
+ ]
+ },
+ {
+ 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 }
+ ]
+ },
+ {
+ description: 'Test bounds point of frames easing ' +
+ 'with iterationStart and reverse direction',
+ effect: {
+ delay: 1000,
+ duration: 1000,
+ fill: 'both',
+ iterationStart: 0.5,
+ direction: 'reverse',
+ easing: 'frames(2)'
+ },
+ conditions: [
+ { currentTime: 0, progress: 1 },
+ { currentTime: 1000, progress: 1 },
+ { currentTime: 1001, progress: 0 },
+ { currentTime: 1499, progress: 0 },
+ { currentTime: 1500, progress: 1 },
+ { currentTime: 2000, progress: 1 }
+ ]
+ },
+ {
+ description: 'Test bounds point of frames easing ' +
+ 'with alternate direction',
+ effect: {
+ duration: 1000,
+ fill: 'both',
+ delay: 1000,
+ iterations: 2,
+ iterationStart: 1.5,
+ direction: 'alternate',
+ easing: 'frames(2)'
+ },
+ conditions: [
+ { currentTime: 0, progress: 1 },
+ { currentTime: 1000, progress: 1 },
+ { currentTime: 1001, progress: 0 },
+ { currentTime: 1999, progress: 0 },
+ { currentTime: 2000, progress: 1 },
+ { currentTime: 3000, progress: 1 }
+ ]
+ },
+ {
+ description: 'Test bounds point of frames easing ' +
+ 'with alternate-reverse direction',
+ effect: {
+ duration: 1000,
+ fill: 'both',
+ delay: 1000,
+ iterations: 2,
+ iterationStart: 0.5,
+ direction: 'alternate-reverse',
+ easing: 'frames(2)'
+ },
+ conditions: [
+ { currentTime: 0, progress: 1 },
+ { currentTime: 1000, progress: 1 },
+ { currentTime: 1001, progress: 0 },
+ { currentTime: 1999, progress: 0 },
+ { currentTime: 2000, progress: 1 },
+ { currentTime: 3000, 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');