1 files changed, 90 insertions, 14 deletions
diff --git a/tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/direction.html b/tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/direction.html
index 95718120245..7bc315da967 100644
--- a/tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/direction.html
+++ b/tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/direction.html
@@ -1,8 +1,7 @@
 <!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">
+<title>AnimationEffectTiming.direction</title>
+<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffecttiming-direction">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
@@ -11,22 +10,99 @@
 <script>
 'use strict';
 
-test(function(t) {
-  var anim = createDiv(t).animate(null);
+test(t => {
+  const anim = createDiv(t).animate(null);
   assert_equals(anim.effect.timing.direction, 'normal');
-}, 'Test default value');
+}, 'Has the default value \'normal\'');
 
-test(function(t) {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+test(t => {
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
 
-  var directions = ['normal', 'reverse', 'alternate', 'alternate-reverse'];
-  directions.forEach(function(direction) {
+  const directions = ['normal', 'reverse', 'alternate', 'alternate-reverse'];
+  for (const direction of directions) {
     anim.effect.timing.direction = direction;
     assert_equals(anim.effect.timing.direction, direction,
-                  'set direction to ' + direction);
-  });
-}, 'set direction to a valid keyword');
+                  `set direction to ${direction}`);
+  }
+}, 'Can be set to each of the possible keywords');
+
+test(t => {
+  const div = createDiv(t);
+  const 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(t => {
+  const div = createDiv(t);
+  const 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(t => {
+  const div = createDiv(t);
+  const 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(t => {
+  const div = createDiv(t);
+  const 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(t => {
+  const div = createDiv(t);
+  const 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>