Bug 1415448 - Drop getComputedStyle.html test in interfaces/AnimationEffectTiming; r?hiro draft
authorBrian Birtles <birtles@gmail.com>
Fri, 10 Nov 2017 16:54:24 +0900
changeset 696136 c60a0e20c1c4a90aca1e67315ba3bb27dabfc0ff
parent 696135 e51c3af0bb70ac63d7b626f020660959d96b412f
child 696137 9d5d19938c3d39bdeefedddc5e6f53339d710987
push id88646
push userbbirtles@mozilla.com
push dateFri, 10 Nov 2017 08:01:07 +0000
reviewershiro
bugs1415448
milestone58.0a1
Bug 1415448 - Drop getComputedStyle.html test in interfaces/AnimationEffectTiming; r?hiro This test feels out of place -- there's no getComputedStyle method on AnimationEffectTiming and we generally test timing properties by calling getComputedTiming. This patch moves most of the tests in this file to the corresponding members whose liveness they check while updating them to use getComputedTiming instead. The remaining tests that seek the currentTime and check the style with various values of endDelay should be covered by timing-model/animation-effects/simple-iteration-progress.html MozReview-Commit-ID: DDImW5A6mRI
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/direction.html
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/duration.html
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/getComputedStyle.html
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterations.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -354752,22 +354752,16 @@
     ]
    ],
    "web-animations/interfaces/AnimationEffectTiming/getAnimations.html": [
     [
      "/web-animations/interfaces/AnimationEffectTiming/getAnimations.html",
      {}
     ]
    ],
