Bug 1415448 - Drop getComputedStyle.html test in interfaces/AnimationEffectTiming; r=hiro
authorBrian Birtles <birtles@gmail.com>
Fri, 10 Nov 2017 17:07:59 +0900
changeset 444422 b0cbe23c132e4c4f3a3ad84c26b3f5dfa0816be3
parent 444421 a42ad6fd6afa339127545148a1c82df7c358bc71
child 444423 edba74152c40e45cd641570b2ffe0d0d126d3db0
push id1618
push userCallek@gmail.com
push dateThu, 11 Jan 2018 17:45:48 +0000
treeherdermozilla-release@882ca853e05a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1415448
milestone58.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
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>