Bug 1283387 part 1 - Add tests for updated end delay handling
Based on the following changes to the specification:
https://github.com/w3c/web-animations/commit/a9ba51338ed09170d16c47317f8e4e2eef122a82
MozReview-Commit-ID: zSKTr4T8BM
--- a/layout/style/test/file_animations_effect_timing_enddelay.html
+++ b/layout/style/test/file_animations_effect_timing_enddelay.html
@@ -63,36 +63,36 @@ addAsyncAnimTest(function *() {
var animation = div.animate(
[ { transform: 'translate(0px)' }, { transform: 'translate(100px)' } ],
{ duration: 1000, endDelay: -500, fill: 'none' });
yield waitForPaints();
advance_clock(400);
yield waitForPaints();
omta_is(div, "transform", { tx: 40 }, RunningOn.Compositor,
- "Animation is updated on compositor" +
+ "Animation is updated on compositor " +
"duration 1000, endDelay -500, fill none, current time 400");
advance_clock(100);
yield waitForPaints();
omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
- "Animation is updated on main thread" +
+ "Animation is updated on main thread " +
"duration 1000, endDelay -500, fill none, current time 500");
advance_clock(400);
yield waitForPaints();
omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
- "Animation is updated on main thread" +
- "duration 1000, endDelay -500, fill forwards, current time 900");
+ "Animation is updated on main thread " +
+ "duration 1000, endDelay -500, fill none, current time 900");
advance_clock(100);
yield waitForPaints();
omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
- "Animation is updated on main thread" +
- "duration 1000, endDelay -500, fill forwards, current time 1000");
+ "Animation is updated on main thread " +
+ "duration 1000, endDelay -500, fill none, current time 1000");
done_div();
});
addAsyncAnimTest(function *() {
var [ div ] = new_div("");
var animation = div.animate(
[ { transform: 'translate(0px)' }, { transform: 'translate(100px)' } ],
@@ -112,35 +112,35 @@ addAsyncAnimTest(function *() {
var animation = div.animate(
[ { transform: 'translate(0px)' }, { transform: 'translate(100px)' } ],
{ duration: 1000, endDelay: -500, fill: 'forwards' });
yield waitForPaints();
advance_clock(400);
yield waitForPaints();
omta_is(div, "transform", { tx: 40 }, RunningOn.Compositor,
- "Animation is updated on compositor" +
+ "Animation is updated on compositor " +
"duration 1000, endDelay -500, fill forwards, current time 400");
advance_clock(100);
yield waitForPaints();
- omta_is(div, "transform", { tx: 100 }, RunningOn.MainThread,
- "Animation is updated on main thread" +
+ omta_todo_is(div, "transform", { tx: 50 }, RunningOn.MainThread,
+ "Animation is updated on main thread " +
"duration 1000, endDelay -500, fill forwards, current time 500");
advance_clock(400);
yield waitForPaints();
- omta_is(div, "transform", { tx: 100 }, RunningOn.MainThread,
- "Animation is updated on main thread" +
+ omta_todo_is(div, "transform", { tx: 50 }, RunningOn.MainThread,
+ "Animation is updated on main thread " +
"duration 1000, endDelay -500, fill forwards, current time 900");
advance_clock(100);
yield waitForPaints();
- omta_is(div, "transform", { tx: 100 }, RunningOn.MainThread,
- "Animation is updated on main thread" +
+ omta_todo_is(div, "transform", { tx: 50 }, RunningOn.MainThread,
+ "Animation is updated on main thread " +
"duration 1000, endDelay -500, fill forwards, current time 1000");
done_div();
});
</script>
</body>
</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/meta/web-animations/interfaces/AnimationEffectTiming/getComputedStyle.html.ini
@@ -0,0 +1,5 @@
+[getComputedStyle.html]
+ type: testharness
+ [change currentTime when fill forwards and endDelay is negative]
+ expected: FAIL
+ bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1283387
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/meta/web-animations/timing-model/animation-effects/active-time.html.ini
@@ -0,0 +1,13 @@
+[active-time.html]
+ type: testharness
+ [Active time in after phase with forwards fill and negative end delay is the active duration + end delay]
+ expected: FAIL
+ bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1283387
+
+ [Active time in after phase with forwards fill and negative end delay greater in magnitude than the active duration is zero]
+ expected: FAIL
+ bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1283387
+
+ [Active time in after phase with forwards fill and negative end delay greater in magnitude than the sum of the active duration and start delay is zero]
+ expected: FAIL
+ bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1283387
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/getComputedStyle.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/getComputedStyle.html
@@ -99,25 +99,25 @@ test(function(t) {
endDelay: -5000,
fill: 'forwards' });
anim.currentTime = 1000;
assert_equals(getComputedStyle(div).opacity, '0.9',
'set currentTime before endTime');
anim.currentTime = 5000;
- assert_equals(getComputedStyle(div).opacity, '0',
+ assert_equals(getComputedStyle(div).opacity, '0.5',
'set currentTime same as endTime');
anim.currentTime = 9999;
- assert_equals(getComputedStyle(div).opacity, '0',
+ assert_equals(getComputedStyle(div).opacity, '0.5',
'set currentTime during duration');
anim.currentTime = 10000;
- assert_equals(getComputedStyle(div).opacity, '0',
+ assert_equals(getComputedStyle(div).opacity, '0.5',
'set currentTime after endTime');
}, 'change currentTime when fill forwards and endDelay is negative');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ duration: 10000,
direction: 'normal' });
--- a/testing/web-platform/tests/web-animations/timing-model/animation-effects/active-time.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animation-effects/active-time.html
@@ -1,24 +1,142 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Active time tests</title>
-<link rel="help" href="https://w3c.github.io/web-animations/#active-time">
+<link rel="help" href="https://w3c.github.io/web-animations/#calculating-the-active-time">
<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';
-async_test(function(t) {
- var div = createDiv(t);
- var anim = div.animate({ opacity: [ 0, 1 ] }, { delay: 1 });
+test(function(t) {
+ var tests = [ { fill: 'none', progress: null },
+ { fill: 'backwards', progress: 0 },
+ { fill: 'forwards', progress: null },
+ { fill: 'both', progress: 0 } ];
+ tests.forEach(function(test) {
+ var anim = createDiv(t).animate(null, { delay: 1, fill: test.fill });
+ assert_equals(anim.effect.getComputedTiming().progress, test.progress,
+ 'Progress in before phase when using \'' + test.fill
+ + '\' fill');
+ });
+}, 'Active time in before phase');
+
+test(function(t) {
+ var anim = createDiv(t).animate(null, 1000);
+ anim.currentTime = 500;
+ assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
+}, 'Active time in active phase and no start delay is the local time');
+
+test(function(t) {
+ var anim = createDiv(t).animate(null, { duration: 1000, delay: 500 });
+ anim.currentTime = 1000;
+ assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
+}, 'Active time in active phase and positive start delay is the local time'
+ + ' minus the start delay');
+
+test(function(t) {
+ var anim = createDiv(t).animate(null, { duration: 1000, delay: -500 });
+ assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
+}, 'Active time in active phase and negative start delay is the local time'
+ + ' minus the start delay');
+
+test(function(t) {
+ var anim = createDiv(t).animate(null);
+ assert_equals(anim.effect.getComputedTiming().progress, null);
+}, 'Active time in after phase with no fill is unresolved');
+
+test(function(t) {
+ var anim = createDiv(t).animate(null, { fill: 'backwards' });
assert_equals(anim.effect.getComputedTiming().progress, null);
- anim.finished.then(t.step_func(function() {
- assert_equals(anim.effect.getComputedTiming().progress, null);
- t.done();
- }));
-}, 'Test progress during before and after phase when fill is none');
+}, 'Active time in after phase with backwards-only fill is unresolved');
+
+test(function(t) {
+ var anim = createDiv(t).animate(null, { duration: 1000,
+ iterations: 2.3,
+ delay: 500, // Should have no effect
+ fill: 'forwards' });
+ anim.finish();
+ assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
+ assert_times_equal(anim.effect.getComputedTiming().progress, 0.3);
+}, 'Active time in after phase with forwards fill is the active duration');
+
+test(function(t) {
+ var anim = createDiv(t).animate(null, { duration: 0,
+ iterations: Infinity,
+ fill: 'forwards' });
+ anim.finish();
+ assert_equals(anim.effect.getComputedTiming().currentIteration, Infinity);
+ assert_equals(anim.effect.getComputedTiming().progress, 1);
+}, 'Active time in after phase with forwards fill, zero-duration, and '
+ + ' infinite iteration count is the active duration');
+
+test(function(t) {
+ var anim = createDiv(t).animate(null, { duration: 1000,
+ iterations: 2.3,
+ delay: 500,
+ endDelay: 4000,
+ fill: 'forwards' });
+ anim.finish();
+ assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
+ assert_times_equal(anim.effect.getComputedTiming().progress, 0.3);
+}, 'Active time in after phase with forwards fill and positive end delay'
+ + ' is the active duration');
+
+test(function(t) {
+ var anim = createDiv(t).animate(null, { duration: 1000,
+ iterations: 2.3,
+ delay: 500,
+ endDelay: -800,
+ fill: 'forwards' });
+ anim.finish();
+ assert_equals(anim.effect.getComputedTiming().currentIteration, 1);
+ assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
+}, 'Active time in after phase with forwards fill and negative end delay'
+ + ' is the active duration + end delay');
+
+test(function(t) {
+ var anim = createDiv(t).animate(null, { duration: 1000,
+ iterations: 2.3,
+ delay: 500,
+ endDelay: -3000,
+ fill: 'forwards' });
+ anim.finish();
+ assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
+ assert_equals(anim.effect.getComputedTiming().progress, 0);
+}, 'Active time in after phase with forwards fill and negative end delay'
+ + ' greater in magnitude than the active duration is zero');
+
+test(function(t) {
+ var anim = createDiv(t).animate(null, { duration: 1000,
+ iterations: 2.3,
+ delay: 500,
+ endDelay: -4000,
+ fill: 'forwards' });
+ anim.finish();
+ assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
+ assert_equals(anim.effect.getComputedTiming().progress, 0);
+}, 'Active time in after phase with forwards fill and negative end delay'
+ + ' greater in magnitude than the sum of the active duration and start delay'
+ + ' is zero');
+
+test(function(t) {
+ var anim = createDiv(t).animate(null, { duration: 1000,
+ iterations: 2.3,
+ delay: 500,
+ fill: 'both' });
+ anim.finish();
+ assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
+ assert_times_equal(anim.effect.getComputedTiming().progress, 0.3);
+}, 'Active time in after phase with \'both\' fill is the active duration');
+
+test(function(t) {
+ // Create an effect with a non-zero duration so we ensure we're not just
+ // testing the after-phase behavior.
+ var effect = new KeyframeEffect(null, null, 1);
+ assert_equals(effect.getComputedTiming().progress, null);
+}, 'Active time when the local time is unresolved, is unresolved');
</script>
</body>