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
--- 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>