-   "web-animations/interfaces/AnimationEffectTiming/getComputedStyle.html": [
-    [
-     "/web-animations/interfaces/AnimationEffectTiming/getComputedStyle.html",
-     {}
-    ]
-   ],
    "web-animations/interfaces/AnimationEffectTiming/idlharness.html": [
     [
      "/web-animations/interfaces/AnimationEffectTiming/idlharness.html",
      {}
     ]
    ],
    "web-animations/interfaces/AnimationEffectTiming/iterationStart.html": [
     [
@@ -585892,21 +585886,21 @@
    "177a2f3e9dd366bfe4661c160cc23b73c27dec20",
    "testharness"
   ],
   "web-animations/interfaces/AnimationEffectTiming/delay.html": [
    "e2b0cf3709d9b886f058a13d2a8fa467ab7fd1b4",
    "testharness"
   ],
   "web-animations/interfaces/AnimationEffectTiming/direction.html": [
-   "ae9a1a3b2a5ae8dde6c0d2a7f2acad0fa93d6d5e",
+   "99c67afe9b67b8ad2277ba788acecd2b4f53f7c7",
    "testharness"
   ],
   "web-animations/interfaces/AnimationEffectTiming/duration.html": [
-   "025375526e36809bad4766de22f0ab24e4378a21",
+   "68b2a5f5d382c50c93d05b7692b41b31dc891d3a",
    "testharness"
   ],
   "web-animations/interfaces/AnimationEffectTiming/easing.html": [
    "26bc80cba1202beeb4d19115fcea0838a104ae9a",
    "testharness"
   ],
   "web-animations/interfaces/AnimationEffectTiming/endDelay.html": [
    "0c4e2cfee8ecb4fb7879df6c85ba0ba38310662d",
@@ -585915,30 +585909,26 @@
   "web-animations/interfaces/AnimationEffectTiming/fill.html": [
    "c0237dd37bd3e56e32bd3e027c5f9357081cfef0",
    "testharness"
   ],
   "web-animations/interfaces/AnimationEffectTiming/getAnimations.html": [
    "e0ad6da869693c4e4b57aa2e5e3cb4ec557c7bc8",
    "testharness"
   ],
-  "web-animations/interfaces/AnimationEffectTiming/getComputedStyle.html": [
-   "201bac6d13f4f8ed556fe63df214d6d565ba94b7",
-   "testharness"
-  ],
   "web-animations/interfaces/AnimationEffectTiming/idlharness.html": [
    "a4e72d3ebf93a0bb6934f887c3da250a2ab67b63",
    "testharness"
   ],
   "web-animations/interfaces/AnimationEffectTiming/iterationStart.html": [
    "c4d40ffdd9080732f202d9067f901cc065c470de",
    "testharness"
   ],
   "web-animations/interfaces/AnimationEffectTiming/iterations.html": [
-   "e906c84dc4774846387eb9ea89d6707cee84dccb",
+   "739a1f8f83d3336af9e58d4b2914302a3907e2db",
    "testharness"
   ],
   "web-animations/interfaces/AnimationPlaybackEvent/constructor.html": [
    "1bc5f4dda96078a08a4b06ab0f6bf7b10e0acce3",
    "testharness"
   ],
   "web-animations/interfaces/AnimationPlaybackEvent/idlharness.html": [
    "37bd201a374913d0cd580b89b07688b5b655776d",
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/direction.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/direction.html
@@ -22,10 +22,87 @@ test(function(t) {
   var directions = ['normal', 'reverse', 'alternate', 'alternate-reverse'];
   directions.forEach(function(direction) {
     anim.effect.timing.direction = direction;
     assert_equals(anim.effect.timing.direction, direction,
                   'set direction to ' + direction);
   });
 }, 'Can be set to each of the possible keywords');
 
+test(function(t) {
+  var div = createDiv(t);
+  var anim = div.animate(null, { duration: 10000, direction: 'normal' });
+  anim.currentTime = 7000;
+  assert_times_equal(anim.effect.getComputedTiming().progress, 0.7,
+                     'progress before updating direction');
+
+  anim.effect.timing.direction = 'reverse';
+
+  assert_times_equal(anim.effect.getComputedTiming().progress, 0.3,
+                     'progress after updating direction');
+}, 'Can be changed from \'normal\' to \'reverse\' while in progress');
+
+test(function(t) {
+  var div = createDiv(t);
+  var anim = div.animate({ opacity: [ 0, 1 ] },
+                         { duration: 10000,
+                           direction: 'normal' });
+  assert_equals(anim.effect.getComputedTiming().progress, 0,
+                'progress before updating direction');
+
+  anim.effect.timing.direction = 'reverse';
+
+  assert_equals(anim.effect.getComputedTiming().progress, 1,
+                'progress after updating direction');
+}, 'Can be changed from \'normal\' to \'reverse\' while at start of active'
+   + ' interval');
+
+test(function(t) {
+  var div = createDiv(t);
+  var anim = div.animate({ opacity: [ 0, 1 ] },
+                         { fill: 'backwards',
+                           duration: 10000,
+                           delay: 10000,
+                           direction: 'normal' });
+  assert_equals(anim.effect.getComputedTiming().progress, 0,
+                'progress before updating direction');
+
+  anim.effect.timing.direction = 'reverse';
+
+  assert_equals(anim.effect.getComputedTiming().progress, 1,
+                'progress after updating direction');
+}, 'Can be changed from \'normal\' to \'reverse\' while filling backwards');
+
+test(function(t) {
+  var div = createDiv(t);
+  var anim = div.animate({ opacity: [ 0, 1 ] },
+                         { iterations: 2,
+                           duration: 10000,
+                           direction: 'normal' });
+  anim.currentTime = 17000;
+  assert_times_equal(anim.effect.getComputedTiming().progress, 0.7,
+                     'progress before updating direction');
+
+  anim.effect.timing.direction = 'alternate';
+
+  assert_times_equal(anim.effect.getComputedTiming().progress, 0.3,
+                     'progress after updating direction');
+}, 'Can be changed from \'normal\' to \'alternate\' while in progress');
+
+test(function(t) {
+  var div = createDiv(t);
+  var anim = div.animate({ opacity: [ 0, 1 ] },
+                         { iterations: 2,
+                           duration: 10000,
+                           direction: 'alternate' });
+  anim.currentTime = 17000;
+  assert_times_equal(anim.effect.getComputedTiming().progress, 0.3,
+                     'progress before updating direction');
+
+  anim.effect.timing.direction = 'alternate-reverse';
+
+  assert_times_equal(anim.effect.getComputedTiming().progress, 0.7,
+                     'progress after updating direction');
+}, 'Can be changed from \'alternate\' to \'alternate-reverse\' while in'
+   + ' progress');
+
 </script>
 </body>
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/duration.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/duration.html
@@ -164,10 +164,27 @@ promise_test(function(t) {
                        'startTime should be unaffected by changing effect ' +
                        'duration');
     assert_times_equal(anim.currentTime, originalCurrentTime,
                        'currentTime should be unaffected by changing effect ' +
                        'duration');
   });
 }, 'Extending an effect\'s duration does not change the start or current time');
 
