Skip to content

Commit c109fa9

Browse files
committed
Merge pull request #420 from alancutter/timingCleaning
Clean up easings before parsing
2 parents e27cd1a + 16ee3d8 commit c109fa9

File tree

2 files changed

+31
-21
lines changed

2 files changed

+31
-21
lines changed

src/timing-utilities.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,12 +205,20 @@
205205
'step-end': step(1, End)
206206
};
207207

208+
var styleForCleaning = null;
208209
var numberString = '\\s*(-?\\d+\\.?\\d*|-?\\.\\d+)\\s*';
209210
var cubicBezierRe = new RegExp('cubic-bezier\\(' + numberString + ',' + numberString + ',' + numberString + ',' + numberString + '\\)');
210211
var stepRe = /steps\(\s*(\d+)\s*,\s*(start|middle|end)\s*\)/;
211212
var linear = function(x) { return x; };
212213

213214
function toTimingFunction(easing) {
215+
if (!styleForCleaning) {
216+
styleForCleaning = document.createElement('div').style;
217+
}
218+
styleForCleaning.animationTimingFunction = '';
219+
styleForCleaning.animationTimingFunction = easing;
220+
easing = styleForCleaning.animationTimingFunction;
221+
214222
var cubicData = cubicBezierRe.exec(easing);
215223
if (cubicData) {
216224
return cubic.apply(this, cubicData.slice(1).map(Number));

test/js/timing-utilities.js

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,20 @@ suite('timing-utilities', function() {
99
assert.equal(calculateActiveDuration({duration: 500, playbackRate: 0.1, iterations: 300}), 1500000);
1010
});
1111
test('conversion of timing functions', function() {
12-
var f = toTimingFunction('ease');
13-
var g = toTimingFunction('cubic-bezier(.25, 0.1, 0.25, 1.)');
14-
for (var i = 0; i < 1; i += 0.1) {
15-
assert.equal(f(i), g(i));
12+
function assertTimingFunctionsEqual(tf1, tf2, message) {
13+
for (var i = 0; i <= 1; i += 0.1) {
14+
assert.closeTo(tf1(i), tf2(i), 0.01, message);
15+
}
1616
}
17+
18+
assertTimingFunctionsEqual(
19+
toTimingFunction('ease-in-out'),
20+
toTimingFunction('eAse\\2d iN-ouT'),
21+
'Should accept arbitrary casing and escape chararcters');
22+
23+
var f = toTimingFunction('ease');
24+
var g = toTimingFunction('cubic-bezier(.25, 0.1, 0.25, 1.0)');
25+
assertTimingFunctionsEqual(f, g, 'ease should map onto preset cubic-bezier');
1726
assert.closeTo(f(0.1844), 0.2601, 0.01);
1827
assert.closeTo(g(0.1844), 0.2601, 0.01);
1928
assert.equal(f(0), 0);
@@ -24,25 +33,18 @@ suite('timing-utilities', function() {
2433
f = toTimingFunction('cubic-bezier(0, 1, 1, 0)');
2534
assert.closeTo(f(0.104), 0.392, 0.01);
2635

27-
function isLinear(f) {
28-
assert.equal(f(0), 0);
29-
assert.equal(f(0.1), 0.1);
30-
assert.equal(f(0.4), 0.4);
31-
assert.equal(f(0.9), 0.9);
32-
assert.equal(f(1), 1);
36+
function assertIsLinear(easing) {
37+
var f = toTimingFunction(easing);
38+
for (var i = 0; i <= 1; i += 0.1) {
39+
assert.equal(f(i), i, easing + ' is linear');
40+
}
3341
}
3442

35-
f = toTimingFunction('cubic-bezier(0, 1, -1, 1)');
36-
isLinear(f);
37-
38-
f = toTimingFunction('an elephant');
39-
isLinear(f);
40-
41-
f = toTimingFunction('cubic-bezier(-1, 1, 1, 1)');
42-
isLinear(f);
43-
44-
f = toTimingFunction('cubic-bezier(1, 1, 1)');
45-
isLinear(f);
43+
assertIsLinear('cubic-bezier(.25, 0.1, 0.25, 1.)');
44+
assertIsLinear('cubic-bezier(0, 1, -1, 1)');
45+
assertIsLinear('an elephant');
46+
assertIsLinear('cubic-bezier(-1, 1, 1, 1)');
47+
assertIsLinear('cubic-bezier(1, 1, 1)');
4648

4749
f = toTimingFunction('steps(10, end)');
4850
assert.equal(f(0), 0);

0 commit comments

Comments
 (0)