Bug 1286476 part 1 - Add tests for calculating animation effect phases; r?hiro
This test overlaps somewhat with the tests in
web-animations/timing-model/animation-effects/simple-iteration-progress.html.
However, these tests are more specific to just covering the phase calculation
algorithm. Ultimately the tests in simple-iteration-progress.html should be
broken down into separate tests for the different algorithms being tested.
There is also some redundancy in these tests. For example, instead of writing:
.forEach(function(test) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
we could just define an assert_phases_at_times function that takes the array of
test cases and iterates over them. However, I think writing the test like this
makes it easier to read since it requires less imagination about what
assert_phases_at_times might be doing.
One concern is that this test requires the setter for AnimationEffectTiming.fill
to be implemented. We could rewrite this to create a new animation with the
appropriate fill mode each time but I think this is probably ok.
MozReview-Commit-ID: 82uvBB8bizI
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -12637,24 +12637,24 @@
"path": "XMLHttpRequest/data-uri.htm",
"url": "/XMLHttpRequest/data-uri.htm"
},
{
"path": "XMLHttpRequest/event-abort.htm",
"url": "/XMLHttpRequest/event-abort.htm"
},
{
+ "path": "XMLHttpRequest/event-error-order.sub.html",
+ "url": "/XMLHttpRequest/event-error-order.sub.html"
+ },
+ {
"path": "XMLHttpRequest/event-error.sub.html",
"url": "/XMLHttpRequest/event-error.sub.html"
},
{
- "path": "XMLHttpRequest/event-error-order.sub.html",
- "url": "/XMLHttpRequest/event-error-order.sub.html"
- },
- {
"path": "XMLHttpRequest/event-load.htm",
"url": "/XMLHttpRequest/event-load.htm"
},
{
"path": "XMLHttpRequest/event-loadend.htm",
"url": "/XMLHttpRequest/event-loadend.htm"
},
{
@@ -12669,24 +12669,24 @@
"path": "XMLHttpRequest/event-readystate-sync-open.htm",
"url": "/XMLHttpRequest/event-readystate-sync-open.htm"
},
{
"path": "XMLHttpRequest/event-readystatechange-loaded.htm",
"url": "/XMLHttpRequest/event-readystatechange-loaded.htm"
},
{
+ "path": "XMLHttpRequest/event-timeout-order.htm",
+ "url": "/XMLHttpRequest/event-timeout-order.htm"
+ },
+ {
"path": "XMLHttpRequest/event-timeout.htm",
"url": "/XMLHttpRequest/event-timeout.htm"
},
{
- "path": "XMLHttpRequest/event-timeout-order.htm",
- "url": "/XMLHttpRequest/event-timeout-order.htm"
- },
- {
"path": "XMLHttpRequest/event-upload-progress-crossorigin.sub.htm",
"url": "/XMLHttpRequest/event-upload-progress-crossorigin.sub.htm"
},
{
"path": "XMLHttpRequest/event-upload-progress.htm",
"url": "/XMLHttpRequest/event-upload-progress.htm"
},
{
@@ -15337,18 +15337,18 @@
"path": "domparsing/createContextualFragment.html",
"url": "/domparsing/createContextualFragment.html"
},
{
"path": "domparsing/innerhtml-01.xhtml",
"url": "/domparsing/innerhtml-01.xhtml"
},
{
- "path": "domparsing/innerhtml-02.html",
- "url": "/domparsing/innerhtml-02.html"
+ "path": "domparsing/innerhtml-02.html",
+ "url": "/domparsing/innerhtml-02.html"
},
{
"path": "domparsing/innerhtml-03.xhtml",
"url": "/domparsing/innerhtml-03.xhtml"
},
{
"path": "domparsing/innerhtml-04.html",
"url": "/domparsing/innerhtml-04.html"
@@ -37644,16 +37644,22 @@
"url": "/domparsing/style_attribute_html.html"
}
],
"html/semantics/forms/the-form-element/form-submission-sandbox.html": [
{
"path": "html/semantics/forms/the-form-element/form-submission-sandbox.html",
"url": "/html/semantics/forms/the-form-element/form-submission-sandbox.html"
}
+ ],
+ "web-animations/timing-model/animation-effects/phases-and-states.html": [
+ {
+ "path": "web-animations/timing-model/animation-effects/phases-and-states.html",
+ "url": "/web-animations/timing-model/animation-effects/phases-and-states.html"
+ }
]
}
},
"reftest_nodes": {
"html/semantics/grouping-content/the-ol-element/reversed-1a.html": [
{
"path": "html/semantics/grouping-content/the-ol-element/reversed-1a.html",
"references": [
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/meta/web-animations/timing-model/animation-effects/phases-and-states.html.ini
@@ -0,0 +1,5 @@
+[phases-and-states.html]
+ type: testharness
+ [Phase calculation for a simple animation effect with negative playback rate]
+ expected: FAIL
+ bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1286476
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/timing-model/animation-effects/phases-and-states.html
@@ -0,0 +1,148 @@
+<!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: 'active' },
+ { 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: 1, endDelay: -0.5 });
+
+ [ { currentTime: -1, phase: 'before' },
+ { currentTime: 0, phase: 'active' },
+ { currentTime: 0.4, phase: 'active' },
+ { currentTime: 0.5, 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: -3, phase: 'before' },
+ { currentTime: -2, phase: 'after' },
+ { 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'
+ + ' 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>