Added Polymer
This commit is contained in:
80
rpg-docs/public/bower_components/web-animations-next/test/js/animation-constructor.js
vendored
Normal file
80
rpg-docs/public/bower_components/web-animations-next/test/js/animation-constructor.js
vendored
Normal file
@@ -0,0 +1,80 @@
|
||||
suite('animation-constructor', function() {
|
||||
setup(function() {
|
||||
document.timeline.getAnimationPlayers().forEach(function(player) {
|
||||
player.cancel();
|
||||
});
|
||||
});
|
||||
|
||||
test('Playing an Animation makes a Player', function() {
|
||||
var animation = new Animation(document.body, [], 1000);
|
||||
assert.equal(document.body.getAnimationPlayers().length, 0);
|
||||
|
||||
var player = document.timeline.play(animation);
|
||||
tick(200);
|
||||
assert.equal(document.body.getAnimationPlayers().length, 1);
|
||||
|
||||
tick(1600);
|
||||
assert.equal(document.body.getAnimationPlayers().length, 0);
|
||||
});
|
||||
|
||||
test('Setting the timing function on an Animation works', function() {
|
||||
function leftAsNumber(target) {
|
||||
left = getComputedStyle(target).left;
|
||||
return Number(left.substring(0, left.length - 2));
|
||||
}
|
||||
|
||||
var target1 = document.createElement('div');
|
||||
var target2 = document.createElement('div');
|
||||
target1.style.position = 'absolute';
|
||||
target2.style.position = 'absolute';
|
||||
document.body.appendChild(target1);
|
||||
document.body.appendChild(target2);
|
||||
|
||||
var animation1 = new Animation(target1, [{left: '0px'}, {left: '50px'}], 1000);
|
||||
var animation2 = new Animation(target2, [{left: '0px'}, {left: '50px'}], {duration: 1000, easing: 'ease-in'});
|
||||
|
||||
var player1 = document.timeline.play(animation1);
|
||||
var player2 = document.timeline.play(animation2);
|
||||
|
||||
tick(0);
|
||||
assert.equal(leftAsNumber(target1), 0);
|
||||
assert.equal(leftAsNumber(target2), 0);
|
||||
|
||||
tick(250);
|
||||
assert.closeTo(leftAsNumber(target1), 12.5, 1);
|
||||
assert.closeTo(leftAsNumber(target2), 4.65, 1);
|
||||
|
||||
tick(500);
|
||||
assert.closeTo(leftAsNumber(target1), 25, 1);
|
||||
assert.closeTo(leftAsNumber(target2), 15.25, 1);
|
||||
});
|
||||
|
||||
test('Timing is always converted to AnimationTimingInput', function() {
|
||||
var target = document.createElement('div');
|
||||
document.body.appendChild(target);
|
||||
|
||||
var keyframes = [{background: 'blue'}, {background: 'red'}];
|
||||
|
||||
var animation = new Animation(target, keyframes, 200);
|
||||
assert.equal(animation.timing.duration, 200);
|
||||
|
||||
animation = new Animation(target, keyframes);
|
||||
assert.isDefined(animation.timing);
|
||||
|
||||
animation = new Animation(target, keyframes, {duration: 200});
|
||||
var group = new AnimationGroup([animation]);
|
||||
assert.equal(group.timing.duration, 'auto');
|
||||
});
|
||||
|
||||
test('Handle null target on Animation', function() {
|
||||
var animation = new Animation(null, function(tf) {
|
||||
// noop
|
||||
}, 200);
|
||||
|
||||
var player = document.timeline.play(animation);
|
||||
assert.isNotNull(player);
|
||||
tick(50);
|
||||
tick(150);
|
||||
assert.equal(player.currentTime, 100);
|
||||
});
|
||||
});
|
||||
114
rpg-docs/public/bower_components/web-animations-next/test/js/animation-node.js
vendored
Normal file
114
rpg-docs/public/bower_components/web-animations-next/test/js/animation-node.js
vendored
Normal file
@@ -0,0 +1,114 @@
|
||||
suite('animation-node', function() {
|
||||
test('normalize timing input', function() {
|
||||
assert.equal(normalizeTimingInput(1).duration, 1);
|
||||
assert.equal(normalizeTimingInput(1).easing(0.2), 0.2);
|
||||
assert.equal(normalizeTimingInput(undefined).duration, 0);
|
||||
});
|
||||
test('calculating active duration', function() {
|
||||
assert.equal(calculateActiveDuration({duration: 1000, playbackRate: 4, iterations: 20}), 5000);
|
||||
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));
|
||||
}
|
||||
assert.closeTo(f(0.1844), 0.2601, 0.01);
|
||||
assert.closeTo(g(0.1844), 0.2601, 0.01);
|
||||
|
||||
f = toTimingFunction('cubic-bezier(0, 1, 1, 0)');
|
||||
assert.closeTo(f(0.104), 0.392, 0.01);
|
||||
|
||||
function isLinear(f) {
|
||||
assert.equal(f(0.1), 0.1);
|
||||
assert.equal(f(0.4), 0.4);
|
||||
assert.equal(f(0.9), 0.9);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
f = toTimingFunction('steps(10, end)');
|
||||
assert.equal(f(0), 0);
|
||||
assert.equal(f(0.09), 0);
|
||||
assert.equal(f(0.1), 0.1);
|
||||
assert.equal(f(0.25), 0.2);
|
||||
});
|
||||
test('calculating phase', function() {
|
||||
// calculatePhase(activeDuration, localTime, timing);
|
||||
assert.equal(calculatePhase(1000, 100, {delay: 0}), PhaseActive);
|
||||
assert.equal(calculatePhase(1000, 100, {delay: 200}), PhaseBefore);
|
||||
assert.equal(calculatePhase(1000, 2000, {delay: 200}), PhaseAfter);
|
||||
assert.equal(calculatePhase(1000, null, {delay: 200}), PhaseNone);
|
||||
});
|
||||
test('calculating active time', function() {
|
||||
// calculateActiveTime(activeDuration, fillMode, localTime, phase, delay);
|
||||
assert.equal(calculateActiveTime(1000, 'forwards', 100, PhaseActive, 0), 100);
|
||||
assert.equal(calculateActiveTime(1000, 'forwards', 100, PhaseBefore, 200), null);
|
||||
assert.equal(calculateActiveTime(1000, 'both', 100, PhaseBefore, 200), 0);
|
||||
assert.equal(calculateActiveTime(1000, 'forwards', 500, PhaseActive, 200), 300);
|
||||
assert.equal(calculateActiveTime(1000, 'forwards', 1100, PhaseAfter, 200), 1000);
|
||||
assert.equal(calculateActiveTime(1000, 'none', 1100, PhaseAfter, 200), null);
|
||||
assert.equal(calculateActiveTime(Infinity, 'both', 5000000, PhaseActive, 2000000), 3000000);
|
||||
assert.equal(calculateActiveTime(Infinity, 'both', 50000, PhaseBefore, 2000000), 0);
|
||||
});
|
||||
test('calculating scaled active time', function() {
|
||||
// calculateScaledActiveTime(activeDuration, activeTime, startOffset, timingInput);
|
||||
assert.equal(calculateScaledActiveTime(1000, 200, 300, {playbackRate: 1.5}), 600);
|
||||
assert.equal(calculateScaledActiveTime(1000, 200, 300, {playbackRate: -4}), 3500);
|
||||
assert.equal(calculateScaledActiveTime(Infinity, 400, 200, {playbackRate: 1}), 600);
|
||||
assert.equal(calculateScaledActiveTime(Infinity, 400, 200, {playbackRate: -4}), Infinity);
|
||||
});
|
||||
test('calculating iteration time', function() {
|
||||
// calculateIterationTime(iterationDuration, repeatedDuration, scaledActiveTime, startOffset, timingInput);
|
||||
assert.equal(calculateIterationTime(500, 5000, 600, 100, {iterations: 10, iterationStart: 0}), 100);
|
||||
assert.equal(calculateIterationTime(500, 5000, Infinity, 100, {iterations: 10, iterationStart: 0}), 500);
|
||||
assert.equal(calculateIterationTime(500, 5000, 5100, 100, {iterations: 3.2, iterationStart: 0.8}), 500);
|
||||
});
|
||||
test('calculating current iteration', function() {
|
||||
// calculateCurrentIteration(iterationDuration, iterationTime, scaledActiveTime, timingInput);
|
||||
assert.equal(calculateCurrentIteration(1000, 400, 4400, {iterations: 50, iterationStart: 0.8}), 4);
|
||||
assert.equal(calculateCurrentIteration(1000, 1000, 4400, {iterations: 50.2, iterationStart: 0.8}), 50);
|
||||
});
|
||||
test('calculating transformed time', function() {
|
||||
// calculateTransformedTime(currentIteration, iterationDuration, iterationTime, timingInput);
|
||||
assert.equal(calculateTransformedTime(4, 1000, 200, {easing: function(x) { return x; }, direction: 'normal'}), 200);
|
||||
assert.equal(calculateTransformedTime(4, 1000, 200, {easing: function(x) { return x; }, direction: 'reverse'}), 800);
|
||||
assert.closeTo(calculateTransformedTime(4, 1000, 200, {easing: function(x) { return x * x; }, direction: 'reverse'}), 640, 0.0001);
|
||||
assert.closeTo(calculateTransformedTime(4, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate'}), 360, 0.0001);
|
||||
assert.closeTo(calculateTransformedTime(3, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate'}), 160, 0.0001);
|
||||
assert.closeTo(calculateTransformedTime(4, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate-reverse'}), 160, 0.0001);
|
||||
assert.closeTo(calculateTransformedTime(3, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate-reverse'}), 360, 0.0001);
|
||||
});
|
||||
test('Animation Node', function() {
|
||||
var timing = normalizeTimingInput({duration: 1000, iterations: 4, iterationStart: 0.5, easing: 'linear', direction: 'alternate', delay: 100, fill: 'forwards'});
|
||||
var timing2 = normalizeTimingInput({duration: 1000, iterations: 4, iterationStart: 0.5, easing: 'ease', direction: 'alternate', delay: 100, fill: 'forwards'});
|
||||
var node = webAnimationsMinifill.AnimationNode(timing);
|
||||
var node2 = webAnimationsMinifill.AnimationNode(timing2);
|
||||
assert.equal(node(0), null);
|
||||
assert.equal(node(100), 0.5);
|
||||
assert.closeTo(node2(100), 0.8, 0.005);
|
||||
assert.equal(node(600), 1);
|
||||
assert.closeTo(node2(600), 1, 0.005);
|
||||
assert.equal(node(700), 0.9);
|
||||
assert.closeTo(node2(700), 0.99, 0.005);
|
||||
assert.equal(node(1600), 0);
|
||||
assert.closeTo(node2(1600), 0, 0.005);
|
||||
assert.equal(node(4000), 0.4);
|
||||
assert.closeTo(node2(4000), 0.68, 0.005);
|
||||
assert.equal(node(4100), 0.5);
|
||||
assert.closeTo(node2(4100), 0.8, 0.005);
|
||||
assert.equal(node(6000), 0.5);
|
||||
assert.closeTo(node2(6000), 0.8, 0.005);
|
||||
});
|
||||
});
|
||||
72
rpg-docs/public/bower_components/web-animations-next/test/js/apply-preserving-inline-style.js
vendored
Normal file
72
rpg-docs/public/bower_components/web-animations-next/test/js/apply-preserving-inline-style.js
vendored
Normal file
@@ -0,0 +1,72 @@
|
||||
suite('apply-preserving-inline-style', function() {
|
||||
setup(function() {
|
||||
this.element = document.createElement('div');
|
||||
ensureStyleIsPatched(this.element);
|
||||
this.style = this.element.style;
|
||||
document.documentElement.appendChild(this.element);
|
||||
});
|
||||
teardown(function() {
|
||||
this.element.remove();
|
||||
});
|
||||
|
||||
test('Style is patched', function() {
|
||||
assert(this.element._webAnimationsPatchedStyle);
|
||||
});
|
||||
test('Setting animated style', function() {
|
||||
this.style.left = '0px';
|
||||
this.element.style._set('left', '100px');
|
||||
assert.equal(this.style.left, '0px');
|
||||
});
|
||||
test('Clearing animated style', function() {
|
||||
this.style.left = '0px';
|
||||
this.element.style._set('left', '100px');
|
||||
this.element.style._clear('left');
|
||||
assert.equal(this.style.left, '0px');
|
||||
});
|
||||
test('Patched length', function() {
|
||||
this.element.style._set('left', '100px');
|
||||
this.style.cssText = 'left: 0px; background-color: green;';
|
||||
assert.equal(this.style.cssText, 'left: 0px; background-color: green;');
|
||||
assert.equal(this.style.left, '0px');
|
||||
assert.equal(this.style.backgroundColor, 'green');
|
||||
assert.equal(this.style.length, 2);
|
||||
});
|
||||
test('Patched property getters and setters', function() {
|
||||
this.style._set('left', '100px');
|
||||
this.style.left = '0px';
|
||||
this.style.backgroundColor = 'rgb(1, 2, 3)';
|
||||
assert.equal(this.style.left, '0px');
|
||||
assert.equal(this.style.backgroundColor, 'rgb(1, 2, 3)');
|
||||
assert.equal(getComputedStyle(this.element).left, '100px');
|
||||
assert.equal(getComputedStyle(this.element).backgroundColor, 'rgb(1, 2, 3)');
|
||||
});
|
||||
test('Patched setProperty/getPropertyValue', function() {
|
||||
this.style._set('left', '100px');
|
||||
this.style.setProperty('left', '0px');
|
||||
this.style.setProperty('background-color', 'rgb(1, 2, 3)');
|
||||
assert.equal(this.style.getPropertyValue('left'), '0px');
|
||||
assert.equal(this.style.getPropertyValue('background-color'), 'rgb(1, 2, 3)');
|
||||
assert.equal(getComputedStyle(this.element).left, '100px');
|
||||
assert.equal(getComputedStyle(this.element).backgroundColor, 'rgb(1, 2, 3)');
|
||||
});
|
||||
test('Patched item()', function() {
|
||||
this.style._set('left', '100px');
|
||||
this.style.setProperty('left', '0px');
|
||||
this.style.setProperty('background-color', 'rgb(1, 2, 3)');
|
||||
assert.equal(this.style.item(0), 'left');
|
||||
assert.equal(this.style.item(1), 'background-color');
|
||||
assert.equal(this.style.item(2), '');
|
||||
this.style.cssText = 'top: 0px';
|
||||
assert.equal(this.style.item(0), 'top');
|
||||
assert.equal(this.style.item(1), '');
|
||||
});
|
||||
test('Patched cssText', function() {
|
||||
this.style._set('left', '100px');
|
||||
assert.equal(this.style.length, 0);
|
||||
this.style.setProperty('left', '0px');
|
||||
this.style.setProperty('background-color', 'rgb(1, 2, 3)');
|
||||
assert.equal(this.style.length, 2);
|
||||
this.style.cssText = 'top: 0px';
|
||||
assert.equal(this.style.length, 1);
|
||||
});
|
||||
});
|
||||
70
rpg-docs/public/bower_components/web-animations-next/test/js/box-handler.js
vendored
Normal file
70
rpg-docs/public/bower_components/web-animations-next/test/js/box-handler.js
vendored
Normal file
@@ -0,0 +1,70 @@
|
||||
suite('box-handler', function() {
|
||||
test('parse rectangle values', function() {
|
||||
assert.deepEqual(webAnimationsMinifill.parseBox(' rect(0px, 20px, 20px, 0px) '), [{px: 0}, {px: 20}, {px: 20}, {px: 0}]);
|
||||
assert.deepEqual(webAnimationsMinifill.parseBox('rect(0px, 20px, 20px, 0px)'), [{px: 0}, {px: 20}, {px: 20}, {px: 0}]);
|
||||
assert.deepEqual(webAnimationsMinifill.parseBox('rect(0px, 20px, 20px, 0)'), [{px: 0}, {px: 20}, {px: 20}, {px: 0}]);
|
||||
assert.deepEqual(webAnimationsMinifill.parseBox('rect(10px, 100%, 500px, 10%)'), [{px: 10}, {'%': 100}, {px: 500}, {'%': 10}]);
|
||||
assert.deepEqual(webAnimationsMinifill.parseBox('rect(10%, 100%, 500%, 10%)'), [{'%': 10}, {'%': 100}, {'%': 500}, {'%': 10}]);
|
||||
assert.deepEqual(webAnimationsMinifill.parseBox('rect(0px, calc(10px*3), 20px, 0%)'), [{px: 0}, {px: 30}, {px: 20}, {'%': 0}]);
|
||||
assert.deepEqual(webAnimationsMinifill.parseBox('rect(0px, 0%, 20px, calc(10px*3))'), [{px: 0}, {'%': 0}, {px: 20}, {px: 30}]);
|
||||
assert.deepEqual(webAnimationsMinifill.parseBox('rect(0px, 0%, 20px, calc((10px) + (3px)))'), [{px: 0}, {'%': 0}, {px: 20}, {px: 13}]);
|
||||
assert.deepEqual(webAnimationsMinifill.parseBox('rect(calc(10px + 5em), calc(10px + 5em), calc(10px + 5em), calc(10px + 5em))'),
|
||||
[{px: 10, em: 5}, {px: 10, em: 5}, {px: 10, em: 5}, {px: 10, em: 5}]);
|
||||
});
|
||||
test('invalid rectangles fail to parse', function() {
|
||||
assert.isUndefined(webAnimationsMinifill.parseBox('rect(0, 20, 20, 0)'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseBox('rect(0px, 0px, 0px)'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseBox('rect(0px, 0px, 0px, 0px, 0px)'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseBox('rect()'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseBox('rect(calc(10px + 5), 0px, 0px, 0px)'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseBox('Rect(0px, 0px, 0px, 0px)'));
|
||||
});
|
||||
test('interpolate lengths, percents and calcs in rectangles', function() {
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation('clip', 'rect(10px, 10px, 10px, 10px)', 'rect(50px, 50px, 50px, 50px)')(0.25),
|
||||
'rect(20px, 20px, 20px, 20px)',
|
||||
'Interpolate lengths in a rect');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation('clip', 'rect(-10px, -10px, -10px, -10px)', 'rect(50px, 50px, 50px, 50px)')(0.25),
|
||||
'rect(5px, 5px, 5px, 5px)',
|
||||
'Interpolate negative lengths in a rect');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation('clip', 'rect(10%, 10%, 10%, 10%)', 'rect(50%, 50%, 50%, 50%)')(0.25),
|
||||
'rect(20%, 20%, 20%, 20%)',
|
||||
'Interpolate percents in a rect');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation('clip', 'rect(10px, 10%, 10px, 10%)', 'rect(50px, 50%, 50px, 50%)')(0.25),
|
||||
'rect(20px, 20%, 20px, 20%)',
|
||||
'Interpolate mixed lengths and percents in a rect, where units are aligned');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation('clip', 'rect(0px, 0px, 0px, 0px)', 'rect(0.001px, 0.001px, 0.001px, 0.001px)')(0.05),
|
||||
'rect(0px, 0px, 0px, 0px)',
|
||||
'Round interpolation result');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation('clip', 'rect(0px, 0px, 0px, 0px)', 'rect(0.001px, 0.001px, 0.001px, 0.001px)')(0.5),
|
||||
'rect(0.001px, 0.001px, 0.001px, 0.001px)',
|
||||
'Round interpolation result');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation('clip', 'rect(10px, 10px, 10px, 10px)', 'rect(20px, 20px, 20px, 20px)')(0.25),
|
||||
'rect(12.500px, 12.500px, 12.500px, 12.500px)',
|
||||
'Round interpolation result');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation('clip', 'rect(10px, 10%, 10px, 10%)', 'rect(10em, 10px, 10em, 10px)')(0.4),
|
||||
'rect(calc(6px + 4em), calc(6% + 4px), calc(6px + 4em), calc(6% + 4px))',
|
||||
'Interpolate from pixels to ems and from percents to pixels');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'clip',
|
||||
'rect(calc(10px + 5em), calc(10px + 5em), calc(10px + 5em), calc(10px + 5em))',
|
||||
'rect(calc(20px + 35em), calc(20px + 35em), calc(20px + 35em), calc(20px + 35em))')(0.4),
|
||||
'rect(calc(14px + 17em), calc(14px + 17em), calc(14px + 17em), calc(14px + 17em))',
|
||||
'Interpolate calcs in a rect');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'clip',
|
||||
'rect(calc(10px + (5em)), calc(10px + (5em)), calc(10px + (5em)), calc(10px + (5em)))',
|
||||
'rect(calc(20px + 35em), calc(20px + 35em), calc(20% + 35em), calc(20% + 35em))')(0.5),
|
||||
'rect(calc(15px + 20em), calc(15px + 20em), calc(5px + 20em + 10%), calc(5px + 20em + 10%))',
|
||||
'Interpolate calcs in a rect');
|
||||
});
|
||||
});
|
||||
23
rpg-docs/public/bower_components/web-animations-next/test/js/color-handler.js
vendored
Normal file
23
rpg-docs/public/bower_components/web-animations-next/test/js/color-handler.js
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
suite('color-handler', function() {
|
||||
test('parse colors', function() {
|
||||
assert.deepEqual(parseColor(' ReD '), [255, 0, 0, 1]);
|
||||
assert.deepEqual(parseColor(' magenta'), [255, 0, 255, 1]);
|
||||
assert.deepEqual(parseColor('transparent'), [0, 0, 0, 0]);
|
||||
assert.deepEqual(parseColor('#0f0'), [0, 255, 0, 1]);
|
||||
assert.deepEqual(parseColor('rgb(0,10,20)'), [0, 10, 20, 1]);
|
||||
assert.deepEqual(parseColor('rgba(65,40,20,0.2)'), [13, 8, 4, 0.2]);
|
||||
assert.deepEqual(parseColor('hsl(120, 100%, 50%)'), [0, 255, 0, 1]);
|
||||
});
|
||||
test('invalid colors fail to parse', function() {
|
||||
assert.isUndefined(parseColor(''));
|
||||
assert.isUndefined(parseColor('bananayellow'));
|
||||
assert.isUndefined(parseColor('rgb(10, 20, 30, 40)'));
|
||||
});
|
||||
test('color interpolation', function() {
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('color', '#00aa11', '#aa00bb')(0.2), 'rgba(34,136,51,1)');
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('color', 'transparent', '#004488')(0), 'transparent');
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('color', 'transparent', '#004488')(0.5), 'rgba(0,68,136,0.500)');
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('color', 'red', 'green')(2), 'rgba(0,255,0,1)');
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('color', 'red', 'green')(-1), 'rgba(255,0,0,1)');
|
||||
});
|
||||
});
|
||||
74
rpg-docs/public/bower_components/web-animations-next/test/js/dimension-handler.js
vendored
Normal file
74
rpg-docs/public/bower_components/web-animations-next/test/js/dimension-handler.js
vendored
Normal file
@@ -0,0 +1,74 @@
|
||||
suite('dimension-handler', function() {
|
||||
test('parse simple length values', function() {
|
||||
assert.deepEqual(webAnimationsMinifill.parseLength(' 0 '), {px: 0});
|
||||
assert.deepEqual(webAnimationsMinifill.parseLength('10px'), {px: 10});
|
||||
assert.deepEqual(webAnimationsMinifill.parseLength('5VmIN'), {vmin: 5});
|
||||
assert.deepEqual(webAnimationsMinifill.parseLength('-12.5em'), {em: -12.5});
|
||||
});
|
||||
test('parse length calcs', function() {
|
||||
assert.deepEqual(webAnimationsMinifill.parseLength('calc(10px*3) '),
|
||||
{px: 30});
|
||||
assert.deepEqual(webAnimationsMinifill.parseLength('calc(10vmin + -5in) '),
|
||||
{vmin: 10, 'in': -5});
|
||||
assert.deepEqual(webAnimationsMinifill.parseLength('calc(5EM + 10px) '),
|
||||
{em: 5, px: 10});
|
||||
assert.deepEqual(webAnimationsMinifill.parseLength(' calc( 10px + 5em ) '),
|
||||
{px: 10, em: 5});
|
||||
assert.deepEqual(webAnimationsMinifill.parseLength('calc(5*(10px + 5em) - 5.25em * 6)'),
|
||||
{px: 50.0, em: -6.5});
|
||||
assert.deepEqual(webAnimationsMinifill.parseLength('calc((5px + 2px)*(1 + 2*(4 + 2*-5)) + 7px - (5em + 6vw/2)*4)'),
|
||||
{px: -70, em: -20, vw: -12});
|
||||
assert.deepEqual(webAnimationsMinifill.parseLength('calc(calc(5px) + calc(((3))) *calc(calc(10px)))'),
|
||||
{px: 35});
|
||||
});
|
||||
test('invalid lengths fail to parse', function() {
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('10'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('()'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('(10px)'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('(10px + 5em)'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('calc(10px + 5)'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('calc(10px+ 5em)'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('calc(10px +5em)'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('calc(10px * 5em)'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('(calc(10px + 5em))'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('calc(10px + 5em))'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('calc(10)'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('calccalc(10px)'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('calc(5 / 10px)'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('calc(10px / 0)'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('calc()'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseLength('ch'));
|
||||
});
|
||||
test('interpolate lengths and percents', function() {
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('left', '10px', '50px')(0.25), '20px');
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('left', '10%', '50%')(0.25), '20%');
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('left', '0px', '0.001px')(0.05), '0px');
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('left', '0px', '10px')(0.234), '2.340px');
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('left', '10px', '10em')(0.4), 'calc(6px + 4em)');
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('left', '10px', '10%')(0.4), 'calc(6px + 4%)');
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('left', 'calc(10px + 5em)', 'calc(20px + 35em)')(0.4), 'calc(14px + 17em)');
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('left', 'calc(10px + 5em)', 'calc(20% + 35em)')(0.4), 'calc(6px + 17em + 8%)');
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('left', 'calc(10px + 5vw)', 'calc(20% + 35em)')(0.4), 'calc(6px + 3vw + 8% + 14em)');
|
||||
});
|
||||
test('consume simple length values', function() {
|
||||
assert.isUndefined(webAnimationsMinifill.consumeLengthOrPercent('10px()'));
|
||||
assert.deepEqual(webAnimationsMinifill.consumeLengthOrPercent('10px,'),
|
||||
[{px: 10}, ',']);
|
||||
assert.deepEqual(webAnimationsMinifill.consumeLengthOrPercent('10px,20px'),
|
||||
[{px: 10}, ',20px']);
|
||||
assert.deepEqual(webAnimationsMinifill.consumeLengthOrPercent('0 blah'),
|
||||
[{px: 0}, ' blah']);
|
||||
});
|
||||
test('consume length calcs', function() {
|
||||
assert.deepEqual(webAnimationsMinifill.consumeLengthOrPercent('calc(10px)()'),
|
||||
[{px: 10}, '()']);
|
||||
assert.deepEqual(webAnimationsMinifill.consumeLengthOrPercent('calc((5px + 2px)*(1 + 2*(4 + 2*-5)) + 7px - (5em + 6vw/2)*4)blah'),
|
||||
[{px: -70, em: -20, vw: -12}, 'blah']);
|
||||
});
|
||||
test('consume fails on invalid input', function() {
|
||||
assert.isUndefined(webAnimationsMinifill.consumeLengthOrPercent('()'));
|
||||
assert.isUndefined(webAnimationsMinifill.consumeLengthOrPercent('(10px'));
|
||||
assert.isUndefined(webAnimationsMinifill.consumeLengthOrPercent('(10px)'));
|
||||
assert.isUndefined(webAnimationsMinifill.consumeLengthOrPercent('calc(10px,10px)'));
|
||||
});
|
||||
});
|
||||
76
rpg-docs/public/bower_components/web-animations-next/test/js/effect-callback.js
vendored
Normal file
76
rpg-docs/public/bower_components/web-animations-next/test/js/effect-callback.js
vendored
Normal file
@@ -0,0 +1,76 @@
|
||||
suite('effect-callback', function() {
|
||||
setup(function() {
|
||||
document.timeline._players = [];
|
||||
webAnimationsMinifill.timeline._players = [];
|
||||
});
|
||||
|
||||
test('animations starting in the future are not in effect', function() {
|
||||
var fractions = [];
|
||||
tick(100);
|
||||
var player = document.body.animate(function(fraction) { fractions.push(fraction); }, 1000);
|
||||
player.startTime = 1000;
|
||||
tick(200);
|
||||
tick(1000);
|
||||
tick(1100);
|
||||
assert.deepEqual(fractions, [null, 0, 0.1]);
|
||||
});
|
||||
|
||||
test('duration 0 players get sampled at least once', function() {
|
||||
var timeFraction;
|
||||
tick(0);
|
||||
var player = document.body.animate(function(t) {
|
||||
timeFraction = t;
|
||||
}, {duration: 0, fill: 'both'});
|
||||
tick(100);
|
||||
assert.equal(timeFraction, 1);
|
||||
assert.equal(isTicking(), false);
|
||||
});
|
||||
|
||||
test('players added during custom effect callbacks get updated in the same tick', function() {
|
||||
var player;
|
||||
var called = false;
|
||||
tick(0);
|
||||
document.body.animate(function() {
|
||||
player = document.body.animate(function() {
|
||||
called = true;
|
||||
}, 1);
|
||||
}, 2);
|
||||
tick(1);
|
||||
assert.isTrue(player.startTime >= 0);
|
||||
assert.isFalse(called);
|
||||
});
|
||||
|
||||
test('custom effect should be called after cancel', function() {
|
||||
var fractions = [];
|
||||
var player = document.body.animate(function(fraction) { fractions.push(fraction); }, 1000);
|
||||
tick(0);
|
||||
tick(500);
|
||||
player.cancel();
|
||||
tick(501);
|
||||
assert.deepEqual(fractions, [0, 0.5, null]);
|
||||
});
|
||||
|
||||
test('element.animate is given animation', function() {
|
||||
var callbackAnim;
|
||||
var player = document.body.animate(function(t, target, a) {
|
||||
callbackAnim = a;
|
||||
}, 100);
|
||||
tick(50);
|
||||
tick(150);
|
||||
assert.equal(isTicking(), false);
|
||||
assert(callbackAnim, 'callback should be set');
|
||||
assert.equal(callbackAnim.target, document.body);
|
||||
});
|
||||
|
||||
test('effect callback on animation is given source animation', function() {
|
||||
var callbackAnim;
|
||||
var anim = new Animation(document.body, function(t, target, a) {
|
||||
callbackAnim = a;
|
||||
}, 1000);
|
||||
var player = document.timeline.play(anim);
|
||||
tick(50);
|
||||
tick(550);
|
||||
assert.equal(player.currentTime, 500);
|
||||
assert.equal(callbackAnim, anim);
|
||||
});
|
||||
});
|
||||
498
rpg-docs/public/bower_components/web-animations-next/test/js/effect.js
vendored
Normal file
498
rpg-docs/public/bower_components/web-animations-next/test/js/effect.js
vendored
Normal file
@@ -0,0 +1,498 @@
|
||||
|
||||
function leftAsNumber(target) {
|
||||
var left = getComputedStyle(target).left;
|
||||
return Number(left.substring(0, left.length - 2));
|
||||
}
|
||||
|
||||
suite('effect', function() {
|
||||
// Test normalize.
|
||||
test('Normalize keyframes with all offsets specified but not sorted by offset. Some offsets are out of [0, 1] range.', function() {
|
||||
var normalizedKeyframes;
|
||||
assert.throws(function() {
|
||||
normalizedKeyframes = normalizeKeyframes([
|
||||
{offset: 0},
|
||||
{offset: -1},
|
||||
{offset: 1},
|
||||
{offset: 0.5},
|
||||
{offset: 2}
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
test('Normalize keyframes with some offsets not specified, and not sorted by offset.', function() {
|
||||
assert.throws(function() {
|
||||
normalizeKeyframes([
|
||||
{offset: 0.5},
|
||||
{offset: 0},
|
||||
{offset: 0.8},
|
||||
{},
|
||||
{offset: 1}
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
test('Normalize keyframes with some offsets not specified, and not sorted by offset. Out of order keyframes are out of [0, 1] range.', function() {
|
||||
assert.throws(function() {
|
||||
normalizeKeyframes([
|
||||
{offset: 0},
|
||||
{offset: -1},
|
||||
{offset: 0.5},
|
||||
{},
|
||||
{offset: 1}
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
test('Normalize keyframes with some offsets not specified, but sorted by offset where specified. Some offsets are out of [0, 1] range.', function() {
|
||||
var normalizedKeyframes;
|
||||
assert.doesNotThrow(function() {
|
||||
normalizedKeyframes = normalizeKeyframes([
|
||||
{offset: -1},
|
||||
{offset: 0},
|
||||
{offset: 0.5},
|
||||
{},
|
||||
{},
|
||||
{offset: 2}
|
||||
]);
|
||||
});
|
||||
assert.equal(normalizedKeyframes.length, 4);
|
||||
assert.closeTo(normalizedKeyframes[0].offset, 0, 0.001);
|
||||
assert.closeTo(normalizedKeyframes[1].offset, 0.5, 0.001);
|
||||
assert.closeTo(normalizedKeyframes[2].offset, 0.75, 0.001);
|
||||
assert.closeTo(normalizedKeyframes[3].offset, 1, 0.001);
|
||||
});
|
||||
|
||||
test('Normalize keyframes with some offsets not specified, but sorted by offset where specified. All specified offsets in [0, 1] range.', function() {
|
||||
var normalizedKeyframes;
|
||||
assert.doesNotThrow(function() {
|
||||
normalizedKeyframes = normalizeKeyframes([
|
||||
{left: '0px', offset: 0},
|
||||
{left: '10px'},
|
||||
{left: '20px'},
|
||||
{left: '30px', offset: 0.6},
|
||||
{left: '40px'},
|
||||
{left: '50px'}
|
||||
]);
|
||||
});
|
||||
assert.equal(normalizedKeyframes.length, 6);
|
||||
assert.closeTo(normalizedKeyframes[0].offset, 0, 0.001);
|
||||
assert.equal(normalizedKeyframes[0].left, '0px');
|
||||
assert.closeTo(normalizedKeyframes[1].offset, 0.2, 0.001);
|
||||
assert.equal(normalizedKeyframes[1].left, '10px');
|
||||
assert.closeTo(normalizedKeyframes[2].offset, 0.4, 0.001);
|
||||
assert.equal(normalizedKeyframes[2].left, '20px');
|
||||
assert.closeTo(normalizedKeyframes[3].offset, 0.6, 0.001);
|
||||
assert.equal(normalizedKeyframes[3].left, '30px');
|
||||
assert.closeTo(normalizedKeyframes[4].offset, 0.8, 0.001);
|
||||
assert.equal(normalizedKeyframes[4].left, '40px');
|
||||
assert.closeTo(normalizedKeyframes[5].offset, 1, 0.001);
|
||||
assert.equal(normalizedKeyframes[5].left, '50px');
|
||||
});
|
||||
|
||||
test('Normalize keyframes with no offsets specified.', function() {
|
||||
var normalizedKeyframes;
|
||||
assert.doesNotThrow(function() {
|
||||
normalizedKeyframes = normalizeKeyframes([
|
||||
{left: '0px'},
|
||||
{left: '10px'},
|
||||
{left: '20px'},
|
||||
{left: '30px'},
|
||||
{left: '40px'}
|
||||
]);
|
||||
});
|
||||
assert.equal(normalizedKeyframes.length, 5);
|
||||
assert.closeTo(normalizedKeyframes[0].offset, 0, 0.001);
|
||||
assert.equal(normalizedKeyframes[0].left, '0px');
|
||||
assert.closeTo(normalizedKeyframes[1].offset, 0.25, 0.001);
|
||||
assert.equal(normalizedKeyframes[1].left, '10px');
|
||||
assert.closeTo(normalizedKeyframes[2].offset, 0.5, 0.001);
|
||||
assert.equal(normalizedKeyframes[2].left, '20px');
|
||||
assert.closeTo(normalizedKeyframes[3].offset, 0.75, 0.001);
|
||||
assert.equal(normalizedKeyframes[3].left, '30px');
|
||||
assert.closeTo(normalizedKeyframes[4].offset, 1, 0.001);
|
||||
assert.equal(normalizedKeyframes[4].left, '40px');
|
||||
});
|
||||
|
||||
test('Normalize keyframes where a keyframe has an offset that is not a number.', function() {
|
||||
assert.throws(function() {
|
||||
normalizeKeyframes([
|
||||
{offset: 0},
|
||||
{offset: 'one'},
|
||||
{offset: 1}
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
test('Normalize keyframes where a keyframe has an offset that is a numeric string.', function() {
|
||||
var normalizedKeyframes;
|
||||
assert.doesNotThrow(function() {
|
||||
normalizedKeyframes = normalizeKeyframes([
|
||||
{offset: 0},
|
||||
{offset: '0.5'},
|
||||
{offset: 1}
|
||||
]);
|
||||
});
|
||||
assert.equal(normalizedKeyframes.length, 3);
|
||||
assert.closeTo(normalizedKeyframes[0].offset, 0, 0.001);
|
||||
assert.closeTo(normalizedKeyframes[1].offset, 0.5, 0.001);
|
||||
assert.closeTo(normalizedKeyframes[2].offset, 1, 0.001);
|
||||
});
|
||||
|
||||
test('Normalize keyframes where some keyframes have easings.', function() {
|
||||
var normalizedKeyframes;
|
||||
assert.doesNotThrow(function() {
|
||||
normalizedKeyframes = normalizeKeyframes([
|
||||
{left: '0px', easing: 'ease-in'},
|
||||
{left: '10px'},
|
||||
{left: '0px'}
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
test('Normalize keyframes with invalid specified easing.', function() {
|
||||
var normalizedKeyframes;
|
||||
assert.doesNotThrow(function() {
|
||||
normalizedKeyframes = normalizeKeyframes([
|
||||
{left: '0px', easing: 'easy-peasy'},
|
||||
{left: '10px'},
|
||||
{left: '0px'}
|
||||
]);
|
||||
});
|
||||
assert.equal('' + normalizedKeyframes[0].easing, 'function (x) { return x; }');
|
||||
});
|
||||
|
||||
test('Normalize keyframes where some properties are given non-string, non-number values.', function() {
|
||||
var normalizedKeyframes;
|
||||
assert.doesNotThrow(function() {
|
||||
normalizedKeyframes = normalizeKeyframes([
|
||||
{left: {}},
|
||||
{left: '100px'},
|
||||
{left: []}
|
||||
]);
|
||||
});
|
||||
assert(normalizedKeyframes.length, 3);
|
||||
assert.equal(normalizedKeyframes[0].left, '[object Object]');
|
||||
assert.equal(normalizedKeyframes[1].left, '100px');
|
||||
assert.equal(normalizedKeyframes[2].left, '');
|
||||
});
|
||||
|
||||
test('Normalize input that is not an array.', function() {
|
||||
assert.throws(function() {
|
||||
normalizeKeyframes(10);
|
||||
});
|
||||
});
|
||||
|
||||
test('Normalize an empty array.', function() {
|
||||
var normalizedKeyframes;
|
||||
assert.doesNotThrow(function() {
|
||||
normalizedKeyframes = normalizeKeyframes([]);
|
||||
});
|
||||
assert.deepEqual(normalizedKeyframes, []);
|
||||
});
|
||||
|
||||
test('Normalize null.', function() {
|
||||
var normalizedKeyframes;
|
||||
assert.doesNotThrow(function() {
|
||||
normalizedKeyframes = normalizeKeyframes(null);
|
||||
});
|
||||
assert.deepEqual(normalizedKeyframes, []);
|
||||
});
|
||||
|
||||
test('Normalize shorthands.', function() {
|
||||
var normalizedKeyframes;
|
||||
assert.doesNotThrow(function() {
|
||||
normalizedKeyframes = normalizeKeyframes([{borderColor: 'purple green orange blue'}, {borderColor: 'red'}]);
|
||||
});
|
||||
assert.equal(normalizedKeyframes[0].borderTopColor, 'purple');
|
||||
assert.equal(normalizedKeyframes[0].borderRightColor, 'green');
|
||||
assert.equal(normalizedKeyframes[0].borderBottomColor, 'orange');
|
||||
assert.equal(normalizedKeyframes[0].borderLeftColor, 'blue');
|
||||
assert.equal(normalizedKeyframes[1].borderTopColor, 'red');
|
||||
assert.equal(normalizedKeyframes[1].borderRightColor, 'red');
|
||||
assert.equal(normalizedKeyframes[1].borderBottomColor, 'red');
|
||||
assert.equal(normalizedKeyframes[1].borderLeftColor, 'red');
|
||||
|
||||
assert.doesNotThrow(function() {
|
||||
normalizedKeyframes = normalizeKeyframes([{font: 'italic bold 20pt / 200% serif'}, {font: 'italic normal bold 50pt serif'}]);
|
||||
});
|
||||
assert.equal(normalizedKeyframes[0].fontStyle, 'italic');
|
||||
assert.equal(normalizedKeyframes[0].fontVariant, 'normal');
|
||||
assert.equal(normalizedKeyframes[0].fontWeight, '700');
|
||||
assert.equal(normalizedKeyframes[0].fontSize, '20pt');
|
||||
assert.equal(normalizedKeyframes[0].lineHeight, '200%');
|
||||
assert.equal(normalizedKeyframes[0].fontFamily, 'serif');
|
||||
assert.equal(normalizedKeyframes[1].fontStyle, 'italic');
|
||||
assert.equal(normalizedKeyframes[1].fontVariant, 'normal');
|
||||
assert.equal(normalizedKeyframes[1].fontWeight, '700');
|
||||
assert.equal(normalizedKeyframes[1].fontSize, '50pt');
|
||||
assert.equal(normalizedKeyframes[1].lineHeight, 'normal');
|
||||
assert.equal(normalizedKeyframes[1].fontFamily, 'serif');
|
||||
});
|
||||
|
||||
// Test makePropertySpecificKeyframeGroups.
|
||||
test('Make property specific keyframe groups for a simple effect with one property.', function() {
|
||||
var groups;
|
||||
assert.doesNotThrow(function() {
|
||||
groups = makePropertySpecificKeyframeGroups(normalizeKeyframes([
|
||||
{left: '0px'},
|
||||
{left: '200px', offset: 0.3},
|
||||
{left: '0px'}
|
||||
]));
|
||||
});
|
||||
assert.equal(Object.getOwnPropertyNames(groups).length, 1);
|
||||
assert.equal(groups.left.length, 3);
|
||||
assert.closeTo(groups.left[0].offset, 0, 0.001);
|
||||
assert.equal(groups.left[0].value, '0px');
|
||||
assert.closeTo(groups.left[1].offset, 0.3, 0.001);
|
||||
assert.equal(groups.left[1].value, '200px');
|
||||
assert.closeTo(groups.left[2].offset, 1, 0.001);
|
||||
assert.equal(groups.left[2].value, '0px');
|
||||
});
|
||||
|
||||
test('Make property specific keyframe groups for an effect with three properties.', function() {
|
||||
var groups;
|
||||
assert.doesNotThrow(function() {
|
||||
groups = makePropertySpecificKeyframeGroups(normalizeKeyframes([
|
||||
{left: '0px', top: '200px', opacity: 1},
|
||||
{left: '200px', top: '0px'},
|
||||
{left: '0px', top: '200px', opacity: 0},
|
||||
{top: '0px', opacity: 1},
|
||||
{left: '200px', top: '200px', opacity: 0}
|
||||
]));
|
||||
});
|
||||
assert.equal(Object.getOwnPropertyNames(groups).length, 3);
|
||||
|
||||
assert.equal(groups.left.length, 4);
|
||||
assert.closeTo(groups.left[0].offset, 0, 0.001);
|
||||
assert.equal(groups.left[0].value, '0px');
|
||||
assert.closeTo(groups.left[1].offset, 0.25, 0.001);
|
||||
assert.equal(groups.left[1].value, '200px');
|
||||
assert.closeTo(groups.left[2].offset, 0.5, 0.001);
|
||||
assert.equal(groups.left[2].value, '0px');
|
||||
assert.closeTo(groups.left[3].offset, 1, 0.001);
|
||||
assert.equal(groups.left[3].value, '200px');
|
||||
|
||||
assert.equal(groups.top.length, 5);
|
||||
assert.closeTo(groups.top[0].offset, 0, 0.001);
|
||||
assert.equal(groups.top[0].value, '200px');
|
||||
assert.closeTo(groups.top[1].offset, 0.25, 0.001);
|
||||
assert.equal(groups.top[1].value, '0px');
|
||||
assert.closeTo(groups.top[2].offset, 0.5, 0.001);
|
||||
assert.equal(groups.top[2].value, '200px');
|
||||
assert.closeTo(groups.top[3].offset, 0.75, 0.001);
|
||||
assert.equal(groups.top[3].value, '0px');
|
||||
assert.closeTo(groups.top[4].offset, 1, 0.001);
|
||||
assert.equal(groups.top[4].value, '200px');
|
||||
|
||||
assert.equal(groups.opacity.length, 4);
|
||||
assert.closeTo(groups.opacity[0].offset, 0, 0.001);
|
||||
assert.equal(groups.opacity[0].value, 1);
|
||||
assert.closeTo(groups.opacity[1].offset, 0.5, 0.001);
|
||||
assert.equal(groups.opacity[1].value, 0);
|
||||
assert.closeTo(groups.opacity[2].offset, 0.75, 0.001);
|
||||
assert.equal(groups.opacity[2].value, 1);
|
||||
assert.closeTo(groups.opacity[3].offset, 1, 0.001);
|
||||
assert.equal(groups.opacity[3].value, 0);
|
||||
});
|
||||
|
||||
test('Make property specific keyframes when the offset of the last keyframe is specified but not equal to 1.', function() {
|
||||
assert.throws(function() {
|
||||
makePropertySpecificKeyframeGroups(normalizeKeyframes([
|
||||
{left: '0px', offset: 0},
|
||||
{left: '20px'},
|
||||
{left: '30px', offset: 0.9}
|
||||
]));
|
||||
});
|
||||
});
|
||||
|
||||
test('Make property specific keyframes when no properties are animated, and the offset of the last keyframe is specified but not equal to 1.', function() {
|
||||
var groups;
|
||||
assert.doesNotThrow(function() {
|
||||
groups = makePropertySpecificKeyframeGroups(normalizeKeyframes([
|
||||
{offset: 0},
|
||||
{},
|
||||
{offset: 0.9}
|
||||
]));
|
||||
});
|
||||
assert.equal(Object.getOwnPropertyNames(groups).length, 0);
|
||||
});
|
||||
|
||||
test('Make property specific keyframes when a property appears in some keyframes, but not in the last keyframe.', function() {
|
||||
assert.throws(function() {
|
||||
makePropertySpecificKeyframeGroups(normalizeKeyframes([
|
||||
{left: '0px', top: '0px'},
|
||||
{left: '10px', top: '10px'},
|
||||
{top: '20px'}
|
||||
]));
|
||||
});
|
||||
});
|
||||
|
||||
test('Make property specific keyframes when a property appears in some keyframes, but not in the first keyframe.', function() {
|
||||
assert.throws(function() {
|
||||
makePropertySpecificKeyframeGroups(normalizeKeyframes([
|
||||
{left: '0px'},
|
||||
{left: '10px', top: '10px'},
|
||||
{left: '20px', top: '20px'}
|
||||
]));
|
||||
});
|
||||
});
|
||||
|
||||
test('Make property specific keyframes where two properties are animated. One property in a keyframe with offset 1. One property in the last keyframe, with no offset.', function() {
|
||||
var groups;
|
||||
assert.doesNotThrow(function() {
|
||||
groups = makePropertySpecificKeyframeGroups(normalizeKeyframes([
|
||||
{left: '0px', top: '0px', offset: 0},
|
||||
{left: '20px', offset: 1},
|
||||
{top: '20px'}
|
||||
]));
|
||||
});
|
||||
assert.equal(Object.getOwnPropertyNames(groups).length, 2);
|
||||
});
|
||||
|
||||
test('Make property specific keyframes where two properties are animated. One property in a keyframe with offset 0. One property in the first keyframe, with no offset.', function() {
|
||||
var groups;
|
||||
assert.doesNotThrow(function() {
|
||||
groups = makePropertySpecificKeyframeGroups(normalizeKeyframes([
|
||||
{top: '0px'},
|
||||
{left: '0px', offset: 0},
|
||||
{left: '20px', top: '20px', offset: 1}
|
||||
]));
|
||||
});
|
||||
assert.equal(Object.getOwnPropertyNames(groups).length, 2);
|
||||
});
|
||||
|
||||
// Test per-keyframe easings.
|
||||
test('Apply keyframe easings.', function() {
|
||||
var target1 = document.createElement('div');
|
||||
var target2 = document.createElement('div');
|
||||
target1.style.position = 'absolute';
|
||||
target2.style.position = 'absolute';
|
||||
document.body.appendChild(target1);
|
||||
document.body.appendChild(target2);
|
||||
|
||||
var player1 = target1.animate(
|
||||
[
|
||||
{left: '0px'},
|
||||
{left: '50px', offset: 0.25},
|
||||
{left: '0px'}
|
||||
],
|
||||
{duration: 4000, fill: 'forwards'});
|
||||
var player2 = target2.animate(
|
||||
[
|
||||
{left: '0px', easing: 'ease-in'},
|
||||
{left: '50px', offset: 0.25},
|
||||
{left: '0px'}
|
||||
],
|
||||
{duration: 4000, fill: 'forwards'});
|
||||
|
||||
tick(0);
|
||||
assert.equal(leftAsNumber(target1), 0);
|
||||
assert.equal(leftAsNumber(target2), 0);
|
||||
tick(250);
|
||||
assert.closeTo(leftAsNumber(target1), 12.5, 1);
|
||||
assert.closeTo(leftAsNumber(target2), 4.65, 1);
|
||||
tick(500);
|
||||
assert.closeTo(leftAsNumber(target1), 25, 1);
|
||||
assert.closeTo(leftAsNumber(target2), 15.25, 1);
|
||||
tick(1000);
|
||||
assert.equal(leftAsNumber(target1), 50);
|
||||
assert.equal(leftAsNumber(target2), 50);
|
||||
|
||||
tick(2500);
|
||||
assert.equal(leftAsNumber(target1), 25);
|
||||
assert.equal(leftAsNumber(target2), 25);
|
||||
tick(4000);
|
||||
assert.equal(leftAsNumber(target1), 0);
|
||||
assert.equal(leftAsNumber(target2), 0);
|
||||
});
|
||||
|
||||
// Test makeInterpolations.
|
||||
test('Make interpolations for a simple effect with one property.', function() {
|
||||
var interpolations;
|
||||
assert.doesNotThrow(function() {
|
||||
interpolations = makeInterpolations(makePropertySpecificKeyframeGroups(normalizeKeyframes([
|
||||
{left: '0px'},
|
||||
{left: '200px', offset: 0.3},
|
||||
{left: '0px'}
|
||||
])));
|
||||
});
|
||||
assert.equal(interpolations.length, 2);
|
||||
|
||||
assert.closeTo(interpolations[0].startTime, 0, 0.001);
|
||||
assert.closeTo(interpolations[0].endTime, 0.3, 0.001);
|
||||
assert.equal(interpolations[0].property, 'left');
|
||||
assert.equal(typeof interpolations[0].interpolation, 'function');
|
||||
|
||||
assert.closeTo(interpolations[1].startTime, 0.3, 0.001);
|
||||
assert.closeTo(interpolations[1].endTime, 1, 0.001);
|
||||
assert.equal(interpolations[1].property, 'left');
|
||||
assert.equal(typeof interpolations[1].interpolation, 'function');
|
||||
});
|
||||
});
|
||||
|
||||
suite('effect-convertEffectInput', function() {
|
||||
setup(function() {
|
||||
this.target = document.createElement('div');
|
||||
this.target.style.position = 'absolute';
|
||||
document.documentElement.appendChild(this.target);
|
||||
});
|
||||
teardown(function() {
|
||||
if (this.target.parent)
|
||||
this.target.removeChild(this.target);
|
||||
});
|
||||
|
||||
test('Convert effect input for a simple effect with one property.', function() {
|
||||
var effectFunction;
|
||||
assert.doesNotThrow(function() {
|
||||
effectFunction = webAnimationsMinifill.convertEffectInput([
|
||||
{left: '0px'},
|
||||
{left: '200px', offset: 0.3},
|
||||
{left: '100px'}
|
||||
]);
|
||||
});
|
||||
|
||||
effectFunction(this.target, 0);
|
||||
assert.closeTo(leftAsNumber(this.target), 0, 0.001);
|
||||
effectFunction(this.target, 0.075);
|
||||
assert.closeTo(leftAsNumber(this.target), 50, 0.001);
|
||||
effectFunction(this.target, 0.15);
|
||||
assert.closeTo(leftAsNumber(this.target), 100, 0.001);
|
||||
effectFunction(this.target, 0.65);
|
||||
assert.closeTo(leftAsNumber(this.target), 150, 0.001);
|
||||
effectFunction(this.target, 1);
|
||||
assert.closeTo(leftAsNumber(this.target), 100, 0.001);
|
||||
effectFunction(this.target, 2);
|
||||
assert.closeTo(leftAsNumber(this.target), -42.856, 0.01);
|
||||
});
|
||||
|
||||
test('Convert effect input where one property is animated and the property has two keyframes at offset 1.', function() {
|
||||
var effectFunction;
|
||||
assert.doesNotThrow(function() {
|
||||
effectFunction = webAnimationsMinifill.convertEffectInput([
|
||||
{left: '0px', offset: 0},
|
||||
{left: '20px', offset: 1},
|
||||
{left: '30px'}
|
||||
]);
|
||||
});
|
||||
effectFunction(this.target, 1);
|
||||
assert.equal(getComputedStyle(this.target).left, '30px');
|
||||
effectFunction(this.target, 2);
|
||||
assert.equal(getComputedStyle(this.target).left, '30px');
|
||||
});
|
||||
|
||||
test('Convert effect input and apply effect at fraction null.', function() {
|
||||
var effectFunction;
|
||||
var underlying = getComputedStyle(this.target).left;
|
||||
assert.doesNotThrow(function() {
|
||||
effectFunction = webAnimationsMinifill.convertEffectInput([
|
||||
{left: '0px'},
|
||||
{left: '100px'}
|
||||
]);
|
||||
});
|
||||
|
||||
effectFunction(this.target, 1);
|
||||
assert.equal(getComputedStyle(this.target).left, '100px');
|
||||
effectFunction(this.target, null);
|
||||
assert.equal(getComputedStyle(this.target).left, underlying);
|
||||
});
|
||||
});
|
||||
26
rpg-docs/public/bower_components/web-animations-next/test/js/group-constructors.js
vendored
Normal file
26
rpg-docs/public/bower_components/web-animations-next/test/js/group-constructors.js
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
suite('group-constructors', function() {
|
||||
setup(function() {
|
||||
document.timeline._players = [];
|
||||
});
|
||||
|
||||
function simpleAnimationGroup() {
|
||||
return new AnimationSequence([
|
||||
new Animation(document.body, [], 2000),
|
||||
new AnimationGroup([
|
||||
new Animation(document.body, [], 2000),
|
||||
new Animation(document.body, [], 1000)
|
||||
])
|
||||
]);
|
||||
}
|
||||
|
||||
test('player getter for children in groups, and __internalPlayer, work as expected', function() {
|
||||
var p = document.timeline.play(simpleAnimationGroup());
|
||||
tick(0);
|
||||
assert.equal(p.source.player, p);
|
||||
assert.equal(p._childPlayers[0].source.player, p);
|
||||
assert.equal(p._childPlayers[1].source.player, p);
|
||||
tick(2100);
|
||||
assert.equal(p._childPlayers[1]._childPlayers[0].source.player, p);
|
||||
assert.equal(p._childPlayers[1]._childPlayers[1].source.player, p);
|
||||
});
|
||||
});
|
||||
87
rpg-docs/public/bower_components/web-animations-next/test/js/group-player-finish-event.js
vendored
Normal file
87
rpg-docs/public/bower_components/web-animations-next/test/js/group-player-finish-event.js
vendored
Normal file
@@ -0,0 +1,87 @@
|
||||
suite('group-player-finish-event', function() {
|
||||
setup(function() {
|
||||
document.timeline.currentTime = undefined;
|
||||
this.element = document.createElement('div');
|
||||
document.documentElement.appendChild(this.element);
|
||||
var animation = new AnimationSequence([
|
||||
new Animation(this.element, [], 500),
|
||||
new AnimationGroup([
|
||||
new Animation(this.element, [], 250),
|
||||
new Animation(this.element, [], 500),
|
||||
]),
|
||||
]);
|
||||
this.player = document.timeline.play(animation, 1000);
|
||||
});
|
||||
teardown(function() {
|
||||
if (this.element.parent)
|
||||
this.element.removeChild(this.element);
|
||||
});
|
||||
|
||||
test('fire when player completes', function(done) {
|
||||
var ready = false;
|
||||
var fired = false;
|
||||
var player = this.player;
|
||||
player.onfinish = function(event) {
|
||||
assert(ready, 'must not be called synchronously');
|
||||
assert.equal(this, player);
|
||||
assert.equal(event.target, player);
|
||||
assert.equal(event.currentTime, 1000);
|
||||
assert.equal(event.timelineTime, 1100);
|
||||
if (fired)
|
||||
assert(false, 'must not get fired twice');
|
||||
fired = true;
|
||||
done();
|
||||
};
|
||||
tick(100);
|
||||
tick(1100);
|
||||
tick(2100);
|
||||
ready = true;
|
||||
});
|
||||
|
||||
test('fire when reversed player completes', function(done) {
|
||||
this.player.onfinish = function(event) {
|
||||
assert.equal(event.currentTime, 0);
|
||||
assert.equal(event.timelineTime, 1001);
|
||||
done();
|
||||
};
|
||||
tick(0);
|
||||
tick(500);
|
||||
this.player.reverse();
|
||||
tick(501);
|
||||
tick(1001);
|
||||
});
|
||||
|
||||
test('fire after player is cancelled', function(done) {
|
||||
this.player.onfinish = function(event) {
|
||||
assert.equal(event.currentTime, 0);
|
||||
assert.equal(event.timelineTime, 1, 'event must be fired on next sample');
|
||||
done();
|
||||
};
|
||||
tick(0);
|
||||
this.player.cancel();
|
||||
tick(1);
|
||||
});
|
||||
|
||||
test('multiple event listeners', function(done) {
|
||||
var count = 0;
|
||||
function createHandler(expectedCount) {
|
||||
return function() {
|
||||
count++;
|
||||
assert.equal(count, expectedCount);
|
||||
};
|
||||
}
|
||||
var toRemove = createHandler(0);
|
||||
this.player.addEventListener('finish', createHandler(1));
|
||||
this.player.addEventListener('finish', createHandler(2));
|
||||
this.player.addEventListener('finish', toRemove);
|
||||
this.player.addEventListener('finish', createHandler(3));
|
||||
this.player.removeEventListener('finish', toRemove);
|
||||
this.player.onfinish = function() {
|
||||
assert.equal(count, 3);
|
||||
done();
|
||||
};
|
||||
tick(0);
|
||||
this.player.cancel();
|
||||
tick(1000);
|
||||
});
|
||||
});
|
||||
917
rpg-docs/public/bower_components/web-animations-next/test/js/group-player.js
vendored
Normal file
917
rpg-docs/public/bower_components/web-animations-next/test/js/group-player.js
vendored
Normal file
@@ -0,0 +1,917 @@
|
||||
suite('group-player', function() {
|
||||
setup(function() {
|
||||
document.timeline._players = [];
|
||||
webAnimationsMinifill.timeline._players = [];
|
||||
this.elements = [];
|
||||
|
||||
var animationMargin = function(target) {
|
||||
return new Animation(
|
||||
target,
|
||||
[
|
||||
{marginLeft: '0px'},
|
||||
{marginLeft: '100px'}
|
||||
],
|
||||
500);
|
||||
};
|
||||
var animationColor = function(target) {
|
||||
return new Animation(
|
||||
target,
|
||||
[
|
||||
{backgroundColor: 'black'},
|
||||
{backgroundColor: 'white'}
|
||||
],
|
||||
500);
|
||||
};
|
||||
var sequenceEmpty = function() {
|
||||
return new AnimationSequence();
|
||||
};
|
||||
var groupEmpty = function() {
|
||||
return new AnimationGroup();
|
||||
};
|
||||
var sequenceWithEffects = function(target) {
|
||||
return new AnimationSequence(
|
||||
[
|
||||
animationMargin(target),
|
||||
animationColor(target)
|
||||
]);
|
||||
};
|
||||
var groupWithEffects = function(target) {
|
||||
return new AnimationGroup(
|
||||
[
|
||||
animationMargin(target),
|
||||
animationColor(target)
|
||||
]);
|
||||
};
|
||||
|
||||
var seqEmpty_source = sequenceEmpty();
|
||||
|
||||
var seqSimple_target = document.createElement('div');
|
||||
var seqSimple_source = sequenceWithEffects(seqSimple_target);
|
||||
|
||||
var seqWithSeq_target = document.createElement('div');
|
||||
this.elements.push(seqWithSeq_target);
|
||||
var seqWithSeq_source = new AnimationSequence(
|
||||
[
|
||||
animationMargin(seqWithSeq_target),
|
||||
animationColor(seqWithSeq_target),
|
||||
sequenceWithEffects(seqWithSeq_target)
|
||||
]);
|
||||
|
||||
var seqWithGroup_target = document.createElement('div');
|
||||
this.elements.push(seqWithGroup_target);
|
||||
var seqWithGroup_source = new AnimationSequence(
|
||||
[
|
||||
animationMargin(seqWithGroup_target),
|
||||
animationColor(seqWithGroup_target),
|
||||
groupWithEffects(seqWithGroup_target)
|
||||
]);
|
||||
|
||||
var seqWithEmptyGroup_source = new AnimationSequence([groupEmpty()]);
|
||||
var seqWithEmptySeq_source = new AnimationSequence([sequenceEmpty()]);
|
||||
|
||||
var groupEmpty_source = groupEmpty();
|
||||
|
||||
var groupSimple_target = document.createElement('div');
|
||||
var groupSimple_source = groupWithEffects(groupSimple_target);
|
||||
|
||||
var groupWithSeq_target = document.createElement('div');
|
||||
this.elements.push(groupWithSeq_target);
|
||||
var groupWithSeq_source = new AnimationGroup(
|
||||
[
|
||||
animationMargin(groupWithSeq_target),
|
||||
animationColor(groupWithSeq_target),
|
||||
sequenceWithEffects(groupWithSeq_target)
|
||||
]);
|
||||
|
||||
var groupWithGroup_target = document.createElement('div');
|
||||
this.elements.push(groupWithGroup_target);
|
||||
var groupWithGroup_source = new AnimationGroup(
|
||||
[
|
||||
animationMargin(groupWithGroup_target),
|
||||
animationColor(groupWithGroup_target),
|
||||
groupWithEffects(groupWithGroup_target)
|
||||
]);
|
||||
|
||||
var groupWithEmptyGroup_source = new AnimationGroup([groupEmpty()]);
|
||||
var groupWithEmptySeq_source = new AnimationGroup([sequenceEmpty()]);
|
||||
|
||||
this.seqEmpty_source = seqEmpty_source;
|
||||
this.seqSimple_source = seqSimple_source;
|
||||
this.seqWithSeq_source = seqWithSeq_source;
|
||||
this.seqWithGroup_source = seqWithGroup_source;
|
||||
this.seqWithEmptyGroup_source = seqWithEmptyGroup_source;
|
||||
this.seqWithEmptySeq_source = seqWithEmptySeq_source;
|
||||
|
||||
this.groupEmpty_source = groupEmpty_source;
|
||||
this.groupSimple_source = groupSimple_source;
|
||||
this.groupWithSeq_source = groupWithSeq_source;
|
||||
this.groupWithGroup_source = groupWithGroup_source;
|
||||
this.groupWithEmptyGroup_source = groupWithEmptyGroup_source;
|
||||
this.groupWithEmptySeq_source = groupWithEmptySeq_source;
|
||||
|
||||
this.staticAnimation = function(target, value, duration) {
|
||||
var animation = new Animation(target, [{marginLeft: value}, {marginLeft: value}], duration);
|
||||
animation.testValue = value;
|
||||
return animation;
|
||||
};
|
||||
// The following animation structure looks like:
|
||||
// 44444
|
||||
// 11
|
||||
// 33
|
||||
// 2
|
||||
// 0
|
||||
this.complexTarget = document.createElement('div');
|
||||
this.elements.push(this.complexTarget);
|
||||
this.complexSource = new AnimationGroup([
|
||||
this.staticAnimation(this.complexTarget, '4px', 5),
|
||||
new AnimationSequence([
|
||||
this.staticAnimation(this.complexTarget, '1px', 2),
|
||||
new AnimationGroup([
|
||||
this.staticAnimation(this.complexTarget, '3px', 2),
|
||||
this.staticAnimation(this.complexTarget, '2px', 1),
|
||||
]),
|
||||
]),
|
||||
this.staticAnimation(this.complexTarget, '0px', 1),
|
||||
]);
|
||||
|
||||
this.target = document.createElement('div');
|
||||
this.elements.push(this.target);
|
||||
|
||||
for (var i = 0; i < this.elements.length; i++)
|
||||
document.documentElement.appendChild(this.elements[i]);
|
||||
});
|
||||
|
||||
teardown(function() {
|
||||
for (var i = 0; i < this.elements.length; i++) {
|
||||
if (this.elements[i].parent)
|
||||
this.elements[i].parent.removeChild(this.elements[i]);
|
||||
}
|
||||
});
|
||||
|
||||
function simpleAnimationGroup() {
|
||||
return new AnimationGroup([new Animation(document.body, [], 2000), new Animation(document.body, [], 1000), new Animation(document.body, [], 3000)]);
|
||||
}
|
||||
|
||||
function simpleAnimationSequence() {
|
||||
return new AnimationSequence([new Animation(document.body, [], 2000), new Animation(document.body, [], 1000), new Animation(document.body, [], 3000)]);
|
||||
}
|
||||
|
||||
// FIXME: Remove _startOffset.
|
||||
// playerState is [startTime, currentTime, _startOffset?, offset?]
|
||||
// innerPlayerStates is a nested array tree of playerStates e.g. [[0, 0], [[1, -1], [2, -2]]]
|
||||
function checkTimes(player, playerState, innerPlayerStates, description) {
|
||||
description = description ? (description + ' ') : '';
|
||||
_checkTimes(player, playerState, 0, description + 'top player');
|
||||
_checkTimes(player, innerPlayerStates, 0, description + 'inner player');
|
||||
}
|
||||
|
||||
function _checkTimes(player, timingList, index, trace) {
|
||||
assert.isDefined(player, trace + ' exists');
|
||||
if (timingList.length == 0) {
|
||||
assert.equal(player._childPlayers.length, index, trace + ' no remaining players');
|
||||
return;
|
||||
}
|
||||
if (timingList[0] === null || typeof timingList[0] == 'number') {
|
||||
assert.equal(player.startTime, timingList[0], trace + ' startTime');
|
||||
assert.equal(player.currentTime, timingList[1], trace + ' currentTime');
|
||||
} else {
|
||||
_checkTimes(player._childPlayers[index], timingList[0], 0, trace + ' ' + index);
|
||||
_checkTimes(player, timingList.slice(1), index + 1, trace);
|
||||
}
|
||||
}
|
||||
|
||||
test('playing an animationGroup works as expected', function() {
|
||||
tick(90);
|
||||
var p = document.timeline.play(simpleAnimationGroup());
|
||||
checkTimes(p, [null, 0], []);
|
||||
tick(100);
|
||||
checkTimes(p, [100, 0], [[100, 0], [100, 0], [100, 0]]);
|
||||
tick(300);
|
||||
checkTimes(p, [100, 200], [[100, 200], [100, 200], [100, 200]]);
|
||||
tick(1200);
|
||||
checkTimes(p, [100, 1100], [[100, 1100], [100, 1000], [100, 1100]]);
|
||||
tick(2200);
|
||||
checkTimes(p, [100, 2100], [[100, 2000], [100, 1000], [100, 2100]]);
|
||||
tick(3200);
|
||||
checkTimes(p, [100, 3000], [[100, 2000], [100, 1000], [100, 3000]]);
|
||||
});
|
||||
|
||||
test('can seek an animationGroup', function() {
|
||||
tick(90);
|
||||
var p = document.timeline.play(simpleAnimationGroup());
|
||||
tick(100);
|
||||
checkTimes(p, [100, 0], [[100, 0], [100, 0], [100, 0]]);
|
||||
p.currentTime = 200;
|
||||
checkTimes(p, [-100, 200], [[-100, 200], [-100, 200], [-100, 200]]);
|
||||
p.currentTime = 1100;
|
||||
checkTimes(p, [-1000, 1100], [[-1000, 1100], [-1000, 1100], [-1000, 1100]]);
|
||||
p.currentTime = 2100;
|
||||
checkTimes(p, [-2000, 2100], [[-2000, 2100], [-2000, 2100], [-2000, 2100]]);
|
||||
p.currentTime = 3100;
|
||||
checkTimes(p, [-3000, 3100], [[-3000, 3100], [-3000, 3100], [-3000, 3100]]);
|
||||
});
|
||||
|
||||
test('can startTime seek an animationGroup', function() {
|
||||
tick(90);
|
||||
var p = document.timeline.play(simpleAnimationGroup());
|
||||
tick(100);
|
||||
checkTimes(p, [100, 0], [[100, 0], [100, 0], [100, 0]]);
|
||||
p.startTime = -100;
|
||||
checkTimes(p, [-100, 200], [[-100, 200], [-100, 200], [-100, 200]]);
|
||||
p.startTime = -1000;
|
||||
checkTimes(p, [-1000, 1100], [[-1000, 1100], [-1000, 1000], [-1000, 1100]]);
|
||||
p.startTime = -2000;
|
||||
checkTimes(p, [-2000, 2100], [[-2000, 2000], [-2000, 1000], [-2000, 2100]]);
|
||||
p.startTime = -3000;
|
||||
checkTimes(p, [-3000, 3000], [[-3000, 2000], [-3000, 1000], [-3000, 3000]]);
|
||||
});
|
||||
|
||||
test('playing an animationSequence works as expected', function() {
|
||||
tick(100);
|
||||
var p = document.timeline.play(simpleAnimationSequence());
|
||||
tick(110);
|
||||
checkTimes(p, [110, 0], [[110, 0], [2110, -2000], [3110, -3000]]);
|
||||
tick(210);
|
||||
checkTimes(p, [110, 100], [[110, 100], [2110, -1900], [3110, -2900]]);
|
||||
tick(2210);
|
||||
checkTimes(p, [110, 2100], [[110, 2000], [2110, 100], [3110, -900]]);
|
||||
tick(3210);
|
||||
checkTimes(p, [110, 3100], [[110, 2000], [2110, 1000], [3110, 100]]);
|
||||
tick(6210);
|
||||
checkTimes(p, [110, 6000], [[110, 2000], [2110, 1000], [3110, 3000]]);
|
||||
});
|
||||
|
||||
test('can seek an animationSequence', function() {
|
||||
tick(100);
|
||||
var p = document.timeline.play(simpleAnimationSequence());
|
||||
tick(110);
|
||||
checkTimes(p, [110, 0], [[110, 0], [2110, -2000], [3110, -3000]]);
|
||||
p.currentTime = 100;
|
||||
checkTimes(p, [10, 100], [[10, 100], [2010, -1900], [3010, -2900]]);
|
||||
p.currentTime = 2100;
|
||||
checkTimes(p, [-1990, 2100], [[-1990, 2100], [10, 100], [1010, -900]]);
|
||||
p.currentTime = 3100;
|
||||
checkTimes(p, [-2990, 3100], [[-2990, 3100], [-990, 1100], [10, 100]]);
|
||||
p.currentTime = 6100;
|
||||
checkTimes(p, [-5990, 6100], [[-5990, 6100], [-3990, 4100], [-2990, 3100]]);
|
||||
});
|
||||
|
||||
test('can startTime seek an animationSequence', function() {
|
||||
tick(100);
|
||||
var p = document.timeline.play(simpleAnimationSequence());
|
||||
tick(110);
|
||||
checkTimes(p, [110, 0], [[110, 0], [2110, -2000], [3110, -3000]]);
|
||||
p.startTime = 10;
|
||||
checkTimes(p, [10, 100], [[10, 100], [2010, -1900], [3010, -2900]]);
|
||||
p.startTime = -1990;
|
||||
checkTimes(p, [-1990, 2100], [[-1990, 2000], [10, 100], [1010, -900]]);
|
||||
p.startTime = -2990;
|
||||
checkTimes(p, [-2990, 3100], [[-2990, 2000], [-990, 1000], [10, 100]]);
|
||||
p.startTime = -5990;
|
||||
checkTimes(p, [-5990, 6000], [[-5990, 2000], [-3990, 1000], [-2990, 3000]]);
|
||||
});
|
||||
|
||||
test('complex animation tree timing while playing', function() {
|
||||
tick(90);
|
||||
var player = document.timeline.play(this.complexSource);
|
||||
tick(100);
|
||||
checkTimes(player, [100, 0], [
|
||||
[100, 0], [ // 4
|
||||
[100, 0], [ // 1
|
||||
[102, -2], // 3
|
||||
[102, -2]]], // 2
|
||||
[100, 0], // 0
|
||||
], 't = 100');
|
||||
tick(101);
|
||||
checkTimes(player, [100, 1], [
|
||||
[100, 1], [ // 4
|
||||
[100, 1], [ // 1
|
||||
[102, -1], // 3
|
||||
[102, -1]]], // 2
|
||||
[100, 1], // 0
|
||||
], 't = 101');
|
||||
tick(102);
|
||||
checkTimes(player, [100, 2], [
|
||||
[100, 2], [ // 4
|
||||
[100, 2], [ // 1
|
||||
[102, 0], // 3
|
||||
[102, 0]]], // 2
|
||||
[100, 1], // 0
|
||||
], 't = 102');
|
||||
});
|
||||
|
||||
test('effects apply in the correct order', function() {
|
||||
tick(0);
|
||||
var player = document.timeline.play(this.complexSource);
|
||||
player.currentTime = 0;
|
||||
assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px');
|
||||
player.currentTime = 1;
|
||||
checkTimes(player, [-1, 1], [[-1, 1, 0], [[-1, 1, 0], [[1, -1, 0], [1, -1, 0]]], [-1, 1, 0]]);
|
||||
assert.equal(getComputedStyle(this.complexTarget).marginLeft, '1px');
|
||||
player.currentTime = 2;
|
||||
// TODO: When we seek we don't limit. Is this OK?
|
||||
checkTimes(player, [-2, 2], [[-2, 2, 0], [[-2, 2, 0], [[0, 0, 0], [0, 0, 0]]], [-2, 2, 0]]);
|
||||
assert.equal(getComputedStyle(this.complexTarget).marginLeft, '2px');
|
||||
player.currentTime = 3;
|
||||
assert.equal(getComputedStyle(this.complexTarget).marginLeft, '3px');
|
||||
player.currentTime = 4;
|
||||
assert.equal(getComputedStyle(this.complexTarget).marginLeft, '4px');
|
||||
player.currentTime = 5;
|
||||
assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px');
|
||||
});
|
||||
|
||||
test('cancelling group players', function() {
|
||||
tick(0);
|
||||
var player = document.timeline.play(this.complexSource);
|
||||
tick(1);
|
||||
tick(4);
|
||||
assert.equal(getComputedStyle(this.complexTarget).marginLeft, '3px');
|
||||
player.cancel();
|
||||
assert.equal(player.currentTime, null);
|
||||
assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px');
|
||||
});
|
||||
|
||||
test('redundant animation node wrapping', function() {
|
||||
tick(100);
|
||||
var animation = new AnimationSequence([
|
||||
this.staticAnimation(this.target, '0px', 1),
|
||||
new AnimationGroup([
|
||||
new AnimationSequence([
|
||||
this.staticAnimation(this.target, '1px', 1),
|
||||
this.staticAnimation(this.target, '2px', 1),
|
||||
]),
|
||||
]),
|
||||
]);
|
||||
var player = document.timeline.play(animation);
|
||||
assert.equal(getComputedStyle(this.target).marginLeft, '0px');
|
||||
checkTimes(player, [100, 0], [
|
||||
[100, 0, 0, 0], [[ // 0
|
||||
[101, -1, 0, 1], // 1
|
||||
[102, -2, 1, 2]]] // 2
|
||||
], 't = 100');
|
||||
tick(101);
|
||||
assert.equal(getComputedStyle(this.target).marginLeft, '1px');
|
||||
checkTimes(player, [100, 1], [
|
||||
[100, 1, 0, 0], [[ // 0
|
||||
[101, 0, 0, 1], // 1
|
||||
[102, -1, 1, 2]]] // 2
|
||||
], 't = 101');
|
||||
tick(102);
|
||||
assert.equal(getComputedStyle(this.target).marginLeft, '2px');
|
||||
assert.equal(document.timeline.currentTime, 102);
|
||||
checkTimes(player, [100, 2], [ // FIXME: Implement limiting on group players
|
||||
[100, 1, 0, 0], [[ // 0
|
||||
[101, 1, 0, 1], // 1
|
||||
[102, 0, 1, 2]]] // 2
|
||||
], 't = 102');
|
||||
tick(103);
|
||||
assert.equal(getComputedStyle(this.target).marginLeft, '0px');
|
||||
checkTimes(player, [100, 3], [ // FIXME: Implement limiting on group players
|
||||
[100, 1, 0, 0], [[ // 0
|
||||
[101, 1, 0, 1], // 1
|
||||
[102, 1, 1, 2]]] // 2
|
||||
], 't = 103');
|
||||
if (this.target.parent)
|
||||
this.target.parent.removeChild(target);
|
||||
});
|
||||
|
||||
test('delays on groups work correctly', function() {
|
||||
// 444
|
||||
// 1
|
||||
// 0
|
||||
// 33
|
||||
// 2
|
||||
var animation = new AnimationGroup([
|
||||
new AnimationGroup([
|
||||
this.staticAnimation(this.target, '4px', {duration: 3, delay: 1}),
|
||||
this.staticAnimation(this.target, '1px', {duration: 1, delay: 0}),
|
||||
], {delay: 1}),
|
||||
new AnimationSequence([
|
||||
this.staticAnimation(this.target, '0px', {duration: 1, delay: 0}),
|
||||
this.staticAnimation(this.target, '3px', {duration: 2, delay: 1}),
|
||||
this.staticAnimation(this.target, '2px', {duration: 1, delay: -2}),
|
||||
]),
|
||||
]);
|
||||
var player = document.timeline.play(animation);
|
||||
tick(100);
|
||||
checkTimes(player, [100, 0], [
|
||||
[
|
||||
[101, -1],
|
||||
[101, -1],
|
||||
], [
|
||||
[100, 0],
|
||||
[101, -1],
|
||||
[104, -4],
|
||||
]
|
||||
]);
|
||||
assert.equal(getComputedStyle(this.target).marginLeft, '0px');
|
||||
tick(101);
|
||||
assert.equal(getComputedStyle(this.target).marginLeft, '1px');
|
||||
tick(102);
|
||||
assert.equal(getComputedStyle(this.target).marginLeft, '2px');
|
||||
tick(103);
|
||||
assert.equal(getComputedStyle(this.target).marginLeft, '3px');
|
||||
tick(104);
|
||||
assert.equal(getComputedStyle(this.target).marginLeft, '4px');
|
||||
tick(105);
|
||||
assert.equal(getComputedStyle(this.target).marginLeft, '0px');
|
||||
});
|
||||
|
||||
test('end delays on groups work correctly', function() {
|
||||
// 11
|
||||
// 4
|
||||
// 0
|
||||
// 33
|
||||
// 2
|
||||
var animation = new AnimationSequence([
|
||||
new AnimationSequence([
|
||||
this.staticAnimation(this.target, '1px', {duration: 2, endDelay: 2}),
|
||||
this.staticAnimation(this.target, '4px', {duration: 1, endDelay: 1}),
|
||||
], {endDelay: -6}),
|
||||
new AnimationSequence([
|
||||
this.staticAnimation(this.target, '0px', {duration: 1, endDelay: 1}),
|
||||
this.staticAnimation(this.target, '3px', {duration: 2, endDelay: -2}),
|
||||
this.staticAnimation(this.target, '2px', {duration: 1, endDelay: 2}),
|
||||
]),
|
||||
]);
|
||||
var player = document.timeline.play(animation);
|
||||
tick(100);
|
||||
checkTimes(player, [100, 0], [
|
||||
[
|
||||
[100, 0],
|
||||
[104, -4],
|
||||
], [
|
||||
[100, 0],
|
||||
[102, -2],
|
||||
[102, -2],
|
||||
]
|
||||
]);
|
||||
assert.equal(getComputedStyle(this.target).marginLeft, '0px');
|
||||
tick(101);
|
||||
assert.equal(getComputedStyle(this.target).marginLeft, '1px');
|
||||
tick(102);
|
||||
assert.equal(getComputedStyle(this.target).marginLeft, '2px');
|
||||
tick(103);
|
||||
assert.equal(getComputedStyle(this.target).marginLeft, '3px');
|
||||
tick(104);
|
||||
// FIXME: Group child player limiting bounds should match the parent player's limiting bounds.
|
||||
// assert.equal(getComputedStyle(this.target).marginLeft, '4px');
|
||||
// tick(105);
|
||||
// assert.equal(getComputedStyle(this.target).marginLeft, '0px');
|
||||
});
|
||||
|
||||
// FIXME: This test can be removed when this suite is finished.
|
||||
test('sources are working for basic operations', function() {
|
||||
var players = [];
|
||||
players.push(document.timeline.play(this.seqEmpty_source));
|
||||
players.push(document.timeline.play(this.seqSimple_source));
|
||||
players.push(document.timeline.play(this.seqWithSeq_source));
|
||||
players.push(document.timeline.play(this.seqWithGroup_source));
|
||||
players.push(document.timeline.play(this.seqWithEmptyGroup_source));
|
||||
players.push(document.timeline.play(this.seqWithEmptySeq_source));
|
||||
|
||||
players.push(document.timeline.play(this.groupEmpty_source));
|
||||
players.push(document.timeline.play(this.groupSimple_source));
|
||||
players.push(document.timeline.play(this.groupWithSeq_source));
|
||||
players.push(document.timeline.play(this.groupWithGroup_source));
|
||||
players.push(document.timeline.play(this.groupWithEmptyGroup_source));
|
||||
players.push(document.timeline.play(this.groupWithEmptySeq_source));
|
||||
|
||||
var length = players.length;
|
||||
|
||||
tick(50);
|
||||
for (var i = 0; i < length; i++)
|
||||
players[i].pause();
|
||||
|
||||
tick(100);
|
||||
for (var i = 0; i < length; i++)
|
||||
players[i].play();
|
||||
|
||||
tick(200);
|
||||
for (var i = 0; i < length; i++)
|
||||
players[i].currentTime += 1;
|
||||
|
||||
tick(300);
|
||||
for (var i = 0; i < length; i++)
|
||||
players[i].startTime += 1;
|
||||
|
||||
tick(350);
|
||||
for (var i = 0; i < length; i++)
|
||||
players[i].reverse();
|
||||
|
||||
tick(400);
|
||||
for (var i = 0; i < length; i++)
|
||||
players[i].finish();
|
||||
|
||||
tick(500);
|
||||
tick(600);
|
||||
for (var i = 0; i < length; i++)
|
||||
players[i].cancel();
|
||||
|
||||
for (var i = 0; i < length; i++)
|
||||
players[i].play();
|
||||
});
|
||||
|
||||
test('pausing works as expected with an empty AnimationSequence', function() {
|
||||
var player = document.timeline.play(this.seqEmpty_source);
|
||||
tick(0);
|
||||
assert.equal(player.startTime, 0);
|
||||
assert.equal(player.currentTime, 0);
|
||||
|
||||
player.pause();
|
||||
assert.equal(player.startTime, null);
|
||||
assert.equal(player.currentTime, 0);
|
||||
});
|
||||
|
||||
test('pausing works as expected with a simple AnimationSequence', function() {
|
||||
var player = document.timeline.play(this.seqSimple_source);
|
||||
tick(0);
|
||||
checkTimes(player, [0, 0], [[0, 0], [500, -500]], 't = 0');
|
||||
|
||||
tick(200);
|
||||
checkTimes(player, [0, 200], [[0, 200], [500, -300]], 't = 200');
|
||||
|
||||
player.pause();
|
||||
checkTimes(player, [null, null], [[null, null], [null, null]], 't = 200');
|
||||
|
||||
tick(300);
|
||||
checkTimes(player, [null, 200], [[null, 200], [null, -300]], 't = 300');
|
||||
|
||||
player.play();
|
||||
checkTimes(player, [null, 200], [[null, 200], [null, -300]], 't = 300');
|
||||
|
||||
tick(301);
|
||||
checkTimes(player, [101, 200], [[101, 200], [601, -300]], 't = 301');
|
||||
|
||||
tick(700);
|
||||
checkTimes(player, [101, 599], [[101, 500], [601, 99]], 't = 700');
|
||||
});
|
||||
|
||||
test('pausing works as expected with an AnimationSequence inside an AnimationSequence', function() {
|
||||
var player = document.timeline.play(this.seqWithSeq_source);
|
||||
tick(0);
|
||||
checkTimes(
|
||||
player,
|
||||
[0, 0], [
|
||||
[0, 0],
|
||||
[500, -500], [
|
||||
[1000, -1000],
|
||||
[1500, -1500]]],
|
||||
't = 0');
|
||||
|
||||
tick(200);
|
||||
checkTimes(
|
||||
player,
|
||||
[0, 200], [
|
||||
[0, 200],
|
||||
[500, -300], [
|
||||
[1000, -800],
|
||||
[1500, -1300]]],
|
||||
't = 200');
|
||||
|
||||
player.pause();
|
||||
checkTimes(
|
||||
player,
|
||||
[null, null], [
|
||||
[null, null],
|
||||
[null, null], [
|
||||
[null, null],
|
||||
[null, null]]],
|
||||
't = 200');
|
||||
|
||||
tick(300);
|
||||
checkTimes(
|
||||
player,
|
||||
[null, 200], [
|
||||
[null, 200],
|
||||
[null, -300], [
|
||||
[null, -800],
|
||||
[null, -1300]]],
|
||||
't = 300');
|
||||
|
||||
player.play();
|
||||
tick(310);
|
||||
checkTimes(
|
||||
player,
|
||||
[110, 200], [
|
||||
[110, 200],
|
||||
[610, -300], [
|
||||
[1110, -800],
|
||||
[1610, -1300]]],
|
||||
't = 310');
|
||||
|
||||
tick(1300);
|
||||
checkTimes(
|
||||
player,
|
||||
[110, 1190], [
|
||||
[110, 500],
|
||||
[610, 500], [
|
||||
[1110, 190],
|
||||
[1610, -310]]],
|
||||
't = 1300');
|
||||
|
||||
player.pause();
|
||||
checkTimes(
|
||||
player,
|
||||
[null, null], [
|
||||
[null, 500],
|
||||
[null, 500], [
|
||||
[null, null],
|
||||
[null, null]]],
|
||||
't = 1300');
|
||||
|
||||
tick(1400);
|
||||
checkTimes(
|
||||
player,
|
||||
[null, 1190], [
|
||||
[null, 500],
|
||||
[null, 500], [
|
||||
[null, 190],
|
||||
[null, -310]]],
|
||||
't = 1400');
|
||||
|
||||
player.play();
|
||||
checkTimes(
|
||||
player,
|
||||
[null, 1190], [
|
||||
[null, 500],
|
||||
[null, 500], [
|
||||
[null, 190],
|
||||
[null, -310]]],
|
||||
't = 1400');
|
||||
|
||||
tick(1410);
|
||||
checkTimes(
|
||||
player,
|
||||
[220, 1190], [
|
||||
[220, 500],
|
||||
[720, 500], [
|
||||
[1220, 190],
|
||||
[1720, -310]]],
|
||||
't = 1410');
|
||||
|
||||
tick(1600);
|
||||
checkTimes(
|
||||
player,
|
||||
[220, 1380], [
|
||||
[220, 500],
|
||||
[720, 500], [
|
||||
[1220, 380],
|
||||
[1720, -120]]],
|
||||
't = 1600');
|
||||
|
||||
player.pause();
|
||||
checkTimes(
|
||||
player,
|
||||
[null, null], [
|
||||
[null, 500],
|
||||
[null, 500], [
|
||||
[null, null],
|
||||
[null, null]]],
|
||||
't = 1600');
|
||||
|
||||
tick(1700);
|
||||
checkTimes(
|
||||
player,
|
||||
[null, 1380], [
|
||||
[null, 500],
|
||||
[null, 500], [
|
||||
[null, 380],
|
||||
[null, -120]]],
|
||||
't = 1700');
|
||||
|
||||
player.play();
|
||||
tick(1710);
|
||||
checkTimes(
|
||||
player,
|
||||
[330, 1380], [
|
||||
[330, 500],
|
||||
[830, 500], [
|
||||
[1330, 380],
|
||||
[1830, -120]]],
|
||||
't = 1710');
|
||||
|
||||
tick(2400);
|
||||
checkTimes(
|
||||
player,
|
||||
[330, 2000], [
|
||||
[330, 500],
|
||||
[830, 500], [
|
||||
[1330, 500],
|
||||
[1830, 500]]],
|
||||
't = 2400');
|
||||
});
|
||||
|
||||
test('pausing works as expected with an AnimationGroup inside an AnimationSequence', function() {
|
||||
var player = document.timeline.play(this.seqWithGroup_source);
|
||||
tick(0);
|
||||
checkTimes(
|
||||
player,
|
||||
[0, 0], [
|
||||
[0, 0],
|
||||
[500, -500], [
|
||||
[1000, -1000],
|
||||
[1000, -1000]]],
|
||||
't = 0');
|
||||
|
||||
tick(200);
|
||||
checkTimes(
|
||||
player,
|
||||
[0, 200], [
|
||||
[0, 200],
|
||||
[500, -300], [
|
||||
[1000, -800],
|
||||
[1000, -800]]],
|
||||
't = 200');
|
||||
|
||||
player.pause();
|
||||
checkTimes(
|
||||
player,
|
||||
[null, null], [
|
||||
[null, null],
|
||||
[null, null], [
|
||||
[null, null],
|
||||
[null, null]]],
|
||||
't = 200');
|
||||
|
||||
tick(300);
|
||||
checkTimes(
|
||||
player,
|
||||
[null, 200], [
|
||||
[null, 200],
|
||||
[null, -300], [
|
||||
[null, -800],
|
||||
[null, -800]]],
|
||||
't = 300');
|
||||
|
||||
player.play();
|
||||
tick(310);
|
||||
checkTimes(
|
||||
player,
|
||||
[110, 200], [
|
||||
[110, 200],
|
||||
[610, -300], [
|
||||
[1110, -800],
|
||||
[1110, -800]]],
|
||||
't = 310');
|
||||
|
||||
tick(1310);
|
||||
checkTimes(
|
||||
player,
|
||||
[110, 1200], [
|
||||
[110, 500],
|
||||
[610, 500], [
|
||||
[1110, 200],
|
||||
[1110, 200]]],
|
||||
't = 1310');
|
||||
|
||||
player.pause();
|
||||
checkTimes(
|
||||
player,
|
||||
[null, null], [
|
||||
[null, 500],
|
||||
[null, 500], [
|
||||
[null, null],
|
||||
[null, null]]],
|
||||
't = 1310');
|
||||
|
||||
tick(1400);
|
||||
checkTimes(
|
||||
player,
|
||||
[null, 1200], [
|
||||
[null, 500],
|
||||
[null, 500], [
|
||||
[null, 200],
|
||||
[null, 200]]],
|
||||
't = 1410');
|
||||
|
||||
player.play();
|
||||
tick(1410);
|
||||
checkTimes(
|
||||
player,
|
||||
[210, 1200], [
|
||||
[210, 500],
|
||||
[710, 500], [
|
||||
[1210, 200],
|
||||
[1210, 200]]],
|
||||
't = 1410');
|
||||
|
||||
tick(1610);
|
||||
checkTimes(
|
||||
player,
|
||||
[210, 1400], [
|
||||
[210, 500],
|
||||
[710, 500], [
|
||||
[1210, 400],
|
||||
[1210, 400]]],
|
||||
't = 1610');
|
||||
|
||||
player.pause();
|
||||
tick(1810);
|
||||
checkTimes(
|
||||
player,
|
||||
[null, 1400], [
|
||||
[null, 500],
|
||||
[null, 500], [
|
||||
[null, 400],
|
||||
[null, 400]]],
|
||||
't = 1810');
|
||||
|
||||
player.play();
|
||||
tick(1820);
|
||||
checkTimes(
|
||||
player,
|
||||
[420, 1400], [
|
||||
[420, 500],
|
||||
[920, 500], [
|
||||
[1420, 400],
|
||||
[1420, 400]]],
|
||||
't = 1820');
|
||||
|
||||
tick(2020);
|
||||
checkTimes(
|
||||
player,
|
||||
[420, 1500], [
|
||||
[420, 500],
|
||||
[920, 500], [
|
||||
[1420, 500],
|
||||
[1420, 500]]],
|
||||
't = 2020');
|
||||
|
||||
player.pause();
|
||||
checkTimes(
|
||||
player,
|
||||
[null, 1500], [
|
||||
[null, 500],
|
||||
[null, 500], [
|
||||
[null, 500],
|
||||
[null, 500]]],
|
||||
't = 2020');
|
||||
});
|
||||
|
||||
test('pausing works as expected with an empty AnimationSequence inside an AnimationSequence', function() {
|
||||
var player = document.timeline.play(this.seqWithEmptySeq_source);
|
||||
tick(0);
|
||||
checkTimes(
|
||||
player,
|
||||
[0, 0], [0, 0],
|
||||
't = 0');
|
||||
|
||||
player.pause();
|
||||
checkTimes(
|
||||
player,
|
||||
[null, 0], [null, 0],
|
||||
't = 0 after pause');
|
||||
});
|
||||
|
||||
test('pausing works as expected with an empty AnimationGroup inside an AnimationSequence', function() {
|
||||
var player = document.timeline.play(this.seqWithEmptyGroup_source);
|
||||
tick(0);
|
||||
checkTimes(
|
||||
player,
|
||||
[0, 0], [0, 0],
|
||||
't = 0');
|
||||
|
||||
player.pause();
|
||||
checkTimes(
|
||||
player,
|
||||
[null, 0], [null, 0],
|
||||
't = 0 after pause');
|
||||
});
|
||||
|
||||
test('playState works for groups', function() {
|
||||
var target = document.createElement('div');
|
||||
document.body.appendChild(target);
|
||||
var anim = new AnimationSequence([new Animation(target, [], 100), new Animation(target, [], 100)]);
|
||||
var p = document.timeline.play(anim);
|
||||
assert.equal(p.playState, 'pending');
|
||||
tick(1);
|
||||
assert.equal(p.playState, 'running');
|
||||
assert.equal(p._childPlayers[0]._player.playState, 'running');
|
||||
assert.equal(p._childPlayers[1]._player.playState, 'running');
|
||||
tick(101);
|
||||
assert.equal(p.playState, 'running');
|
||||
assert.equal(p._childPlayers[0]._player.playState, 'finished');
|
||||
assert.equal(p._childPlayers[1]._player.playState, 'running');
|
||||
p.pause();
|
||||
assert.equal(p.playState, 'pending');
|
||||
assert.equal(p._childPlayers[0]._player.playState, 'paused');
|
||||
assert.equal(p._childPlayers[1]._player.playState, 'pending');
|
||||
tick(102);
|
||||
assert.equal(p.playState, 'paused');
|
||||
assert.equal(p._childPlayers[0]._player.playState, 'paused');
|
||||
assert.equal(p._childPlayers[1]._player.playState, 'paused');
|
||||
p.play();
|
||||
assert.equal(p.playState, 'pending');
|
||||
assert.equal(p._childPlayers[0]._player.playState, 'pending');
|
||||
assert.equal(p._childPlayers[1]._player.playState, 'pending');
|
||||
tick(103);
|
||||
assert.equal(p.playState, 'running');
|
||||
assert.equal(p._childPlayers[0]._player.playState, 'finished');
|
||||
assert.equal(p._childPlayers[1]._player.playState, 'running');
|
||||
tick(204);
|
||||
assert.equal(p.playState, 'finished');
|
||||
assert.equal(p._childPlayers[0]._player.playState, 'finished');
|
||||
assert.equal(p._childPlayers[1]._player.playState, 'finished');
|
||||
});
|
||||
});
|
||||
16
rpg-docs/public/bower_components/web-animations-next/test/js/interpolation.js
vendored
Normal file
16
rpg-docs/public/bower_components/web-animations-next/test/js/interpolation.js
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
suite('interpolation', function() {
|
||||
test('interpolate numbers', function() {
|
||||
assert.equal(interpolate(4, 2, 0.2), 3.6);
|
||||
});
|
||||
test('interpolate bools', function() {
|
||||
assert.equal(interpolate(false, true, 0.4), false);
|
||||
assert.equal(interpolate(false, true, 0.5), true);
|
||||
assert.equal(interpolate(false, true, 0.5), true);
|
||||
});
|
||||
test('interpolate lists', function() {
|
||||
assert.deepEqual(interpolate([1, 2, 3], [4, 5, 6], 0.5), [2.5, 3.5, 4.5]);
|
||||
assert.deepEqual(interpolate([1], [4], 0.6), [2.8]);
|
||||
assert.deepEqual(interpolate([false], [true], 0.6), [true]);
|
||||
assert.deepEqual(interpolate([1, false, [3, 6]], [4, true, [6, 8]], 0.6), [2.8, true, [4.8, 7.2]]);
|
||||
});
|
||||
});
|
||||
532
rpg-docs/public/bower_components/web-animations-next/test/js/matrix-interpolation.js
vendored
Normal file
532
rpg-docs/public/bower_components/web-animations-next/test/js/matrix-interpolation.js
vendored
Normal file
@@ -0,0 +1,532 @@
|
||||
suite('matrix interpolation', function() {
|
||||
function compareMatrices(actual, expected, expectedLength) {
|
||||
var actualElements = actual.slice(
|
||||
actual.indexOf('(') + 1, actual.lastIndexOf(')')).split(',');
|
||||
assert.equal(actualElements.length, expectedLength);
|
||||
for (var i = 0; i < expectedLength; i++)
|
||||
assert.closeTo(Number(actualElements[i]), expected[i], 0.01);
|
||||
}
|
||||
|
||||
function compareInterpolatedTransforms(actual, expected, timeFraction) {
|
||||
var actualInterp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
actual[0],
|
||||
actual[1]);
|
||||
var expectedInterp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
expected[0],
|
||||
expected[1]);
|
||||
var evaluatedActualInterp = actualInterp(timeFraction);
|
||||
var evaluatedExpectedInterp = expectedInterp(timeFraction);
|
||||
var actualElements = evaluatedActualInterp.slice(
|
||||
evaluatedActualInterp.indexOf('(') + 1,
|
||||
evaluatedActualInterp.lastIndexOf(')')
|
||||
).split(',');
|
||||
var expectedElements = evaluatedExpectedInterp.slice(
|
||||
evaluatedExpectedInterp.indexOf('(') + 1,
|
||||
evaluatedExpectedInterp.lastIndexOf(')')
|
||||
).split(',');
|
||||
assert.equal(actualElements.length, expectedElements.length);
|
||||
for (var i = 0; i < expectedElements.length; i++)
|
||||
assert.closeTo(Number(actualElements[i]), Number(expectedElements[i]), 0.01);
|
||||
}
|
||||
|
||||
test('transform interpolations with matrices only', function() {
|
||||
var interpolatedMatrix = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'matrix(1, 0, 0, 1, 0, 0)',
|
||||
'matrix(1, -0.2, 0, 1, 0, 0)');
|
||||
var evaluatedInterp = interpolatedMatrix(0.5);
|
||||
compareMatrices(evaluatedInterp, [1, -0.1, 0, 1, 0, 0], 6);
|
||||
|
||||
interpolatedMatrix = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'matrix(1, 0, 0, 1, 0, 0)',
|
||||
'matrix3d(1, 1, 0, 0, -2, 1, 0, 0, 0, 0, 1, 0, 10, 10, 0, 1)');
|
||||
evaluatedInterp = interpolatedMatrix(0.5);
|
||||
compareMatrices(evaluatedInterp, [1.12, 0.46, -0.84, 1.34, 5, 5], 6);
|
||||
|
||||
interpolatedMatrix = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'matrix(1, 0, 0, 1, 0, 0)',
|
||||
'matrix3d(1, 1, 3, 0, -2, 1, 0, 0, 0, 0, 1, 0, 10, 10, 0, 1)');
|
||||
evaluatedInterp = interpolatedMatrix(0.5);
|
||||
// FIXME: Values at 8, 9, 10 are different from Blink and FireFox, which give 0.31, 0.04, 1.01.
|
||||
// Result looks the same.
|
||||
compareMatrices(
|
||||
evaluatedInterp,
|
||||
[1.73, 0.67, 1.10, 0, -0.85, 1.34, 0.29, 0, -0.35, -0.22, 0.58, 0, 5, 5, 0, 1],
|
||||
16);
|
||||
|
||||
interpolatedMatrix = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)',
|
||||
'matrix3d(1, 2, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 10, 10, 1)');
|
||||
evaluatedInterp = interpolatedMatrix(0.5);
|
||||
compareMatrices(
|
||||
evaluatedInterp,
|
||||
[1.38, 0.85, 0, 0, 0.24, 1.00, 0, 0, 0, 0, 1, 0, 0, 5, 5, 1],
|
||||
16);
|
||||
|
||||
interpolatedMatrix = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)',
|
||||
'matrix3d(1, 1, 0, 0, -2, 1, 0, 0, 0, 0, 1, 0, 10, 10, 0, 1)');
|
||||
evaluatedInterp = interpolatedMatrix(0.5);
|
||||
compareMatrices(evaluatedInterp, [1.12, 0.46, -0.84, 1.34, 5, 5], 6);
|
||||
|
||||
// Test matrices with [3][3] != 1
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'matrix(1, 0, 0, 1, 0, 0)',
|
||||
'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2)');
|
||||
evaluatedInterp = interp(0.4);
|
||||
compareMatrices(
|
||||
evaluatedInterp,
|
||||
[1, 0, 0, 1, 0, 0],
|
||||
6);
|
||||
evaluatedInterp = interp(0.6);
|
||||
compareMatrices(
|
||||
evaluatedInterp,
|
||||
[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2],
|
||||
16);
|
||||
});
|
||||
|
||||
test('transform interpolations with matrices and other functions', function() {
|
||||
var interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translate(100px) matrix(1, 0, 0, 1, 0, 0)',
|
||||
'translate(10px) matrix(1, -0.2, 0, 1, 0, 0)');
|
||||
var evaluatedInterp = interp(0.5);
|
||||
var functions = evaluatedInterp.split(' ');
|
||||
assert.equal(functions.length, 2);
|
||||
assert.equal(functions[0], 'translate(55px,0px)');
|
||||
compareMatrices(functions[1], [1, -0.1, 0, 1, 0, 0], 6);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translate(100px) matrix(1, 0, 0, 1, 0, 0) rotate(10deg)',
|
||||
'translate(10px) matrix(1, -0.2, 0, 1, 0, 0) rotate(100deg)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
functions = evaluatedInterp.split(' ');
|
||||
assert.equal(functions.length, 3);
|
||||
assert.equal(functions[0], 'translate(55px,0px)');
|
||||
compareMatrices(functions[1], [1, -0.1, 0, 1, 0, 0], 6);
|
||||
assert.equal(functions[2], 'rotate(55deg)');
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translate(100px) matrix(1, 0, 0, 1, 0, 0) rotate(10deg)',
|
||||
'translate(10px) matrix3d(1, 2, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 10, 10, 1) rotate(100deg)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
functions = evaluatedInterp.split(' ');
|
||||
assert.equal(functions.length, 3);
|
||||
assert.equal(functions[0], 'translate(55px,0px)');
|
||||
compareMatrices(
|
||||
functions[1],
|
||||
[1.38, 0.85, 0, 0, 0.24, 1.00, 0, 0, 0, 0, 1, 0, 0, 5, 5, 1],
|
||||
16);
|
||||
assert.equal(functions[2], 'rotate(55deg)');
|
||||
|
||||
// Contains matrices and requires matrix decomposition.
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'matrix(1, 0, 0, 1, 0, 0) translate(100px)',
|
||||
'translate(10px) matrix(1, -0.2, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [1, -0.1, 0, 1, 55, 0], 6);
|
||||
|
||||
// Test matrices with [3][3] != 1
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translate(100px) matrix(1, 0, 0, 1, 0, 0) rotate(10deg)',
|
||||
'translate(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2) rotate(100deg)');
|
||||
evaluatedInterp = interp(0.4);
|
||||
functions = evaluatedInterp.split(' ');
|
||||
assert.equal(functions.length, 3);
|
||||
assert.equal(functions[0], 'translate(64px,0px)');
|
||||
compareMatrices(
|
||||
functions[1],
|
||||
[1, 0, 0, 1, 0, 0],
|
||||
6);
|
||||
assert.equal(functions[2], 'rotate(46deg)');
|
||||
evaluatedInterp = interp(0.6);
|
||||
functions = evaluatedInterp.split(' ');
|
||||
assert.equal(functions.length, 3);
|
||||
assert.equal(functions[0], 'translate(46px,0px)');
|
||||
compareMatrices(
|
||||
functions[1],
|
||||
[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2],
|
||||
16);
|
||||
assert.equal(functions[2], 'rotate(64deg)');
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translate(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2) rotate(100deg)',
|
||||
'translate(100px) matrix(1, 0, 0, 1, 0, 0) rotate(10deg)');
|
||||
evaluatedInterp = interp(0.4);
|
||||
functions = evaluatedInterp.split(' ');
|
||||
assert.equal(functions.length, 3);
|
||||
assert.equal(functions[0], 'translate(46px,0px)');
|
||||
compareMatrices(
|
||||
functions[1],
|
||||
[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2],
|
||||
16);
|
||||
assert.equal(functions[2], 'rotate(64deg)');
|
||||
evaluatedInterp = interp(0.6);
|
||||
functions = evaluatedInterp.split(' ');
|
||||
assert.equal(functions.length, 3);
|
||||
assert.equal(functions[0], 'translate(64px,0px)');
|
||||
compareMatrices(
|
||||
functions[1],
|
||||
[1, 0, 0, 1, 0, 0],
|
||||
6);
|
||||
assert.equal(functions[2], 'rotate(46deg)');
|
||||
});
|
||||
|
||||
test('transform interpolations that require matrix decomposition', function() {
|
||||
var interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translate(10px)',
|
||||
'scale(2)');
|
||||
var evaluatedInterp = interp(0.4);
|
||||
compareMatrices(evaluatedInterp, [1.4, 0, 0, 1.4, 6, 0], 6);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'rotateX(10deg)',
|
||||
'rotateY(20deg)');
|
||||
evaluatedInterp = interp(0.4);
|
||||
compareMatrices(
|
||||
evaluatedInterp,
|
||||
[0.99, 0.01, -0.14, 0, 0.01, 1.00, 0.10, 0, 0.14, -0.10, 0.98, 0, 0, 0, 0, 1],
|
||||
16);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'rotate(0rad) translate(0px)',
|
||||
'translate(800px) rotate(9rad)');
|
||||
evaluatedInterp = interp(0.4);
|
||||
compareMatrices(evaluatedInterp, [0.47, 0.89, -0.89, 0.47, 320, 0], 6);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'rotateX(10deg)',
|
||||
'translate(10px) rotateX(200deg)');
|
||||
evaluatedInterp = interp(0.4);
|
||||
compareMatrices(
|
||||
evaluatedInterp,
|
||||
[1, 0, 0, 0, 0, 0.53, -0.85, 0, 0, 0.85, 0.53, 0, 4, 0, 0, 1],
|
||||
16);
|
||||
|
||||
// This case agrees with FireFox and the spec, but not with the old polyfill or Blink. The old
|
||||
// polyfill only does matrix decomposition on the rotate section of the function
|
||||
// lists.
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translate(0px)',
|
||||
'translate(800px) rotate(9rad)');
|
||||
evaluatedInterp = interp(0.4);
|
||||
compareMatrices(evaluatedInterp, [0.47, 0.89, -0.89, 0.47, 320, 0], 6);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translate(0px, 0px) rotate(0deg) scale(1)',
|
||||
'translate(900px, 190px) scale(3) rotate(9rad)');
|
||||
evaluatedInterp = interp(0.4);
|
||||
compareMatrices(evaluatedInterp, [0.84, 1.59, -1.59, 0.84, 360, 76], 6);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'perspective(1000px)',
|
||||
'perspective(200px)');
|
||||
evaluatedInterp = interp(0.2);
|
||||
compareMatrices(evaluatedInterp, [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0018, 0, 0, 0, 1], 16);
|
||||
});
|
||||
|
||||
test('transforms that decompose to a 2D matrix result in a 2D matrix transform in computed style', function() {
|
||||
var target = document.createElement('div');
|
||||
document.body.appendChild(target);
|
||||
|
||||
var player = target.animate(
|
||||
[{transform: 'translate(100px)'},
|
||||
{transform: 'rotate(45deg)'}],
|
||||
2000);
|
||||
player.currentTime = 500;
|
||||
player.pause();
|
||||
|
||||
var styleTransform = getComputedStyle(target).transform || getComputedStyle(target).webkitTransform;
|
||||
var elements = styleTransform.slice(
|
||||
styleTransform.indexOf('(') + 1, styleTransform.lastIndexOf(')')).split(',');
|
||||
assert.equal(elements.length, 6);
|
||||
});
|
||||
|
||||
test('decompose various CSS properties', function() {
|
||||
var interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'rotateX(110deg)',
|
||||
'rotateX(10deg) matrix(1, 0, 0, 1, 0, 0)');
|
||||
var evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [1, 0, 0, 0, 0, 0.500, 0.866, 0, 0, -0.866, 0.500, 0, 0, 0, 0, 1], 16);
|
||||
|
||||
// FIXME: This test case differs from blink transitions which gives -1(this)
|
||||
// This case agrees with FireFox transitions.
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'rotateY(10rad)',
|
||||
'rotateY(2rad) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [0.960, 0, 0.279, 0, 0, 1, 0, 0, -0.279, 0, 0.960, 0, 0, 0, 0, 1], 16);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'rotate(320deg)',
|
||||
'rotate(10deg) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [0.966, -0.259, 0.259, 0.966, 0, 0], 6);
|
||||
|
||||
// FIXME: This test case differs from blink transitions which gives -1(this)
|
||||
// This case agrees with FireFox transitions.
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'rotateZ(10rad)',
|
||||
'rotateZ(2rad) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [0.960, -0.279, 0.279, 0.960, 0, 0], 6);
|
||||
|
||||
// FIXME: This test case differs from blink transitions
|
||||
// which gives matrix3d(-0.24, +0.91, +0.33, +0, +0.33, -0.24, +0.91, +0, +0.91, +0.33, -0.24, +0, +0, +0, +0, +1)
|
||||
// versus our matrix3d(+0.91, -0.24, +0.33, +0, +0.33, +0.91, -0.24, +0, -0.24, +0.33, +0.91, +0, +0, +0, +0, +1)
|
||||
// This case agrees with FireFox transitions.
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'rotate3d(1, 1, 1, 100deg)',
|
||||
'rotate3d(1, 1, 1, 200deg) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [0.911, -0.244, 0.333, 0, 0.333, 0.911, -0.244, 0, -0.244, 0.333, 0.911, 0, 0, 0, 0, 1], 16);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'scale(10)',
|
||||
'scale(2) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [6, 0, 0, 6, 0, 0], 6);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'scalex(10)',
|
||||
'scalex(2) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [6, 0, 0, 1, 0, 0], 6);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'scaley(10)',
|
||||
'scaley(2) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [1, 0, 0, 6, 0, 0], 6);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'scalez(10)',
|
||||
'scalez(2) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 6, 0, 0, 0, 0, 1], 16);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'scale3d(6, 8, 10)',
|
||||
'scale3d(2, 2, 2) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [4, 0, 0, 0, 0, 5, 0, 0, 0, 0, 6, 0, 0, 0, 0, 1], 16);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'skew(30deg)',
|
||||
'skew(0deg) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [1, 0, 0.289, 1, 0, 0], 6);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'skewx(3rad)',
|
||||
'skewx(1rad) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [1, 0, 0.707, 1, 0, 0], 6);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'skewy(3rad)',
|
||||
'skewy(1rad) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [1.301, 0.595, 0.174, 0.921, 0, 0], 6);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translate(10px, 20px)',
|
||||
'translate(100px, 200px) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [1, 0, 0, 1, 55, 110], 6);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translatex(10px)',
|
||||
'translatex(100px) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [1, 0, 0, 1, 55, 0], 6);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translatey(10px)',
|
||||
'translatey(100px) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [1, 0, 0, 1, 0, 55], 6);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translatez(20px)',
|
||||
'translatez(200px) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 110, 1], 16);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translate3d(10px, 10px, 10px)',
|
||||
'translate3d(20px, 20px, 20px) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 15, 15, 15, 1], 16);
|
||||
|
||||
interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'perspective(300px)',
|
||||
'perspective(900px) matrix(1, 0, 0, 1, 0, 0)');
|
||||
evaluatedInterp = interp(0.5);
|
||||
compareMatrices(evaluatedInterp, [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002222, 0, 0, 0, 1], 16);
|
||||
});
|
||||
|
||||
test('decompose various CSS properties with unsupported units', function() {
|
||||
compareInterpolatedTransforms(
|
||||
['rotateX(110grad)', 'rotateX(10deg) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
['rotateX(0deg)', 'rotateX(10deg) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
0.5);
|
||||
|
||||
compareInterpolatedTransforms(
|
||||
['rotateY(2turn)', 'rotateY(2rad) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
['rotateY(0rad)', 'rotateY(2rad) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
0.5);
|
||||
|
||||
compareInterpolatedTransforms(
|
||||
['rotate(320deg)', 'rotateY(10grad) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
['rotate(320deg)', 'rotateY(0deg) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
0.5);
|
||||
|
||||
compareInterpolatedTransforms(
|
||||
['rotateZ(10grad)', 'rotateZ(2rad) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
['rotateZ(0rad)', 'rotateZ(2rad) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
0.5);
|
||||
|
||||
compareInterpolatedTransforms(
|
||||
['rotate3d(1, 1, 1, 100deg)', 'rotate3d(1, 1, 1, 2turn) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
['rotate3d(1, 1, 1, 100deg)', 'rotate3d(1, 1, 1, 0deg) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
0.5);
|
||||
|
||||
compareInterpolatedTransforms(
|
||||
['skew(30grad)', 'skew(10deg) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
['skew(0deg)', 'skew(10deg) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
0.5);
|
||||
|
||||
compareInterpolatedTransforms(
|
||||
['skewx(3grad)', 'skewx(1rad) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
['skewx(0rad)', 'skewx(1rad) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
0.5);
|
||||
|
||||
compareInterpolatedTransforms(
|
||||
['skewy(3rad)', 'skewy(1grad) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
['skewy(3rad)', 'skewy(0rad) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
0.5);
|
||||
|
||||
compareInterpolatedTransforms(
|
||||
['translate(10in, 20in)', 'translate(100px, 200px) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
['translate(0px, 0px)', 'translate(100px, 200px) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
0.5);
|
||||
|
||||
compareInterpolatedTransforms(
|
||||
['translatex(20in)', 'translatex(200px) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
['translatex(0px)', 'translatex(200px) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
0.5);
|
||||
|
||||
compareInterpolatedTransforms(
|
||||
['translatey(10in)', 'translatey(100px) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
['translatey(0px)', 'translatey(100px) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
0.5);
|
||||
|
||||
compareInterpolatedTransforms(
|
||||
['translatez(10em)', 'translatez(100px) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
['translatez(0px)', 'translatez(100px) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
0.5);
|
||||
|
||||
compareInterpolatedTransforms(
|
||||
['translate3d(10px, 10px, 10px)', 'translate3d(2rem, 2rem, 2rem) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
['translate3d(10px, 10px, 10px)', 'translate3d(0px, 0px, 0px) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
0.5);
|
||||
|
||||
compareInterpolatedTransforms(
|
||||
['perspective(300px)', 'perspective(9em) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
['perspective(300px)', 'perspective(0px) matrix(1, 0, 0, 1, 0, 0)'],
|
||||
0.5);
|
||||
});
|
||||
|
||||
test('transform interpolations involving matrices when matrix code is not available', function() {
|
||||
// FIXME: This is vulnerable to module interface changes. Can we disable modules?
|
||||
var composeMatrix = webAnimationsMinifill.composeMatrix;
|
||||
var quat = webAnimationsMinifill.quat;
|
||||
var dot = webAnimationsMinifill.dot;
|
||||
var makeMatrixDecomposition = webAnimationsMinifill.makeMatrixDecomposition;
|
||||
webAnimationsMinifill.composeMatrix = undefined;
|
||||
webAnimationsMinifill.quat = undefined;
|
||||
webAnimationsMinifill.dot = undefined;
|
||||
webAnimationsMinifill.makeMatrixDecomposition = undefined;
|
||||
|
||||
var testFlipTransformLists = function(keyframeFrom, keyframeTo) {
|
||||
var interp = webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
keyframeFrom,
|
||||
keyframeTo);
|
||||
var evaluatedInterp = interp(0.49);
|
||||
assert.equal(evaluatedInterp, keyframeFrom);
|
||||
evaluatedInterp = interp(0.51);
|
||||
assert.equal(evaluatedInterp, keyframeTo);
|
||||
};
|
||||
|
||||
try {
|
||||
// Function lists with just matrices.
|
||||
testFlipTransformLists('matrix(1, 0, 0, 1, 0, 0)', 'matrix(1, -0.2, 0, 1, 0, 0)');
|
||||
// Function lists with matrices and other functions.
|
||||
testFlipTransformLists(
|
||||
'translate(100px) matrix(1, 0, 0, 1, 0, 0) rotate(10deg)',
|
||||
'translate(10px) matrix(1, -0.2, 0, 1, 0, 0) rotate(100deg)');
|
||||
// Function lists that require matrix decomposition to be interpolated.
|
||||
testFlipTransformLists('translate(10px)', 'scale(2)');
|
||||
testFlipTransformLists('scale(2)', 'translate(10px)');
|
||||
testFlipTransformLists('rotateX(10deg)', 'rotateY(20deg)');
|
||||
testFlipTransformLists('rotateX(10deg)', 'translate(10px) rotateX(200deg)');
|
||||
testFlipTransformLists(
|
||||
'rotate(0rad) translate(0px)',
|
||||
'translate(800px) rotate(9rad)');
|
||||
testFlipTransformLists(
|
||||
'translate(0px, 0px) rotate(0deg) scale(1)',
|
||||
'scale(3) translate(300px, 90px) rotate(9rad)');
|
||||
testFlipTransformLists(
|
||||
'translate(0px, 0px) skew(30deg)',
|
||||
'skew(0deg) translate(300px, 90px)');
|
||||
testFlipTransformLists(
|
||||
'matrix(1, 0, 0, 1, 0, 0) translate(100px)',
|
||||
'translate(10px) matrix(1, -0.2, 0, 1, 0, 0)');
|
||||
} finally {
|
||||
webAnimationsMinifill.composeMatrix = composeMatrix;
|
||||
webAnimationsMinifill.quat = quat;
|
||||
webAnimationsMinifill.dot = dot;
|
||||
webAnimationsMinifill.makeMatrixDecomposition = makeMatrixDecomposition;
|
||||
}
|
||||
});
|
||||
});
|
||||
35
rpg-docs/public/bower_components/web-animations-next/test/js/number-handler.js
vendored
Normal file
35
rpg-docs/public/bower_components/web-animations-next/test/js/number-handler.js
vendored
Normal file
@@ -0,0 +1,35 @@
|
||||
suite('number-handler', function() {
|
||||
test('parse numbers', function() {
|
||||
var tests = {
|
||||
'0': 0,
|
||||
'1234': 1234,
|
||||
'-40': -40,
|
||||
'+40': 40,
|
||||
' -40 ': -40,
|
||||
'4.0': 4,
|
||||
'0.4': 0.4,
|
||||
'.1234': 0.1234,
|
||||
'12.34': 12.34,
|
||||
'+.1234': 0.1234,
|
||||
'+12.34': 12.34,
|
||||
'-.1234': -0.1234,
|
||||
'-12.34': -12.34,
|
||||
};
|
||||
for (var string in tests) {
|
||||
assert.equal(webAnimationsMinifill.parseNumber(string), tests[string], 'Parsing "' + string + '"');
|
||||
}
|
||||
});
|
||||
test('invalid numbers fail to parse', function() {
|
||||
assert.isUndefined(webAnimationsMinifill.parseNumber(''));
|
||||
assert.isUndefined(webAnimationsMinifill.parseNumber('nine'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseNumber('1 2'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseNumber('+-0'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseNumber('50px'));
|
||||
assert.isUndefined(webAnimationsMinifill.parseNumber('1.2.3'));
|
||||
});
|
||||
test('opacity clamping', function() {
|
||||
var interpolation = webAnimationsMinifill.propertyInterpolation('opacity', '0', '1');
|
||||
assert.equal(interpolation(-1), '0');
|
||||
assert.equal(interpolation(2), '1');
|
||||
});
|
||||
});
|
||||
79
rpg-docs/public/bower_components/web-animations-next/test/js/player-finish-event.js
vendored
Normal file
79
rpg-docs/public/bower_components/web-animations-next/test/js/player-finish-event.js
vendored
Normal file
@@ -0,0 +1,79 @@
|
||||
suite('player-finish-event', function() {
|
||||
setup(function() {
|
||||
this.element = document.createElement('div');
|
||||
document.documentElement.appendChild(this.element);
|
||||
this.player = this.element.animate([], 1000);
|
||||
});
|
||||
teardown(function() {
|
||||
if (this.element.parent)
|
||||
this.element.removeChild(this.target);
|
||||
});
|
||||
|
||||
test('fire when player completes', function(done) {
|
||||
var ready = false;
|
||||
var fired = false;
|
||||
var player = this.player;
|
||||
player.onfinish = function(event) {
|
||||
assert(ready, 'must not be called synchronously');
|
||||
assert.equal(this, player);
|
||||
assert.equal(event.target, player);
|
||||
assert.equal(event.currentTime, 1000);
|
||||
assert.equal(event.timelineTime, 1100);
|
||||
if (fired)
|
||||
assert(false, 'must not get fired twice');
|
||||
fired = true;
|
||||
done();
|
||||
};
|
||||
tick(100);
|
||||
tick(1100);
|
||||
tick(2100);
|
||||
ready = true;
|
||||
});
|
||||
|
||||
test('fire when reversed player completes', function(done) {
|
||||
this.player.onfinish = function(event) {
|
||||
assert.equal(event.currentTime, 0);
|
||||
assert.equal(event.timelineTime, 1001);
|
||||
done();
|
||||
};
|
||||
tick(0);
|
||||
tick(500);
|
||||
this.player.reverse();
|
||||
tick(501);
|
||||
tick(1001);
|
||||
});
|
||||
|
||||
test('fire after player is cancelled', function(done) {
|
||||
this.player.onfinish = function(event) {
|
||||
assert.equal(event.currentTime, 0);
|
||||
assert.equal(event.timelineTime, 1, 'event must be fired on next sample');
|
||||
done();
|
||||
};
|
||||
tick(0);
|
||||
this.player.cancel();
|
||||
tick(1);
|
||||
});
|
||||
|
||||
test('multiple event listeners', function(done) {
|
||||
var count = 0;
|
||||
function createHandler(expectedCount) {
|
||||
return function() {
|
||||
count++;
|
||||
assert.equal(count, expectedCount);
|
||||
};
|
||||
}
|
||||
var toRemove = createHandler(0);
|
||||
this.player.addEventListener('finish', createHandler(1));
|
||||
this.player.addEventListener('finish', createHandler(2));
|
||||
this.player.addEventListener('finish', toRemove);
|
||||
this.player.addEventListener('finish', createHandler(3));
|
||||
this.player.removeEventListener('finish', toRemove);
|
||||
this.player.onfinish = function() {
|
||||
assert.equal(count, 3);
|
||||
done();
|
||||
};
|
||||
tick(0);
|
||||
this.player.cancel();
|
||||
tick(1000);
|
||||
});
|
||||
});
|
||||
461
rpg-docs/public/bower_components/web-animations-next/test/js/player.js
vendored
Normal file
461
rpg-docs/public/bower_components/web-animations-next/test/js/player.js
vendored
Normal file
@@ -0,0 +1,461 @@
|
||||
suite('player', function() {
|
||||
setup(function() {
|
||||
webAnimationsMinifill.timeline._players = [];
|
||||
});
|
||||
test('zero duration animation works', function() {
|
||||
tick(90);
|
||||
var p = document.body.animate([], 0);
|
||||
tick(100);
|
||||
assert.equal(p.startTime, 100);
|
||||
assert.equal(p.currentTime, 0);
|
||||
});
|
||||
test('playing works as expected', function() {
|
||||
tick(90);
|
||||
var p = document.body.animate([], 2000);
|
||||
tick(100);
|
||||
assert.equal(p.startTime, 100);
|
||||
assert.equal(p.currentTime, 0);
|
||||
tick(300);
|
||||
assert.equal(p.startTime, 100);
|
||||
assert.equal(p.currentTime, 200);
|
||||
});
|
||||
test('pause at start of play', function() {
|
||||
tick(90);
|
||||
var p = document.body.animate([], 2000);
|
||||
p.pause();
|
||||
tick(100);
|
||||
assert.equal(p.currentTime, 0);
|
||||
tick(300);
|
||||
p.play();
|
||||
assert.equal(p.currentTime, 0);
|
||||
tick(310);
|
||||
assert.equal(p.currentTime, 0);
|
||||
assert.equal(p.startTime, 310);
|
||||
|
||||
var p = document.body.animate([], 2000);
|
||||
p.startTime = -690;
|
||||
p.pause();
|
||||
assert.equal(p.currentTime, null);
|
||||
tick(700);
|
||||
p.play();
|
||||
tick(701);
|
||||
assert.equal(p.currentTime, 1000);
|
||||
tick(800);
|
||||
assert.equal(p.currentTime, 1099);
|
||||
assert.equal(p.startTime, -299);
|
||||
});
|
||||
test('pausing works as expected', function() {
|
||||
tick(190);
|
||||
var p = document.body.animate([], 3000);
|
||||
tick(200);
|
||||
tick(1500);
|
||||
assert.equal(p.startTime, 200);
|
||||
assert.equal(p.currentTime, 1300);
|
||||
p.pause();
|
||||
assert.equal(p.startTime, null);
|
||||
assert.equal(p.currentTime, null);
|
||||
tick(2500);
|
||||
assert.equal(p.startTime, null);
|
||||
assert.equal(p.currentTime, 1300);
|
||||
p.play();
|
||||
tick(2510);
|
||||
assert.equal(p.startTime, 1210);
|
||||
assert.equal(p.currentTime, 1300);
|
||||
tick(3500);
|
||||
assert.equal(p.startTime, 1210);
|
||||
assert.equal(p.currentTime, 2290);
|
||||
});
|
||||
test('reversing works as expected', function() {
|
||||
tick(290);
|
||||
var p = document.body.animate([], 1000);
|
||||
tick(300);
|
||||
assert.equal(p.startTime, 300);
|
||||
assert.equal(p.currentTime, 0);
|
||||
tick(600);
|
||||
assert.equal(p.startTime, 300);
|
||||
assert.equal(p.currentTime, 300);
|
||||
assert.equal(p.playbackRate, 1);
|
||||
p.reverse();
|
||||
tick(600);
|
||||
assert.equal(p.startTime, 900);
|
||||
assert.equal(p.currentTime, 300);
|
||||
assert.equal(p.playbackRate, -1);
|
||||
tick(700);
|
||||
assert.equal(p.startTime, 900);
|
||||
assert.equal(p.currentTime, 200);
|
||||
});
|
||||
test('reversing after pausing', function() {
|
||||
tick(90);
|
||||
var p = document.body.animate([], 1000);
|
||||
tick(100);
|
||||
tick(600);
|
||||
p.reverse();
|
||||
tick(601);
|
||||
tick(700);
|
||||
assert.equal(p.startTime, 1101);
|
||||
assert.equal(p.currentTime, 401);
|
||||
});
|
||||
test('reversing after finishing works as expected', function() {
|
||||
tick(90);
|
||||
var p = document.body.animate([], 1000);
|
||||
tick(100);
|
||||
tick(1200);
|
||||
assert.equal(p.finished, true);
|
||||
assert.equal(p.startTime, 100);
|
||||
assert.equal(p.currentTime, 1000);
|
||||
tick(1500);
|
||||
assert.equal(p.currentTime, 1000);
|
||||
assert.equal(isTicking(), false);
|
||||
p.reverse();
|
||||
assert.equal(p._startTime, null);
|
||||
assert.equal(p.currentTime, 1000);
|
||||
tick(1600);
|
||||
assert.equal(p.startTime, 2600);
|
||||
assert.equal(p.currentTime, 1000);
|
||||
});
|
||||
test('playing after finishing works as expected', function() {
|
||||
tick(90);
|
||||
var p = document.body.animate([], 1000);
|
||||
tick(100);
|
||||
tick(1200);
|
||||
assert.equal(p.finished, true);
|
||||
assert.equal(p.startTime, 100);
|
||||
assert.equal(p.currentTime, 1000);
|
||||
tick(1500);
|
||||
assert.equal(p.currentTime, 1000);
|
||||
assert.equal(isTicking(), false);
|
||||
p.play();
|
||||
assert.equal(p.startTime, null);
|
||||
assert.equal(p.currentTime, 0);
|
||||
tick(1600);
|
||||
assert.equal(p.startTime, 1600);
|
||||
assert.equal(p.currentTime, 0);
|
||||
});
|
||||
test('limiting works as expected', function() {
|
||||
tick(390);
|
||||
var p = document.body.animate([], 1000);
|
||||
tick(400);
|
||||
assert.equal(p.startTime, 400);
|
||||
assert.equal(p.currentTime, 0);
|
||||
tick(900);
|
||||
assert.equal(p.startTime, 400);
|
||||
assert.equal(p.currentTime, 500);
|
||||
tick(1400);
|
||||
assert.equal(p.startTime, 400);
|
||||
assert.equal(p.currentTime, 1000);
|
||||
tick(1500);
|
||||
assert.equal(p.startTime, 400);
|
||||
assert.equal(p.currentTime, 1000);
|
||||
p.reverse();
|
||||
assert.equal(p.playbackRate, -1);
|
||||
assert.equal(p.currentTime, 1000);
|
||||
assert.equal(p._startTime, null);
|
||||
tick(2000);
|
||||
assert.equal(p.currentTime, 1000);
|
||||
assert.equal(p.startTime, 3000);
|
||||
tick(2200);
|
||||
assert.equal(p.currentTime, 800);
|
||||
assert.equal(p.startTime, 3000);
|
||||
tick(3200);
|
||||
assert.equal(p.currentTime, 0);
|
||||
assert.equal(p.startTime, 3000);
|
||||
tick(3500);
|
||||
assert.equal(p.currentTime, 0);
|
||||
assert.equal(p.startTime, 3000);
|
||||
});
|
||||
test('play after limit works as expected', function() {
|
||||
tick(490);
|
||||
var p = document.body.animate([], 2000);
|
||||
tick(500);
|
||||
tick(2600);
|
||||
assert.equal(p.currentTime, 2000);
|
||||
assert.equal(p.startTime, 500);
|
||||
assert.equal(p.finished, true);
|
||||
assert.equal(p.playbackRate, 1);
|
||||
setTicking(true);
|
||||
p.play();
|
||||
tick(2700);
|
||||
assert.equal(p.startTime, 2700);
|
||||
assert.equal(p.currentTime, 0);
|
||||
assert.equal(p.finished, false);
|
||||
assert.equal(p.playbackRate, 1);
|
||||
});
|
||||
test('play after limit works as expected (reversed)', function() {
|
||||
tick(590);
|
||||
var p = document.body.animate([], 3000);
|
||||
tick(600);
|
||||
tick(700);
|
||||
p.reverse();
|
||||
tick(701);
|
||||
tick(900);
|
||||
assert.equal(p.startTime, 801);
|
||||
assert.equal(p.currentTime, 0);
|
||||
assert.equal(p.finished, true);
|
||||
assert.equal(p.playbackRate, -1);
|
||||
setTicking(true);
|
||||
p.play();
|
||||
tick(1000);
|
||||
assert.equal(p.startTime, 4000);
|
||||
assert.equal(p.currentTime, 3000);
|
||||
assert.equal(p.finished, false);
|
||||
assert.equal(p.playbackRate, -1);
|
||||
});
|
||||
test('seeking works as expected', function() {
|
||||
tick(690);
|
||||
var p = document.body.animate([], 2000);
|
||||
tick(700);
|
||||
tick(900);
|
||||
assert.equal(p.currentTime, 200);
|
||||
p.currentTime = 600;
|
||||
assert.equal(p.currentTime, 600);
|
||||
assert.equal(p.startTime, 300);
|
||||
p.reverse();
|
||||
tick(1000);
|
||||
assert.equal(p.startTime, 1600);
|
||||
p.currentTime = 300;
|
||||
assert.equal(p.currentTime, 300);
|
||||
assert.equal(p.startTime, 1300);
|
||||
});
|
||||
test('seeking while paused works as expected', function() {
|
||||
tick(790);
|
||||
var p = document.body.animate([], 1000);
|
||||
tick(800);
|
||||
tick(1000);
|
||||
p.pause();
|
||||
assert.equal(p.currentTime, null);
|
||||
assert.equal(p.startTime, null);
|
||||
assert.equal(p.paused, true);
|
||||
p.currentTime = 500;
|
||||
assert.equal(p.startTime, null);
|
||||
assert.equal(p.paused, true);
|
||||
});
|
||||
test('setting start time while paused is ignored', function() {
|
||||
tick(900);
|
||||
var p = document.body.animate([], 1234);
|
||||
p.pause();
|
||||
assert.equal(p.startTime, null);
|
||||
assert.equal(p.currentTime, null);
|
||||
p.startTime = 2232;
|
||||
assert.equal(p.startTime, null);
|
||||
assert.equal(p.currentTime, null);
|
||||
});
|
||||
test('finishing works as expected', function() {
|
||||
tick(1000);
|
||||
var p = document.body.animate([], 2000);
|
||||
p.finish();
|
||||
assert.equal(p.startTime, 0);
|
||||
assert.equal(p.currentTime, 2000);
|
||||
p.reverse();
|
||||
p.finish();
|
||||
assert.equal(p.currentTime, 0);
|
||||
assert.equal(p.startTime, 2000);
|
||||
tick(2000);
|
||||
});
|
||||
test('cancelling clears all effects', function() {
|
||||
tick(0);
|
||||
var target = document.createElement('div');
|
||||
document.documentElement.appendChild(target);
|
||||
var player = target.animate([{marginLeft: '50px'}, {marginLeft: '50px'}], 1000);
|
||||
tick(10);
|
||||
tick(110);
|
||||
assert.equal(getComputedStyle(target).marginLeft, '50px');
|
||||
player.cancel();
|
||||
// getComputedStyle forces a tick.
|
||||
assert.equal(getComputedStyle(target).marginLeft, '0px');
|
||||
assert.deepEqual(webAnimationsMinifill.timeline._players, []);
|
||||
tick(120);
|
||||
assert.equal(getComputedStyle(target).marginLeft, '0px');
|
||||
assert.deepEqual(webAnimationsMinifill.timeline._players, []);
|
||||
document.documentElement.removeChild(target);
|
||||
});
|
||||
test('startTime is set on first tick if timeline hasn\'t started', function() {
|
||||
webAnimationsMinifill.timeline.currentTime = undefined;
|
||||
var p = document.body.animate([], 1000);
|
||||
tick(0);
|
||||
tick(100);
|
||||
assert.equal(p.startTime, 0);
|
||||
});
|
||||
test('players which are finished and not filling get discarded', function() {
|
||||
tick(90);
|
||||
var nofill = document.body.animate([], 100);
|
||||
var fill = document.body.animate([], {duration: 100, fill: 'forwards'});
|
||||
assert.deepEqual(webAnimationsMinifill.timeline._players, [nofill._player || nofill, fill._player || fill]);
|
||||
tick(100);
|
||||
assert.deepEqual(webAnimationsMinifill.timeline._players, [nofill._player || nofill, fill._player || fill]);
|
||||
tick(400);
|
||||
assert.deepEqual(webAnimationsMinifill.timeline._players, [fill._player || fill]);
|
||||
});
|
||||
test('discarded players get re-added on modification', function() {
|
||||
tick(90);
|
||||
var player = document.body.animate([], 100);
|
||||
tick(100);
|
||||
tick(400);
|
||||
assert.deepEqual(webAnimationsMinifill.timeline._players, []);
|
||||
player.currentTime = 0;
|
||||
assert.deepEqual(webAnimationsMinifill.timeline._players, [player._player || player]);
|
||||
});
|
||||
test('players in the before phase are not discarded', function() {
|
||||
tick(100);
|
||||
var player = document.body.animate([], 100);
|
||||
player.currentTime = -50;
|
||||
tick(110);
|
||||
assert.deepEqual(webAnimationsMinifill.timeline._players, [player._player || player]);
|
||||
});
|
||||
test('players that go out of effect should not clear the effect of players that are in effect', function() {
|
||||
var target = document.createElement('div');
|
||||
document.body.appendChild(target);
|
||||
tick(0);
|
||||
var playerBehind = target.animate([{marginLeft: '200px'}, {marginLeft: '200px'}], 200);
|
||||
var playerInfront = target.animate([{marginLeft: '100px'}, {marginLeft: '100px'}], 100);
|
||||
tick(50);
|
||||
assert.equal(getComputedStyle(target).marginLeft, '100px', 't = 50');
|
||||
tick(150);
|
||||
assert.equal(getComputedStyle(target).marginLeft, '200px', 't = 150');
|
||||
tick(250);
|
||||
assert.equal(getComputedStyle(target).marginLeft, '0px', 't = 250');
|
||||
document.body.removeChild(target);
|
||||
});
|
||||
test('player modifications should update CSS effects immediately', function() {
|
||||
var target = document.createElement('div');
|
||||
document.body.appendChild(target);
|
||||
tick(0);
|
||||
var playerBehind = target.animate([{width: '1234px'}, {width: '1234px'}], {duration: 1, fill: 'both'});
|
||||
var playerInfront = target.animate([{width: '0px'}, {width: '100px'}], 100);
|
||||
assert.equal(getComputedStyle(target).width, '0px');
|
||||
playerInfront.currentTime = 50;
|
||||
assert.equal(getComputedStyle(target).width, '50px');
|
||||
playerInfront.currentTime = 100;
|
||||
assert.equal(getComputedStyle(target).width, '1234px');
|
||||
playerInfront.play();
|
||||
assert.equal(getComputedStyle(target).width, '0px');
|
||||
playerInfront.startTime = -50;
|
||||
assert.equal(getComputedStyle(target).width, '50px');
|
||||
document.body.removeChild(target);
|
||||
});
|
||||
test('Player that hasn\'t been played has playState \'idle\'', function() {
|
||||
var source = new minifillAnimation(document.body, [], 1000);
|
||||
var p = new Player(source);
|
||||
assert.equal(p.playState, 'idle');
|
||||
});
|
||||
test('playState works for a simple animation', function() {
|
||||
var p = document.body.animate([], 1000);
|
||||
tick(0);
|
||||
assert.equal(p.playState, 'running');
|
||||
tick(100);
|
||||
assert.equal(p.playState, 'running');
|
||||
p.pause();
|
||||
assert.equal(p.playState, 'pending');
|
||||
tick(101);
|
||||
assert.equal(p.playState, 'paused');
|
||||
p.play();
|
||||
assert.equal(p.playState, 'pending');
|
||||
tick(102);
|
||||
assert.equal(p.playState, 'running');
|
||||
tick(1002);
|
||||
assert.equal(p.playState, 'finished');
|
||||
});
|
||||
test('Play after cancel', function() {
|
||||
var p = document.body.animate([], 1000);
|
||||
assert.equal(p.playState, 'pending');
|
||||
tick(0);
|
||||
p.cancel();
|
||||
assert.equal(p.playState, 'idle');
|
||||
assert.equal(p.currentTime, null);
|
||||
assert.equal(p.startTime, null);
|
||||
tick(1);
|
||||
assert.equal(p.playState, 'idle');
|
||||
assert.equal(p.currentTime, null);
|
||||
assert.equal(p.startTime, null);
|
||||
p.play();
|
||||
assert.equal(p.playState, 'pending');
|
||||
assert.equal(p.currentTime, 0);
|
||||
assert.equal(p.startTime, null);
|
||||
tick(10);
|
||||
assert.equal(p.playState, 'running');
|
||||
assert.equal(p.currentTime, 0);
|
||||
assert.equal(p.startTime, 10);
|
||||
});
|
||||
test('Reverse after cancel', function() {
|
||||
var p = document.body.animate([], 300);
|
||||
tick(0);
|
||||
p.cancel();
|
||||
assert.equal(p.playState, 'idle');
|
||||
assert.equal(p.currentTime, null);
|
||||
assert.equal(p.startTime, null);
|
||||
tick(1);
|
||||
p.reverse();
|
||||
assert.equal(p.playState, 'pending');
|
||||
assert.equal(p.currentTime, 300);
|
||||
assert.equal(p.startTime, null);
|
||||
tick(100);
|
||||
assert.equal(p.playState, 'running');
|
||||
assert.equal(p.currentTime, 300);
|
||||
assert.equal(p.startTime, 400);
|
||||
tick(300);
|
||||
assert.equal(p.playState, 'running');
|
||||
assert.equal(p.currentTime, 100);
|
||||
assert.equal(p.startTime, 400);
|
||||
tick(400);
|
||||
assert.equal(p.playState, 'finished');
|
||||
assert.equal(p.currentTime, 0);
|
||||
assert.equal(p.startTime, 400);
|
||||
});
|
||||
test('Finish after cancel', function() {
|
||||
var p = document.body.animate([], 300);
|
||||
tick(0);
|
||||
p.cancel();
|
||||
assert.equal(p.playState, 'idle');
|
||||
assert.equal(p.currentTime, null);
|
||||
assert.equal(p.startTime, null);
|
||||
tick(1);
|
||||
p.finish();
|
||||
assert.equal(p.playState, 'idle');
|
||||
assert.equal(p.currentTime, null);
|
||||
assert.equal(p.startTime, null);
|
||||
tick(2);
|
||||
assert.equal(p.playState, 'idle');
|
||||
assert.equal(p.currentTime, null);
|
||||
assert.equal(p.startTime, null);
|
||||
});
|
||||
test('Pause after cancel', function() {
|
||||
var p = document.body.animate([], 300);
|
||||
tick(0);
|
||||
p.cancel();
|
||||
assert.equal(p.playState, 'idle');
|
||||
assert.equal(p.currentTime, null);
|
||||
assert.equal(p.startTime, null);
|
||||
tick(1);
|
||||
p.pause();
|
||||
assert.equal(p.playState, 'idle');
|
||||
assert.equal(p.currentTime, null);
|
||||
assert.equal(p.startTime, null);
|
||||
});
|
||||
test('Players ignore NaN times', function() {
|
||||
var p = document.body.animate([], 300);
|
||||
p.startTime = 100;
|
||||
tick(110);
|
||||
assert.equal(p.currentTime, 10);
|
||||
p.startTime = NaN;
|
||||
assert.equal(p.startTime, 100);
|
||||
p.currentTime = undefined;
|
||||
assert.equal(p.currentTime, 10);
|
||||
});
|
||||
test('play() should not set a start time', function() {
|
||||
var p = document.body.animate([], 1000);
|
||||
p.cancel();
|
||||
assert.equal(p.startTime, null);
|
||||
assert.equal(p.playState, 'idle');
|
||||
p.play();
|
||||
assert.equal(p.startTime, null);
|
||||
assert.equal(p.playState, 'pending');
|
||||
});
|
||||
test('reverse() should not set a start time', function() {
|
||||
var p = document.body.animate([], 1000);
|
||||
p.cancel();
|
||||
assert.equal(p.startTime, null);
|
||||
assert.equal(p.playState, 'idle');
|
||||
p.reverse();
|
||||
assert.equal(p.startTime, null);
|
||||
assert.equal(p.playState, 'pending');
|
||||
});
|
||||
});
|
||||
30
rpg-docs/public/bower_components/web-animations-next/test/js/property-interpolation.js
vendored
Normal file
30
rpg-docs/public/bower_components/web-animations-next/test/js/property-interpolation.js
vendored
Normal file
@@ -0,0 +1,30 @@
|
||||
suite('property-interpolation', function() {
|
||||
test('unmatched inputs return step interpolation', function() {
|
||||
tests = [['unknown', 'input', 'tuple'],
|
||||
['unknown', '10px', '50px'],
|
||||
['width', '100px', 'auto'],
|
||||
['width', 'auto', '100px']];
|
||||
for (var i = 0; i < tests.length; i++) {
|
||||
var property = tests[i][0];
|
||||
var left = tests[i][1];
|
||||
var right = tests[i][2];
|
||||
interpolation = webAnimationsMinifill.propertyInterpolation(property, left, right);
|
||||
assert.equal(interpolation(-1), left);
|
||||
assert.equal(interpolation(0), left);
|
||||
assert.equal(interpolation(0.45), left);
|
||||
assert.equal(interpolation(0.5), right);
|
||||
assert.equal(interpolation(0.55), right);
|
||||
assert.equal(interpolation(1), right);
|
||||
assert.equal(interpolation(2), right);
|
||||
}
|
||||
});
|
||||
|
||||
test('registers camel cased property names', function() {
|
||||
function merge(a, b) {
|
||||
return [a, b, function(x) { return a + b; }];
|
||||
};
|
||||
webAnimationsMinifill.addPropertiesHandler(Number, merge, ['dummy-property']);
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('dummy-property', 1, 2)(0.5), 3);
|
||||
assert.equal(webAnimationsMinifill.propertyInterpolation('dummyProperty', 5, 3)(0.5), 8);
|
||||
});
|
||||
});
|
||||
16
rpg-docs/public/bower_components/web-animations-next/test/js/tick.js
vendored
Normal file
16
rpg-docs/public/bower_components/web-animations-next/test/js/tick.js
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
suite('tick-tests', function() {
|
||||
setup(function() { webAnimationsMinifill.timeline._players = []; });
|
||||
|
||||
test('players are in effect but ticking stops once forward fill is reached', function() {
|
||||
tick(90);
|
||||
var player = document.body.animate([], {duration: 1000, fill: 'forwards'});
|
||||
tick(100);
|
||||
tick(600);
|
||||
assert.equal(webAnimationsMinifill.timeline._players.length, 1);
|
||||
assert.equal(isTicking(), true);
|
||||
tick(1100);
|
||||
assert.equal(player.finished, true);
|
||||
assert.equal(webAnimationsMinifill.timeline._players.length, 1);
|
||||
assert.equal(isTicking(), false);
|
||||
});
|
||||
});
|
||||
36
rpg-docs/public/bower_components/web-animations-next/test/js/timeline.js
vendored
Normal file
36
rpg-docs/public/bower_components/web-animations-next/test/js/timeline.js
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
suite('timeline-tests', function() {
|
||||
setup(function() {
|
||||
document.timeline._players = [];
|
||||
webAnimationsMinifill.timeline._players = [];
|
||||
});
|
||||
|
||||
test('no current players', function() {
|
||||
assert.equal(document.timeline.getAnimationPlayers().length, 0);
|
||||
});
|
||||
|
||||
test('getAnimationPlayers', function() {
|
||||
tick(90);
|
||||
assert.equal(document.timeline.getAnimationPlayers().length, 0);
|
||||
var player = document.body.animate([], {duration: 500, iterations: 1});
|
||||
tick(300);
|
||||
assert.equal(document.timeline.getAnimationPlayers().length, 1);
|
||||
|
||||
var player2 = document.body.animate([], {duration: 1000});
|
||||
assert.equal(document.timeline.getAnimationPlayers().length, 2);
|
||||
tick(800);
|
||||
assert.equal(player.finished, true);
|
||||
assert.equal(document.timeline.getAnimationPlayers().length, 1);
|
||||
tick(2000);
|
||||
assert.equal(document.timeline.getAnimationPlayers().length, 0);
|
||||
});
|
||||
|
||||
test('getAnimationPlayers checks cancelled animation', function() {
|
||||
tick(90);
|
||||
assert.equal(document.timeline.getAnimationPlayers().length, 0);
|
||||
var player = document.body.animate([], {duration: 500, iterations: 1});
|
||||
tick(300);
|
||||
assert.equal(document.timeline.getAnimationPlayers().length, 1);
|
||||
player.cancel();
|
||||
assert.equal(document.timeline.getAnimationPlayers().length, 0);
|
||||
});
|
||||
});
|
||||
51
rpg-docs/public/bower_components/web-animations-next/test/js/timing.js
vendored
Normal file
51
rpg-docs/public/bower_components/web-animations-next/test/js/timing.js
vendored
Normal file
@@ -0,0 +1,51 @@
|
||||
suite('timing', function() {
|
||||
setup(function() {
|
||||
webAnimationsMinifill.timeline._players = [];
|
||||
});
|
||||
|
||||
test('pause and scrub', function() {
|
||||
var player = document.body.animate([], { duration: 1000 });
|
||||
player.pause();
|
||||
|
||||
player.currentTime = 500;
|
||||
assert.equal(player.currentTime, 500);
|
||||
});
|
||||
|
||||
test('pause, scrub and play', function() {
|
||||
var target = document.createElement('div');
|
||||
document.body.appendChild(target);
|
||||
|
||||
var player = target.animate([
|
||||
{ background: 'blue' },
|
||||
{ background: 'red' }
|
||||
], { duration: 1000 });
|
||||
tick(100);
|
||||
player.pause();
|
||||
|
||||
player.currentTime = 200;
|
||||
// http://www.w3.org/TR/web-animations/#the-current-time-of-a-player
|
||||
// currentTime should now mean 'hold time' - this allows scrubbing.
|
||||
assert.equal(player.currentTime, 200);
|
||||
player.play();
|
||||
|
||||
tick(200);
|
||||
tick(300);
|
||||
assert.equal(player.currentTime, 300);
|
||||
assert.equal(player.startTime, 0);
|
||||
});
|
||||
|
||||
test('sanity-check NaN timing', function() {
|
||||
// This has no actual tests, but will infinite loop without fix.
|
||||
|
||||
var player = document.body.animate([], {
|
||||
duration: 2000,
|
||||
easing: 'ease-in' // fails only with cubic easing, not linear
|
||||
});
|
||||
tick(100);
|
||||
player.currentTime = NaN;
|
||||
tick(200);
|
||||
|
||||
player = document.body.animate([], { duration: NaN, easing: 'ease-out' });
|
||||
tick(300);
|
||||
});
|
||||
});
|
||||
171
rpg-docs/public/bower_components/web-animations-next/test/js/transform-handler.js
vendored
Normal file
171
rpg-docs/public/bower_components/web-animations-next/test/js/transform-handler.js
vendored
Normal file
@@ -0,0 +1,171 @@
|
||||
suite('transform-handler parsing', function() {
|
||||
test('parse skew values', function() {
|
||||
assert.deepEqual(parseTransform('skew(10deg) skew(12deg,45deg) skewX(0) skewY(1.5rad)'), [
|
||||
{t: 'skew', d: [{deg: 10}, {deg: 0}]},
|
||||
{t: 'skew', d: [{deg: 12}, {deg: 45}]},
|
||||
{t: 'skewx', d: [{deg: 0}]},
|
||||
{t: 'skewy', d: [{rad: 1.5}]}
|
||||
]);
|
||||
});
|
||||
|
||||
test('parse scale values', function() {
|
||||
assert.deepEqual(parseTransform('scale(-2) scale(3,-4) scaleX(5) scaleY(-1) scaleZ(-3)'), [
|
||||
{t: 'scale', d: [-2, -2]},
|
||||
{t: 'scale', d: [3, -4]},
|
||||
{t: 'scalex', d: [5]},
|
||||
{t: 'scaley', d: [-1]},
|
||||
{t: 'scalez', d: [-3]}
|
||||
]);
|
||||
assert.deepEqual(parseTransform('scale3d(-2, 0, 7)'),
|
||||
[{t: 'scale3d', d: [-2, 0, 7]}]);
|
||||
});
|
||||
|
||||
test('parse rotate values', function() {
|
||||
assert.deepEqual(parseTransform('rotate(10deg) rotateX(0) rotateY(1.5rad) rotateZ(50grad)'), [
|
||||
{t: 'rotate', d: [{deg: 10}]},
|
||||
{t: 'rotatex', d: [{deg: 0}]},
|
||||
{t: 'rotatey', d: [{rad: 1.5}]},
|
||||
{t: 'rotatez', d: [{grad: 50}]}
|
||||
]);
|
||||
});
|
||||
|
||||
test('parse translate values', function() {
|
||||
assert.deepEqual(parseTransform('translate(20%, 30px) translate(30em, 40%) translate(50vw) translate(0)'), [
|
||||
{t: 'translate', d: [{'%': 20}, {px: 30}]},
|
||||
{t: 'translate', d: [{em: 30}, {'%': 40}]},
|
||||
{t: 'translate', d: [{vw: 50}, {px: 0}]},
|
||||
{t: 'translate', d: [{px: 0}, {px: 0}]}
|
||||
]);
|
||||
assert.deepEqual(parseTransform('translateX(10px) translateX(20%) translateX(0)'), [
|
||||
{t: 'translatex', d: [{px: 10}]},
|
||||
{t: 'translatex', d: [{'%': 20}]},
|
||||
{t: 'translatex', d: [{px: 0}]}
|
||||
]);
|
||||
assert.deepEqual(parseTransform('translateY(10px) translateY(20%) translateY(0)'), [
|
||||
{t: 'translatey', d: [{px: 10}]},
|
||||
{t: 'translatey', d: [{'%': 20}]},
|
||||
{t: 'translatey', d: [{px: 0}]}
|
||||
]);
|
||||
assert.deepEqual(parseTransform('translateZ(10px) translateZ(0)'), [
|
||||
{t: 'translatez', d: [{px: 10}]},
|
||||
{t: 'translatez', d: [{px: 0}]}
|
||||
]);
|
||||
assert.deepEqual(parseTransform('translate3d(10px, 20px, 30px) translate3d(0, 40%, 0) translate3d(50%, 0, 60px)'), [
|
||||
{t: 'translate3d', d: [{px: 10}, {px: 20}, {px: 30}]},
|
||||
{t: 'translate3d', d: [{px: 0}, {'%': 40}, {px: 0}]},
|
||||
{t: 'translate3d', d: [{'%': 50}, {px: 0}, {px: 60}]}
|
||||
]);
|
||||
});
|
||||
|
||||
test('invalid transforms fail to parse', function() {
|
||||
assert.isUndefined(parseTransform('translate(10px'));
|
||||
assert.isUndefined(parseTransform('translate()'));
|
||||
assert.isUndefined(parseTransform('translatex()'));
|
||||
assert.isUndefined(parseTransform('translatex(5)'));
|
||||
assert.isUndefined(parseTransform('rotate(5)'));
|
||||
assert.isUndefined(parseTransform('skew(5)'));
|
||||
assert.isUndefined(parseTransform('scale(5px)'));
|
||||
assert.isUndefined(parseTransform('rotatex(5px)'));
|
||||
});
|
||||
});
|
||||
|
||||
suite('transform-handler interpolation', function() {
|
||||
test('simple transform interpolations', function() {
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translateX(10px)',
|
||||
'translateX(20px)')(0.2),
|
||||
'translatex(12px)');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translate(10px, 10px) rotate(20deg)',
|
||||
'translate(20px, 20px) rotate(90deg)')(0.2),
|
||||
'translate(12px,12px) rotate(34deg)');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translate(10px, 10em) rotate(20deg)',
|
||||
'translate(20em, 20px) rotate(90deg)')(0.5),
|
||||
'translate(calc(5px + 10em),calc(5em + 10px)) rotate(55deg)');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'rotateY(1000deg)',
|
||||
'rotateY(3000deg)')(0.4),
|
||||
'rotatey(1800deg)');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'scale(6)',
|
||||
'scale(1,-4)')(0.2),
|
||||
'scale(5,4)');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'skewX(5deg) translateY(5px)',
|
||||
'skewX(-35deg) translateY(45px)')(0.25),
|
||||
'skewx(-5deg) translatey(15px)');
|
||||
});
|
||||
|
||||
test('transform interpolations with conversion to primitives', function() {
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translateX(10px)',
|
||||
'translate(20px, 10px)')(0.2),
|
||||
'translate(12px,2px)');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translateX(10px)',
|
||||
'translateY(10px)')(0.2),
|
||||
'translate(8px,2px)');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'translateX(10px)',
|
||||
'translateZ(10px)')(0.2),
|
||||
'translate3d(8px,0px,2px)');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'scaleX(6)',
|
||||
'scale(1,6)')(0.2),
|
||||
'scale(5,2)');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'skew(10deg)',
|
||||
'skewY(30deg)')(0.2),
|
||||
'skew(8deg,6deg)');
|
||||
});
|
||||
|
||||
test('transform interpolations with none', function() {
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'none',
|
||||
'scale(5) translateX(100px) rotate(1000deg)')(0.25),
|
||||
'scale(2,2) translatex(25px) rotate(250deg)');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'scale(5) translateX(100px) rotate(1000deg)',
|
||||
'none')(0.75),
|
||||
'scale(2,2) translatex(25px) rotate(250deg)');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'none',
|
||||
'scaleX(5) skewY(100grad)')(0.25),
|
||||
'scalex(2) skewy(25grad)');
|
||||
assert.equal(
|
||||
webAnimationsMinifill.propertyInterpolation(
|
||||
'transform',
|
||||
'none',
|
||||
'none')(0.4),
|
||||
'none');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user