Merge pull request #420 from alancutter/timingCleaning

Clean up easings before parsing

Author: dstoc

src/timing-utilities.js

@@ -205,12 +205,20 @@
     'step-end': step(1, End)
   };
 
+  var styleForCleaning = null;
   var numberString = '\\s*(-?\\d+\\.?\\d*|-?\\.\\d+)\\s*';
   var cubicBezierRe = new RegExp('cubic-bezier\\(' + numberString + ',' + numberString + ',' + numberString + ',' + numberString + '\\)');
   var stepRe = /steps\(\s*(\d+)\s*,\s*(start|middle|end)\s*\)/;
   var linear = function(x) { return x; };
 
   function toTimingFunction(easing) {
+    if (!styleForCleaning) {
+      styleForCleaning = document.createElement('div').style;
+    }
+    styleForCleaning.animationTimingFunction = '';
+    styleForCleaning.animationTimingFunction = easing;
+    easing = styleForCleaning.animationTimingFunction;
+
     var cubicData = cubicBezierRe.exec(easing);
     if (cubicData) {
       return cubic.apply(this, cubicData.slice(1).map(Number));

test/js/timing-utilities.js

@@ -9,11 +9,20 @@ suite('timing-utilities', function() {
     assert.equal(calculateActiveDuration({duration: 500, playbackRate: 0.1, iterations: 300}), 1500000);
   });
   test('conversion of timing functions', function() {
-    var f = toTimingFunction('ease');
-    var g = toTimingFunction('cubic-bezier(.25, 0.1, 0.25, 1.)');
-    for (var i = 0; i < 1; i += 0.1) {
-      assert.equal(f(i), g(i));
+    function assertTimingFunctionsEqual(tf1, tf2, message) {
+      for (var i = 0; i <= 1; i += 0.1) {
+        assert.closeTo(tf1(i), tf2(i), 0.01, message);
+      }
     }
+
+    assertTimingFunctionsEqual(
+        toTimingFunction('ease-in-out'),
+        toTimingFunction('eAse\\2d iN-ouT'),
+        'Should accept arbitrary casing and escape chararcters');
+
+    var f = toTimingFunction('ease');
+    var g = toTimingFunction('cubic-bezier(.25, 0.1, 0.25, 1.0)');
+    assertTimingFunctionsEqual(f, g, 'ease should map onto preset cubic-bezier');
     assert.closeTo(f(0.1844), 0.2601, 0.01);
     assert.closeTo(g(0.1844), 0.2601, 0.01);
     assert.equal(f(0), 0);
@@ -24,25 +33,18 @@ suite('timing-utilities', function() {
     f = toTimingFunction('cubic-bezier(0, 1, 1, 0)');
     assert.closeTo(f(0.104), 0.392, 0.01);
 
-    function isLinear(f) {
-      assert.equal(f(0), 0);
-      assert.equal(f(0.1), 0.1);
-      assert.equal(f(0.4), 0.4);
-      assert.equal(f(0.9), 0.9);
-      assert.equal(f(1), 1);
+    function assertIsLinear(easing) {
+      var f = toTimingFunction(easing);
+      for (var i = 0; i <= 1; i += 0.1) {
+        assert.equal(f(i), i, easing + ' is linear');
+      }
     }
 
-    f = toTimingFunction('cubic-bezier(0, 1, -1, 1)');
-    isLinear(f);
-
-    f = toTimingFunction('an elephant');
-    isLinear(f);
-
-    f = toTimingFunction('cubic-bezier(-1, 1, 1, 1)');
-    isLinear(f);
-
-    f = toTimingFunction('cubic-bezier(1, 1, 1)');
-    isLinear(f);
+    assertIsLinear('cubic-bezier(.25, 0.1, 0.25, 1.)');
+    assertIsLinear('cubic-bezier(0, 1, -1, 1)');
+    assertIsLinear('an elephant');
+    assertIsLinear('cubic-bezier(-1, 1, 1, 1)');
+    assertIsLinear('cubic-bezier(1, 1, 1)');
 
     f = toTimingFunction('steps(10, end)');
     assert.equal(f(0), 0);