Bug 1283387 part 1 - Add tests for updated end delay handling draft
authorBrian Birtles <birtles@gmail.com>
Fri, 01 Jul 2016 09:27:28 +0900 (2016-07-01)
changeset 383029 7b2df6c570ec8b815fef39791849b71f2efcf088
parent 382798 82e1f1b9c0559f38a8460e2f2f3044de4c7712d6
child 383030 17c0da67da23ebd9b37e86ba9884fcda613d8577
push id21907
push userbbirtles@mozilla.com
push dateFri, 01 Jul 2016 03:01:34 +0000 (2016-07-01)
bugs1283387
milestone50.0a1
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
layout/style/test/file_animations_effect_timing_enddelay.html
testing/web-platform/meta/web-animations/interfaces/AnimationEffectTiming/getComputedStyle.html.ini
testing/web-platform/meta/web-animations/timing-model/animation-effects/active-time.html.ini
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/getComputedStyle.html
testing/web-platform/tests/web-animations/timing-model/animation-effects/active-time.html
--- 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>