Bug 1244643 - Part 2: Append tests for easing. r=hiro
authorDaisuke Akatsuka <daisuke@mozilla-japan.org>
Fri, 15 Apr 2016 20:55:25 +0900
changeset 331256 6cd4ec949121c744e2c8a5a6d30ad3f4faaff48c
parent 331255 b535eb7300d8de2249fbeabae94e5e447763e342
child 331257 7887410b3392ccada8e1725844ea5a0425e67cd5
push id6048
push userkmoir@mozilla.com
push dateMon, 06 Jun 2016 19:02:08 +0000
treeherdermozilla-beta@46d72a56c57d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1244643
milestone48.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1244643 - Part 2: Append tests for easing. r=hiro MozReview-Commit-ID: 3RYWjsViwJZ
dom/animation/test/chrome/test_animation_observers.html
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/web-animations/animation-effect-timing/easing.html
--- a/dom/animation/test/chrome/test_animation_observers.html
+++ b/dom/animation/test/chrome/test_animation_observers.html
@@ -1664,16 +1664,39 @@ addAsyncAnimTest("change_delay",
                  "records after animation restarted");
 
   anim.cancel();
   yield await_frame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after animation end");
 });
 
+addAsyncAnimTest("change_easing",
+                 { observe: div, subtree: true }, function*() {
+  var anim = div.animate({ opacity: [ 0, 1 ] },
+                         { duration: 100 * MS_PER_SEC,
+                           easing: "steps(2, start)" });
+
+  yield await_frame();
+  assert_records([{ added: [anim], changed: [], removed: [] }],
+                 "records after animation is added");
+
+  anim.effect.timing.easing = "steps(2, end)";
+  yield await_frame();
+  assert_records([{ added: [], changed: [anim], removed: [] }],
+                 "records after easing is changed");
+
+  anim.effect.timing.easing = "steps(2, end)";
+  yield await_frame();
+  assert_records([], "records after assigning same value");
+
+  anim.cancel();
+  yield await_frame();
+});
+
 addAsyncAnimTest("negative_delay_in_constructor",
                  { observe: div, subtree: true }, function*() {
   var anim = div.animate({ opacity: [ 0, 1 ] },
                          { duration: 100, delay: -100 });
   yield await_frame();
   assert_records([], "records after assigning negative value");
 });
 
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -28741,16 +28741,20 @@
         "path": "web-animations/animation-model/keyframes/effect-value-context.html",
         "url": "/web-animations/animation-model/keyframes/effect-value-context.html"
       },
       {
         "path": "web-animations/animation-effect-timing/duration.html",
         "url": "/web-animations/animation-effect-timing/duration.html"
       },
       {
+        "path": "web-animations/animation-effect-timing/easing.html",
+        "url": "/web-animations/animation-effect-timing/easing.html"
+      },
+      {
         "path": "web-animations/animation-effect-timing/endDelay.html",
         "url": "/web-animations/animation-effect-timing/endDelay.html"
       },
       {
         "path": "web-animations/animation-effect-timing/getAnimations.html",
         "url": "/web-animations/animation-effect-timing/getAnimations.html"
       },
       {
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/animation-effect-timing/easing.html
@@ -0,0 +1,126 @@
+<!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>
+<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');
+}
+
+var gEffectEasingTests = [
+  {
+    desc: 'steps(start) function',
+    easing: 'steps(2, start)',
+    easingFunction: stepStart(2)
+  },
+  {
+    desc: 'steps(end) function',
+    easing: 'steps(2, end)',
+    easingFunction: stepEnd(2)
+  },
+  {
+    desc: 'linear function',
+    easing: 'linear', // cubic-bezier(0, 0, 1.0, 1.0)
+    easingFunction: cubicBezier(0, 0, 1.0, 1.0)
+  },
+  {
+    desc: 'ease function',
+    easing: 'ease', // cubic-bezier(0.25, 0.1, 0.25, 1.0)
+    easingFunction: cubicBezier(0.25, 0.1, 0.25, 1.0)
+  },
+  {
+    desc: 'ease-in function',
+    easing: 'ease-in', // cubic-bezier(0.42, 0, 1.0, 1.0)
+    easingFunction: cubicBezier(0.42, 0, 1.0, 1.0)
+  },
+  {
+    desc: 'ease-in-out function',
+    easing: 'ease-in-out', // cubic-bezier(0.42, 0, 0.58, 1.0)
+    easingFunction: cubicBezier(0.42, 0, 0.58, 1.0)
+  },
+  {
+    desc: 'ease-out function',
+    easing: 'ease-out', // cubic-bezier(0, 0, 0.58, 1.0)
+    easingFunction: cubicBezier(0, 0, 0.58, 1.0)
+  },
+  {
+    desc: 'easing function which produces values greater than 1',
+    easing: 'cubic-bezier(0, 1.5, 1, 1.5)',
+    easingFunction: cubicBezier(0, 1.5, 1, 1.5)
+  }
+];
+
+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.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);
+});
+
+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 = '';
+                });
+  assert_throws({ name: 'TypeError' },
+                function() {
+                  anim.effect.timing.easing = 'test';
+                });
+}, 'Test invalid easing value');
+
+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>