+test(function(t) {
+  var div = createDiv(t);
+  var anim = div.animate(null, { duration: 100000, fill: 'both' });
+  anim.finish();
+  assert_equals(anim.effect.getComputedTiming().progress, 1,
+                'progress when animation is finished');
+  anim.effect.timing.duration *= 2;
+  assert_times_equal(anim.effect.getComputedTiming().progress, 0.5,
+                     'progress after doubling the duration');
+  anim.effect.timing.duration = 0;
+  assert_equals(anim.effect.getComputedTiming().progress, 1,
+                'progress after setting duration to zero');
+  anim.effect.timing.duration = 'auto';
+  assert_equals(anim.effect.getComputedTiming().progress, 1,
+                'progress after setting duration to \'auto\'');
+}, 'Can be updated while the animation is in progress');
+
 </script>
 </body>
deleted file mode 100644
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/getComputedStyle.html
+++ /dev/null
@@ -1,171 +0,0 @@
-<!DOCTYPE html>
-<meta charset=utf-8>
-<title>getComputedStyle</title>
-<link rel="help" href="http://w3c.github.io/web-animations/#animationeffecttiming">
-<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 div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);
-  anim.finish();
-  assert_equals(getComputedStyle(div).opacity, '1', 'animation finished');
-  anim.effect.timing.duration *= 2;
-  assert_equals(getComputedStyle(div).opacity, '0.5', 'set double duration');
-  anim.effect.timing.duration = 0;
-  assert_equals(getComputedStyle(div).opacity, '1', 'set duration 0');
-  anim.effect.timing.duration = 'auto';
-  assert_equals(getComputedStyle(div).opacity, '1', 'set duration \'auto\'');
-}, 'changed duration immediately updates its computed styles');
-
-test(function(t) {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);
-  anim.finish();
-  assert_equals(getComputedStyle(div).opacity, '1', 'animation finished');
-  anim.effect.timing.iterations = 2;
-  assert_equals(getComputedStyle(div).opacity, '0', 'set 2 iterations');
-  anim.effect.timing.iterations = 0;
-  assert_equals(getComputedStyle(div).opacity, '1', 'set iterations 0');
-  anim.effect.timing.iterations = Infinity;
-  assert_equals(getComputedStyle(div).opacity, '0', 'set iterations Infinity');
-}, 'changed iterations immediately updates its computed styles');
-
-test(function(t) {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 1, 0 ] },
-                         { duration: 10000, endDelay: 1000, fill: 'none' });
-
-  anim.currentTime = 9000;
-  assert_equals(getComputedStyle(div).opacity, '0.1',
-                'set currentTime during duration');
-
-  anim.currentTime = 10900;
-  assert_equals(getComputedStyle(div).opacity, '1',
-                'set currentTime during endDelay');
-
-  anim.currentTime = 11100;
-  assert_equals(getComputedStyle(div).opacity, '1',
-                'set currentTime after endDelay');
-}, 'change currentTime when fill is none and endDelay is positive');
-
-test(function(t) {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 1, 0 ] },
-                         { duration: 10000,
-                           endDelay: 1000,
-                           fill: 'forwards' });
-  anim.currentTime = 5000;
-  assert_equals(getComputedStyle(div).opacity, '0.5',
-                'set currentTime during duration');
-
-  anim.currentTime = 9999;
-  assert_equals(getComputedStyle(div).opacity, '0.0001',
-                'set currentTime just a little before duration');
-
-  anim.currentTime = 10900;
-  assert_equals(getComputedStyle(div).opacity, '0',
-                'set currentTime during endDelay');
-
-  anim.currentTime = 11100;
-  assert_equals(getComputedStyle(div).opacity, '0',
-                'set currentTime after endDelay');
-}, 'change currentTime when fill forwards and endDelay is positive');
-
-test(function(t) {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 1, 0 ] },
-                         { duration: 10000, endDelay: -5000, fill: 'none' });
-
-  anim.currentTime = 1000;
-  assert_equals(getComputedStyle(div).opacity, '0.9',
-                'set currentTime before endTime');
-
-  anim.currentTime = 10000;
-  assert_equals(getComputedStyle(div).opacity, '1',
-                'set currentTime after endTime');
-}, 'change currentTime when fill none and endDelay is negative');
-
-test(function(t) {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 1, 0 ] },
-                         { duration: 10000,
-                           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.5',
-                'set currentTime same as endTime');
-
-  anim.currentTime = 10000;
-  assert_equals(getComputedStyle(div).opacity, '0',
-                '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' });
-
-  anim.currentTime = 7000;
-  anim.effect.timing.direction = 'reverse';
-
-  assert_equals(getComputedStyle(div).opacity, '0.3',
-                'change direction from "normal" to "reverse"');
-}, 'change direction from "normal" to "reverse"');
-
-test(function(t) {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] },
-                         { iterations: 2,
-                           duration: 10000,
-                           direction: 'normal' });
-
-  anim.currentTime = 17000;
-  anim.effect.timing.direction = 'alternate';
-
-  assert_equals(getComputedStyle(div).opacity, '0.3',
-                'change direction from "normal" to "alternate"');
-  }, 'change direction from "normal" to "alternate"');
-
-test(function(t) {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] },
-                         { iterations: 2,
-                           duration: 10000,
-                           direction: 'normal' });
-
-  anim.currentTime = 17000;
-  anim.effect.timing.direction = 'alternate-reverse';
-
-  assert_equals(getComputedStyle(div).opacity, '0.7',
-                'change direction from "normal" to "alternate-reverse"');
-}, 'change direction from "normal" to "alternate-reverse"');
-
-test(function(t) {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] },
-                         { fill: 'backwards',
-                           duration: 10000,
-                           direction: 'normal' });
-
-  // test for a flip of value at the currentTime = 0
-  anim.effect.timing.direction = 'reverse';
-
-  assert_equals(getComputedStyle(div).opacity, '1',
-                'change direction from "normal" to "reverse" ' +
-                'at the starting point');
-}, 'change direction from "normal" to "reverse" when currentTime is 0');
-
-</script>
-</body>
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterations.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterations.html
@@ -52,10 +52,43 @@ test(function(t) {
 test(function(t) {
   var div = createDiv(t);
   var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   assert_throws({ name: 'TypeError' }, function() {
     anim.effect.timing.iterations = NaN;
   });
 }, 'Throws when setting a NaN value');
 
+test(function(t) {
+  var div = createDiv(t);
+  var anim = div.animate(null, { duration: 100000, fill: 'both' });
+
+  anim.finish();
+
+  assert_equals(anim.effect.getComputedTiming().progress, 1,
+                'progress when animation is finished');
+  assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
+                'current iteration when animation is finished');
+
+  anim.effect.timing.iterations = 2;
+
+  assert_times_equal(anim.effect.getComputedTiming().progress, 0,
+                     'progress after adding an iteration');
+  assert_times_equal(anim.effect.getComputedTiming().currentIteration, 1,
+                     'current iteration after adding an iteration');
+
+  anim.effect.timing.iterations = 0;
+
+  assert_equals(anim.effect.getComputedTiming().progress, 0,
+                'progress after setting iterations to zero');
+  assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
+                'current iteration after setting iterations to zero');
+
+  anim.effect.timing.iterations = Infinity;
+
+  assert_equals(anim.effect.getComputedTiming().progress, 0,
+                'progress after setting iterations to Infinity');
+  assert_equals(anim.effect.getComputedTiming().currentIteration, 1,
+                'current iteration after setting iterations to Infinity');
+}, 'Can be updated while the animation is in progress');
+
 </script>
 </body>