Bug 1244642 - Web-platform tests for AnimationEffectTiming.direction r?hiro
MozReview-Commit-ID: Cxvizue8c9H
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -28405,16 +28405,20 @@
"path": "web-animations/animation-effect-timing/getComputedStyle.html",
"url": "/web-animations/animation-effect-timing/getComputedStyle.html"
},
{
"path": "web-animations/animation-effect-timing/iterationStart.html",
"url": "/web-animations/animation-effect-timing/iterationStart.html"
},
{
+ "path": "web-animations/animation-effect-timing/direction.html",
+ "url": "/web-animations/animation-effect-timing/direction.html"
+ },
+ {
"path": "web-animations/animation-node/animation-node-after.html",
"url": "/web-animations/animation-node/animation-node-after.html"
},
{
"path": "web-animations/animation-node/animation-node-before.html",
"url": "/web-animations/animation-node/animation-node-before.html"
},
{
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/animation-effect-timing/direction.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>direction tests</title>
+<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-direction">
+<link rel="author" title="Ryo Kato" href="mailto:foobar094@gmail.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../testcommon.js"></script>
+<link rel="stylesheet" href="/resources/testharness.css">
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+test(function(t) {
+ var div = createDiv(t);
+ var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+
+ 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);
+ });
+}, 'set direction to a valid keyword');
+
+</script>
+</body>
--- a/testing/web-platform/tests/web-animations/animation-effect-timing/getComputedStyle.html
+++ b/testing/web-platform/tests/web-animations/animation-effect-timing/getComputedStyle.html
@@ -99,10 +99,66 @@ test(function(t) {
assert_equals(getComputedStyle(div).opacity, '0',
'set currentTime during duration');
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"');
+
</script>
</body>