Merge pull request #481 from suzyh/effect-easing

Allow cubic bezier to accept value outside [0,1]
web-animations · Aug 2, 2016 · 5b96c1e · 5b96c1e
2 parents a8f85fb + 36b96e2
commit 5b96c1e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/src/timing-utilities.js b/src/timing-utilities.js
@@ -174,9 +174,23 @@
       return linear;
     }
     return function(x) {
-      if (x == 0 || x == 1) {
-        return x;
+      if (x <= 0) {
+        var start_gradient = 0;
+        if (a > 0)
+          start_gradient = b / a;
+        else if (!b && c > 0)
+          start_gradient = d / c;
+        return start_gradient * x;
       }
+      if (x >= 1) {
+        var end_gradient = 0;
+        if (c < 1)
+          end_gradient = (d - 1) / (c - 1);
+        else if (c == 1 && a < 1)
+          end_gradient = (b - 1) / (a - 1);
+        return 1 + end_gradient * (x - 1);
+      }
+
       var start = 0, end = 1;
       while (start < end) {
         var mid = (start + end) / 2;

diff --git a/test/web-platform-tests-expectations.js b/test/web-platform-tests-expectations.js
@@ -830,23 +830,14 @@ module.exports = {
     },
 
     'test/web-platform-tests/web-animations/interfaces/KeyframeEffect/effect-easing.html': {
-      'effect easing produces values greater than 1 with keyframe easing cubic-bezier(0, 0, 0, 0)':
-          'assert_approx_equals: The left of the animation should be approximately 102.40666638411385 at 250ms expected 102.40666638411385 +/- 0.01 but got 100',
-
       'effect easing produces values greater than 1 with keyframe easing cubic-bezier(1, 1, 1, 1)':
           'assert_approx_equals: The left of the animation should be approximately 102.40666638411385 at 250ms expected 102.40666638411385 +/- 0.01 but got 100',
 
       'effect easing produces negative values 1 with keyframe easing cubic-bezier(0, 0, 0, 0)':
           'assert_approx_equals: The left of the animation should be approximately -29.501119758965654 at 250ms expected -29.501119758965654 +/- 0.01 but got 0',
 
-      'effect easing produces negative values 1 with keyframe easing cubic-bezier(1, 1, 1, 1)':
-          'assert_approx_equals: The left of the animation should be approximately -29.501119758965654 at 250ms expected -29.501119758965654 +/- 0.01 but got 0',
-
-      'effect easing produces values greater than 1 with keyframe easing producing values greater than 1':
-          'assert_approx_equals: The left of the animation should be approximately 101.9006796334848 at 240ms expected 101.9006796334848 +/- 0.01 but got 100',
-
-      'effect easing produces negative values with keyframe easing producing negative values':
-          'assert_approx_equals: The left of the animation should be approximately -16.589193103032184 at 10ms expected -16.589193103032184 +/- 0.01 but got 0',
+      'effect easing which produces values greater than 1 and the tangent on the upper boundary is infinity with keyframe easing producing values greater than 1':
+          'assert_approx_equals: The left of the animation should be approximately 100 at 240ms expected 100 +/- 0.01 but got 99.5333',
     },
 
     'test/web-platform-tests/web-animations/interfaces/KeyframeEffect/effect-easing-steps.html': {