summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/web-animations/timing-model/animation-effects
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/web-animations/timing-model/animation-effects')
-rw-r--r--testing/web-platform/tests/web-animations/timing-model/animation-effects/active-time.html142
-rw-r--r--testing/web-platform/tests/web-animations/timing-model/animation-effects/current-iteration.html584
-rw-r--r--testing/web-platform/tests/web-animations/timing-model/animation-effects/phases-and-states.html191
-rw-r--r--testing/web-platform/tests/web-animations/timing-model/animation-effects/simple-iteration-progress.html575
4 files changed, 1492 insertions, 0 deletions
diff --git 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
new file mode 100644
index 000000000..bdaad08ed
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/timing-model/animation-effects/active-time.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Active time tests</title>
+<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';
+
+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);
+}, '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: -2500,
+ 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>
diff --git a/testing/web-platform/tests/web-animations/timing-model/animation-effects/current-iteration.html b/testing/web-platform/tests/web-animations/timing-model/animation-effects/current-iteration.html
new file mode 100644
index 000000000..d24908628
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/timing-model/animation-effects/current-iteration.html
@@ -0,0 +1,584 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Current iteration tests</title>
+<link rel="help" href="https://w3c.github.io/web-animations/#current-iteration">
+<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 runTests(tests, description) {
+ tests.forEach(function(currentTest) {
+ var testParams = '';
+ for (var attr in currentTest.input) {
+ testParams += ' ' + attr + ':' + currentTest.input[attr];
+ }
+ test(function(t) {
+ var div = createDiv(t);
+ var anim = div.animate({ opacity: [ 0, 1 ] }, currentTest.input);
+ assert_equals(anim.effect.getComputedTiming().currentIteration,
+ currentTest.before);
+ anim.currentTime = currentTest.input.delay || 0;
+ assert_equals(anim.effect.getComputedTiming().currentIteration,
+ currentTest.active);
+ if (typeof currentTest.after !== 'undefined') {
+ anim.finish();
+ assert_equals(anim.effect.getComputedTiming().currentIteration,
+ currentTest.after);
+ }
+ }, description + ':' + testParams);
+ });
+}
+
+async_test(function(t) {
+ var div = createDiv(t);
+ var anim = div.animate({ opacity: [ 0, 1 ] }, { delay: 1 });
+ assert_equals(anim.effect.getComputedTiming().currentIteration, null);
+ anim.finished.then(t.step_func(function() {
+ assert_equals(anim.effect.getComputedTiming().currentIteration, null);
+ t.done();
+ }));
+}, 'Test currentIteration during before and after phase when fill is none');
+
+
+// --------------------------------------------------------------------
+//
+// Zero iteration duration tests
+//
+// --------------------------------------------------------------------
+
+runTests([
+ {
+ input: { iterations: 0,
+ iterationStart: 0,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 0,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 0,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 2.5,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 2,
+ active: 2,
+ after: 2
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 2.5,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 2,
+ active: 2,
+ after: 2
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 2.5,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 2,
+ active: 2,
+ after: 2
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 3,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 3,
+ active: 3,
+ after: 3
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 3,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 3,
+ active: 3,
+ after: 3
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 3,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 3,
+ active: 3,
+ after: 3
+ }
+], 'Test zero iterations');
+
+
+// --------------------------------------------------------------------
+//
+// Tests where the iteration count is an integer
+//
+// --------------------------------------------------------------------
+
+runTests([
+ {
+ input: { iterations: 3,
+ iterationStart: 0,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 2,
+ after: 2
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 0,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0,
+ after: 2
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 0,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 2.5,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 2,
+ active: 5,
+ after: 5
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 2.5,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 2,
+ active: 2,
+ after: 5
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 2.5,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 2,
+ active: 2
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 3,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 3,
+ active: 5,
+ after: 5
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 3,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 3,
+ active: 3,
+ after: 5
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 3,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 3,
+ active: 3
+ }
+], 'Test integer iterations');
+
+
+// --------------------------------------------------------------------
+//
+// Tests where the iteration count is a fraction
+//
+// --------------------------------------------------------------------
+
+runTests([
+ {
+ input: { iterations: 3.5,
+ iterationStart: 0,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 3,
+ after: 3
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 0,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0,
+ after: 3
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 0,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 2.5,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 2,
+ active: 5,
+ after: 5
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 2.5,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 2,
+ active: 2,
+ after: 5
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 2.5,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 2,
+ active: 2
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 3,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 3,
+ active: 6,
+ after: 6
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 3,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 3,
+ active: 3,
+ after: 6
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 3,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 3,
+ active: 3
+ }
+], 'Test fractional iterations');
+
+
+// --------------------------------------------------------------------
+//
+// Tests where the iteration count is Infinity
+//
+// --------------------------------------------------------------------
+
+runTests([
+ {
+ input: { iterations: Infinity,
+ iterationStart: 0,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: Infinity,
+ after: Infinity
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 0,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 0,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 2.5,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 2,
+ active: Infinity,
+ after: Infinity
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 2.5,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 2,
+ active: 2
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 2.5,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 2,
+ active: 2
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 3,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 3,
+ active: Infinity,
+ after: Infinity
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 3,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 3,
+ active: 3
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 3,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 3,
+ active: 3
+ }
+], 'Test infinity iterations');
+
+
+// --------------------------------------------------------------------
+//
+// End delay tests
+//
+// --------------------------------------------------------------------
+
+runTests([
+ {
+ input: { duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: 50 },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -50 },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -100 },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -200 },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { iterationStart: 0.5,
+ duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: 50 },
+ before: 0,
+ active: 0,
+ after: 1
+ },
+
+ {
+ input: { iterationStart: 0.5,
+ duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -50 },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { iterationStart: 0.5,
+ duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -100 },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { iterations: 2,
+ duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -100 },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { iterations: 1,
+ iterationStart: 2,
+ duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -50 },
+ before: 2,
+ active: 2,
+ after: 2
+ },
+
+ {
+ input: { iterations: 1,
+ iterationStart: 2,
+ duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -100 },
+ before: 2,
+ active: 2,
+ after: 2
+ },
+], 'Test end delay');
+
+</script>
+</body>
diff --git a/testing/web-platform/tests/web-animations/timing-model/animation-effects/phases-and-states.html b/testing/web-platform/tests/web-animations/timing-model/animation-effects/phases-and-states.html
new file mode 100644
index 000000000..5dc32066f
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/timing-model/animation-effects/phases-and-states.html
@@ -0,0 +1,191 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Tests for phases and states</title>
+<link rel="help" href="https://w3c.github.io/web-animations/#animation-effect-phases-and-states">
+<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';
+
+// --------------------------------------------------------------------
+//
+// Phases
+//
+// --------------------------------------------------------------------
+
+function assert_phase_at_time(animation, phase, currentTime) {
+ animation.currentTime = currentTime;
+
+ if (phase === 'active') {
+ // If the fill mode is 'none', then progress will only be non-null if we
+ // are in the active phase.
+ animation.effect.timing.fill = 'none';
+ assert_not_equals(animation.effect.getComputedTiming().progress, null,
+ 'Animation effect is in active phase when current time'
+ + ' is ' + currentTime + 'ms');
+ } else {
+ // The easiest way to distinguish between the 'before' phase and the 'after'
+ // phase is to toggle the fill mode. For example, if the progress is null
+ // will the fill node is 'none' but non-null when the fill mode is
+ // 'backwards' then we are in the before phase.
+ animation.effect.timing.fill = 'none';
+ assert_equals(animation.effect.getComputedTiming().progress, null,
+ 'Animation effect is in ' + phase + ' phase when current time'
+ + ' is ' + currentTime + 'ms'
+ + ' (progress is null with \'none\' fill mode)');
+
+ animation.effect.timing.fill = phase === 'before'
+ ? 'backwards'
+ : 'forwards';
+ assert_not_equals(animation.effect.getComputedTiming().progress, null,
+ 'Animation effect is in ' + phase + ' phase when current'
+ + ' time is ' + currentTime + 'ms'
+ + ' (progress is non-null with appropriate fill mode)');
+ }
+}
+
+test(function(t) {
+ var animation = createDiv(t).animate(null, 1);
+
+ [ { currentTime: -1, phase: 'before' },
+ { currentTime: 0, phase: 'active' },
+ { currentTime: 1, phase: 'after' } ]
+ .forEach(function(test) {
+ assert_phase_at_time(animation, test.phase, test.currentTime);
+ });
+}, 'Phase calculation for a simple animation effect');
+
+test(function(t) {
+ var animation = createDiv(t).animate(null, { duration: 1, delay: 1 });
+
+ [ { currentTime: 0, phase: 'before' },
+ { currentTime: 1, phase: 'active' },
+ { currentTime: 2, phase: 'after' } ]
+ .forEach(function(test) {
+ assert_phase_at_time(animation, test.phase, test.currentTime);
+ });
+}, 'Phase calculation for an animation effect with a positive start delay');
+
+test(function(t) {
+ var animation = createDiv(t).animate(null, { duration: 1, delay: -1 });
+
+ [ { currentTime: -2, phase: 'before' },
+ { currentTime: -1, phase: 'before' },
+ { currentTime: 0, phase: 'after' } ]
+ .forEach(function(test) {
+ assert_phase_at_time(animation, test.phase, test.currentTime);
+ });
+}, 'Phase calculation for an animation effect with a negative start delay');
+
+test(function(t) {
+ var animation = createDiv(t).animate(null, { duration: 1, endDelay: 1 });
+
+ [ { currentTime: -1, phase: 'before' },
+ { currentTime: 0, phase: 'active' },
+ { currentTime: 1, phase: 'after' },
+ { currentTime: 2, phase: 'after' } ]
+ .forEach(function(test) {
+ assert_phase_at_time(animation, test.phase, test.currentTime);
+ });
+}, 'Phase calculation for an animation effect with a positive end delay');
+
+test(function(t) {
+ var animation = createDiv(t).animate(null, { duration: 2, endDelay: -1 });
+
+ [ { currentTime: -1, phase: 'before' },
+ { currentTime: 0, phase: 'active' },
+ { currentTime: 0.9, phase: 'active' },
+ { currentTime: 1, phase: 'after' } ]
+ .forEach(function(test) {
+ assert_phase_at_time(animation, test.phase, test.currentTime);
+ });
+}, 'Phase calculation for an animation effect with a negative end delay lesser'
+ + ' in magnitude than the active duration');
+
+test(function(t) {
+ var animation = createDiv(t).animate(null, { duration: 1, endDelay: -1 });
+
+ [ { currentTime: -1, phase: 'before' },
+ { currentTime: 0, phase: 'after' },
+ { currentTime: 1, phase: 'after' } ]
+ .forEach(function(test) {
+ assert_phase_at_time(animation, test.phase, test.currentTime);
+ });
+}, 'Phase calculation for an animation effect with a negative end delay equal'
+ + ' in magnitude to the active duration');
+
+test(function(t) {
+ var animation = createDiv(t).animate(null, { duration: 1, endDelay: -2 });
+
+ [ { currentTime: -2, phase: 'before' },
+ { currentTime: -1, phase: 'before' },
+ { currentTime: 0, phase: 'after' } ]
+ .forEach(function(test) {
+ assert_phase_at_time(animation, test.phase, test.currentTime);
+ });
+}, 'Phase calculation for an animation effect with a negative end delay'
+ + ' greater in magnitude than the active duration');
+
+test(function(t) {
+ var animation = createDiv(t).animate(null, { duration: 2,
+ delay: 1,
+ endDelay: -1 });
+
+ [ { currentTime: 0, phase: 'before' },
+ { currentTime: 1, phase: 'active' },
+ { currentTime: 2, phase: 'after' } ]
+ .forEach(function(test) {
+ assert_phase_at_time(animation, test.phase, test.currentTime);
+ });
+}, 'Phase calculation for an animation effect with a positive start delay'
+ + ' and a negative end delay lesser in magnitude than the active duration');
+
+test(function(t) {
+ var animation = createDiv(t).animate(null, { duration: 1,
+ delay: -1,
+ endDelay: -1 });
+
+ [ { currentTime: -2, phase: 'before' },
+ { currentTime: -1, phase: 'before' },
+ { currentTime: 0, phase: 'after' } ]
+ .forEach(function(test) {
+ assert_phase_at_time(animation, test.phase, test.currentTime);
+ });
+}, 'Phase calculation for an animation effect with a negative start delay'
+ + ' and a negative end delay equal in magnitude to the active duration');
+
+test(function(t) {
+ var animation = createDiv(t).animate(null, { duration: 1,
+ delay: -1,
+ endDelay: -2 });
+
+ [ { currentTime: -3, phase: 'before' },
+ { currentTime: -2, phase: 'before' },
+ { currentTime: -1, phase: 'before' },
+ { currentTime: 0, phase: 'after' } ]
+ .forEach(function(test) {
+ assert_phase_at_time(animation, test.phase, test.currentTime);
+ });
+}, 'Phase calculation for an animation effect with a negative start delay'
+ + ' and a negative end delay equal greater in magnitude than the active'
+ + ' duration');
+
+test(function(t) {
+ var animation = createDiv(t).animate(null, 1);
+ animation.playbackRate = -1;
+
+ [ { currentTime: -1, phase: 'before' },
+ { currentTime: 0, phase: 'before' },
+ { currentTime: 1, phase: 'active' },
+ { currentTime: 2, phase: 'after' } ]
+ .forEach(function(test) {
+ assert_phase_at_time(animation, test.phase, test.currentTime);
+ });
+}, 'Phase calculation for a simple animation effect with negative playback'
+ + ' rate');
+
+</script>
+</body>
diff --git a/testing/web-platform/tests/web-animations/timing-model/animation-effects/simple-iteration-progress.html b/testing/web-platform/tests/web-animations/timing-model/animation-effects/simple-iteration-progress.html
new file mode 100644
index 000000000..f6a3a51bd
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/timing-model/animation-effects/simple-iteration-progress.html
@@ -0,0 +1,575 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Simple iteration progress tests</title>
+<link rel="help"
+ href="https://w3c.github.io/web-animations/#simple-iteration-progress">
+<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 runTests(tests, description) {
+ tests.forEach(function(currentTest) {
+ var testParams = '';
+ for (var attr in currentTest.input) {
+ testParams += ' ' + attr + ':' + currentTest.input[attr];
+ }
+ test(function(t) {
+ var div = createDiv(t);
+ var anim = div.animate({ opacity: [ 0, 1 ] }, currentTest.input);
+ assert_equals(anim.effect.getComputedTiming().progress,
+ currentTest.before);
+ anim.currentTime = currentTest.input.delay || 0;
+ assert_equals(anim.effect.getComputedTiming().progress,
+ currentTest.active);
+ if (typeof currentTest.after !== 'undefined') {
+ anim.finish();
+ assert_equals(anim.effect.getComputedTiming().progress,
+ currentTest.after);
+ }
+ }, description + ':' + testParams);
+ });
+}
+
+
+// --------------------------------------------------------------------
+//
+// Zero iteration duration tests
+//
+// --------------------------------------------------------------------
+
+runTests([
+ {
+ input: { iterations: 0,
+ iterationStart: 0,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 0,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 0,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 2.5,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0.5,
+ active: 0.5,
+ after: 0.5
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 2.5,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0.5,
+ active: 0.5,
+ after: 0.5
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 2.5,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0.5,
+ active: 0.5,
+ after: 0.5
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 3,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 3,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { iterations: 0,
+ iterationStart: 3,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0,
+ after: 0
+ }
+], 'Test zero iterations');
+
+
+// --------------------------------------------------------------------
+//
+// Tests where the iteration count is an integer
+//
+// --------------------------------------------------------------------
+
+runTests([
+ {
+ input: { iterations: 3,
+ iterationStart: 0,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 1,
+ after: 1
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 0,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0,
+ after: 1
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 0,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 2.5,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0.5,
+ active: 0.5,
+ after: 0.5
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 2.5,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0.5,
+ active: 0.5,
+ after: 0.5
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 2.5,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0.5,
+ active: 0.5
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 3,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 1,
+ after: 1
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 3,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0,
+ after: 1
+ },
+
+ {
+ input: { iterations: 3,
+ iterationStart: 3,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0
+ }
+], 'Test integer iterations');
+
+
+// --------------------------------------------------------------------
+//
+// Tests where the iteration count is a fraction
+//
+// --------------------------------------------------------------------
+
+runTests([
+ {
+ input: { iterations: 3.5,
+ iterationStart: 0,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0.5,
+ after: 0.5
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 0,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0,
+ after: 0.5
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 0,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 2.5,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0.5,
+ active: 1,
+ after: 1
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 2.5,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0.5,
+ active: 0.5,
+ after: 1
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 2.5,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0.5,
+ active: 0.5
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 3,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0.5,
+ after: 0.5
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 3,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0,
+ after: 0.5
+ },
+
+ {
+ input: { iterations: 3.5,
+ iterationStart: 3,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0
+ }
+], 'Test fractional iterations');
+
+
+// --------------------------------------------------------------------
+//
+// Tests where the iteration count is Infinity
+//
+// --------------------------------------------------------------------
+
+runTests([
+ {
+ input: { iterations: Infinity,
+ iterationStart: 0,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 1,
+ after: 1
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 0,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 0,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 2.5,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0.5,
+ active: 0.5,
+ after: 0.5
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 2.5,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0.5,
+ active: 0.5
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 2.5,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0.5,
+ active: 0.5
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 3,
+ duration: 0,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 1,
+ after: 1
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 3,
+ duration: 100,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0
+ },
+
+ {
+ input: { iterations: Infinity,
+ iterationStart: 3,
+ duration: Infinity,
+ delay: 1,
+ fill: 'both' },
+ before: 0,
+ active: 0
+ }
+], 'Test infinity iterations');
+
+
+// --------------------------------------------------------------------
+//
+// End delay tests
+//
+// --------------------------------------------------------------------
+
+runTests([
+ {
+ input: { duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: 50 },
+ before: 0,
+ active: 0,
+ after: 1
+ },
+
+ {
+ input: { duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -50 },
+ before: 0,
+ active: 0,
+ after: 0.5
+ },
+
+ {
+ input: { duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -100 },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -200 },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+
+ {
+ input: { iterationStart: 0.5,
+ duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: 50 },
+ before: 0.5,
+ active: 0.5,
+ after: 0.5
+ },
+
+ {
+ input: { iterationStart: 0.5,
+ duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -50 },
+ before: 0.5,
+ active: 0.5,
+ after: 1
+ },
+
+ {
+ input: { iterationStart: 0.5,
+ duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -100 },
+ before: 0.5,
+ active: 0.5,
+ after: 0.5
+ },
+
+ {
+ input: { iterations: 2,
+ duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -100 },
+ before: 0,
+ active: 0,
+ after: 1
+ },
+
+ {
+ input: { iterations: 1,
+ iterationStart: 2,
+ duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -50 },
+ before: 0,
+ active: 0,
+ after: 0.5
+ },
+
+ {
+ input: { iterations: 1,
+ iterationStart: 2,
+ duration: 100,
+ delay: 1,
+ fill: 'both',
+ endDelay: -100 },
+ before: 0,
+ active: 0,
+ after: 0
+ },
+], 'Test end delay');
+
+</script>
+</body>