Bug 1415448 - Drop getComputedStyle.html test in interfaces/AnimationEffectTiming; r?hiro draft
authorBrian Birtles <birtles@gmail.com>
Thu, 09 Nov 2017 15:38:03 +0900
changeset 696030 0ee73d0d3af168ef35459d05d5dd23f634360aad
parent 696029 58548ed62b7e8d87f3ff3e4e1954399766f60485
child 696031 901decbd0d09446251756894b79179d0b94d6ba6
push id88616
push userbbirtles@mozilla.com
push dateFri, 10 Nov 2017 04:12:48 +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: 3qyXgJ7qRVy
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": [
     [
@@ -585886,21 +585880,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": [
-   "66281c3eea0d8a82e9cbc572b91f3ca9524eb0cd",
+   "d554fd77a4b103bcdf553c296e69230866218f73",
    "testharness"
   ],
   "web-animations/interfaces/AnimationEffectTiming/easing.html": [
    "26bc80cba1202beeb4d19115fcea0838a104ae9a",
    "testharness"
   ],
   "web-animations/interfaces/AnimationEffectTiming/endDelay.html": [
    "f3504241c25f53e6daa10ec12a5d8cc20d425b2b",
@@ -585909,30 +585903,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": [
    "c6e3e9689f2c04a00567b144a9bfa329d4e522c8",
    "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>