Skip to content
1 change: 1 addition & 0 deletions target-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
'test/js/player-finish-event.js',
'test/js/property-interpolation.js',
'test/js/tick.js',
'test/js/timing.js',
'test/js/transform-handler.js'];

var maxifillTest = minifillTest.concat(
Expand Down
16 changes: 16 additions & 0 deletions test/js/animation-constructor.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,20 @@ suite('animation-constructor', function() {
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 steps = [{background: 'blue'}, {background: 'red'}];

var animation = new Animation(target, steps, 200);
assert.equal(animation.timing.duration, 200);

animation = new Animation(target, steps);
assert.isDefined(animation.timing);

animation = new Animation(target, steps, {duration: 200});
var group = new AnimationGroup([animation]);
assert.equal(group.timing.duration, 'auto');
});
});
27 changes: 27 additions & 0 deletions test/js/timing.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
suite('timing-tests', function() {
setup(function() {
document.timeline._players = [];
});

test('changing timing iterations mid-animation', function() {
var animation = new Animation(document.body, [], { duration: 1000 });
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

timing.js is a minifill test, but the Animation constructor is only in the maxifill.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed


// TODO: access internal _timing for now, until .timing is properly generated
var timing = animation._timing;

assert.equal(timing.duration, 1000);
assert.equal(timing.iterations, 1.0);

var player = document.timeline.play(animation);
assert(!player.paused);
assert.equal(player.currentTime, 0);
tick(300);
assert.equal(player.startTime, 300); // why does this pass? the anim is running?
assert.equal(player.currentTime, 300, 'after 300ms tick, currentTime should be 300ms'); // this fails -- what, what?
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The animation was pending until 300, I'd expect that it's currentTime is actually 0 in this case?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After all, it's start time is 300 per line 19.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've fixed this behaviour with feedback on how tick works. The test is still broken though :)


timing.iterations = 0.5;
animation.timing.iterations = 0.5;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI these don't work because we don't yet support these maxifill feature (exposed timing, modifiable timing). They're not on the roadmap for the m39 release.

tick(300);
assert.equal(player.currentTime, 500);
});
});