1 files changed, 83 insertions, 0 deletions
diff --git a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html
new file mode 100644
index 000000000..cedd7e68b
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>easing tests</title>
+<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-easing">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../testcommon.js"></script>
+<script src="../../resources/effect-easing-tests.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+function assert_progress(animation, currentTime, easingFunction) {
+  animation.currentTime = currentTime;
+  var portion = currentTime / animation.effect.timing.duration;
+  assert_approx_equals(animation.effect.getComputedTiming().progress,
+                       easingFunction(portion),
+                       0.01,
+                       'The progress of the animation should be approximately ' +
+                       easingFunction(portion) + ' at ' + currentTime + 'ms');
+}
+
+gEffectEasingTests.forEach(function(options) {
+  test(function(t) {
+    var target = createDiv(t);
+    var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
+                              { duration: 1000 * MS_PER_SEC,
+                                fill: 'forwards' });
+    anim.effect.timing.easing = options.easing;
+    assert_equals(anim.effect.timing.easing,
+                  options.serialization || options.easing);
+
+    var easing = options.easingFunction;
+    assert_progress(anim, 0, easing);
+    assert_progress(anim, 250 * MS_PER_SEC, easing);
+    assert_progress(anim, 500 * MS_PER_SEC, easing);
+    assert_progress(anim, 750 * MS_PER_SEC, easing);
+    assert_progress(anim, 1000 * MS_PER_SEC, easing);
+  }, options.desc);
+});
+
+gInvalidEasingTests.forEach(function(options) {
+  test(function(t) {
+    var div = createDiv(t);
+    var anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
+    assert_throws({ name: 'TypeError' },
+                  function() {
+                    anim.effect.timing.easing = options.easing;
+                  });
+  }, 'Invalid effect easing value test: \'' + options.easing + '\'');
+});
+
+test(function(t) {
+  var delay = 1000 * MS_PER_SEC;
+
+  var target = createDiv(t);
+  var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
+                            { duration: 1000 * MS_PER_SEC,
+                              fill: 'both',
+                              delay: delay,
+                              easing: 'steps(2, start)' });
+
+  anim.effect.timing.easing = 'steps(2, end)';
+  assert_equals(anim.effect.getComputedTiming().progress, 0,
+                'easing replace to steps(2, end) at before phase');
+
+  anim.currentTime = delay + 750 * MS_PER_SEC;
+  assert_equals(anim.effect.getComputedTiming().progress, 0.5,
+                'change currentTime to active phase');
+
+  anim.effect.timing.easing = 'steps(2, start)';
+  assert_equals(anim.effect.getComputedTiming().progress, 1,
+                'easing replace to steps(2, start) at active phase');
+
+  anim.currentTime = delay + 1500 * MS_PER_SEC;
+  anim.effect.timing.easing = 'steps(2, end)';
+  assert_equals(anim.effect.getComputedTiming().progress, 1,
+                'easing replace to steps(2, end) again at after phase');
+}, 'Change the easing while the animation is running');
+
+</script>
+</body>