Bug 1244642 - Web-platform tests for AnimationEffectTiming.direction r=hiro
authorRyo Kato <foobar094@gmail.com>
Sat, 26 Mar 2016 16:47:40 +0900
changeset 290697 e8e94146b659519531e03387e470d0ed788628ad
parent 290696 b51b8d9f8337666436cabe9f3a70727d89904464
child 290698 b7d97d1311d71903b6421c7083a3adbc1dabb511
push id19656
push usergwagner@mozilla.com
push dateMon, 04 Apr 2016 13:43:23 +0000
treeherderb2g-inbound@e99061fde28a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1244642
milestone48.0a1
Bug 1244642 - Web-platform tests for AnimationEffectTiming.direction r=hiro MozReview-Commit-ID: Cxvizue8c9H
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/web-animations/animation-effect-timing/direction.html
testing/web-platform/tests/web-animations/animation-effect-timing/getComputedStyle.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -28409,16 +28409,20 @@
         "path": "web-animations/animation-effect-timing/iterations.html",
         "url": "/web-animations/animation-effect-timing/iterations.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
@@ -112,10 +112,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>