Skip to content

Commit 8412304

Browse files
rjwrightrjwright
committed
THIS IS A WIP. Added more group pause tests. Found some bugs.
Added child-player-pause-after-finish-bug.js tick-after-pause-bug.js group-player-skeleton-tests.js temporarily while I work on these tests and related bugs. They need to be removed and unplugged later. Added some comments to group-player.js that need to be cleaned up before landing. Bugs found: Calling pause->play->tick causes the tick to update the currentTime of the player (which it should not), but pause->tick->play->tick behaves as expected (i.e. the first tick after play restores a playing state, but doesn't touch the currentTime). Pausing a group when some of its children are finished and then playing it again causes the finished children to seek to a currentTime beyond their total duration.
1 parent 5a4c3a8 commit 8412304

5 files changed

+1742
-6
lines changed

‎target-config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@
4242
'test/js/group-constructors.js',
4343
'test/js/group-player.js',
4444
'test/js/group-player-finish-event.js',
45-
'test/js/effect-callback.js');
45+
'test/js/effect-callback.js',
46+
'test/js/tick-after-pause-bug.js',
47+
'test/js/child-player-pause-after-finish-bug.js');
4648

4749
// This object specifies the source and test files for different Web Animation build targets.
4850
var targetConfig = {

‎test/js/child-player-pause-after-finish-bug.js

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
2+
suite('child-player-pause-after-finish-bug', function() {
3+
setup(function() {
4+
document.timeline._players = [];
5+
this.elements = [];
6+
var animationMargin = function(target) {
7+
return new Animation(
8+
target,
9+
[
10+
{marginLeft: '0px'},
11+
{marginLeft: '100px'}
12+
],
13+
500);
14+
};
15+
var animationColor = function(target) {
16+
return new Animation(
17+
target,
18+
[
19+
{backgroundColor: 'black'},
20+
{backgroundColor: 'white'}
21+
],
22+
500);
23+
};
24+
var sequenceWithEffects = function(target) {
25+
return new AnimationSequence(
26+
[
27+
animationMargin(target),
28+
animationColor(target)
29+
]);
30+
};
31+
var seqSimple_target = document.createElement('div');
32+
this.elements.push(seqSimple_target);
33+
var seqSimple_source = sequenceWithEffects(seqSimple_target);
34+
35+
var animSimple_target = document.createElement('div');
36+
this.elements.push(animSimple_target);
37+
var animSimple_source = animationColor(animSimple_target);
38+
39+
this.animSimple_source = animSimple_source;
40+
this.seqSimple_source = seqSimple_source;
41+
});
42+
43+
teardown(function() {
44+
for (var i = 0; i < this.elements.length; i++) {
45+
if (this.elements[i].parent)
46+
this.elements[i].parent.removeChild(this.elements[i]);
47+
}
48+
});
49+
50+
function checkTimes(player, playerState, innerPlayerStates, description) {
51+
description = description ? (description + ' ') : '';
52+
_checkTimes(player, playerState, 0, description + 'top player');
53+
_checkTimes(player, innerPlayerStates, 0, description + 'inner player');
54+
}
55+
56+
function _checkTimes(player, timingList, index, trace) {
57+
assert.isDefined(player, trace + ' exists');
58+
if (timingList.length == 0) {
59+
assert.equal(player._childPlayers.length, index, trace + ' no remaining players');
60+
return;
61+
}
62+
if (typeof timingList[0] == 'number') {
63+
if (isNaN(timingList[0]))
64+
assert.ok(isNaN(player.startTime), trace + 'expected NaN startTime');
65+
else
66+
assert.equal(player.startTime, timingList[0], trace + ' startTime');
67+
assert.equal(player.currentTime, timingList[1], trace + ' currentTime');
68+
} else {
69+
_checkTimes(player._childPlayers[index], timingList[0], 0, trace + ' ' + index);
70+
_checkTimes(player, timingList.slice(1), index + 1, trace);
71+
}
72+
}
73+
74+
test('Simple AnimationSequence', function() {
75+
var player = document.timeline.play(this.seqSimple_source);
76+
tick(0);
77+
checkTimes(player, [0, 0], [[0, 0], [500, -500]], 't = 0');
78+
79+
// Tick so that 0 is finished and 1 is started.
80+
tick(700);
81+
checkTimes(player, [0, 700], [[0, 500], [500, 200]], 't = 700');
82+
83+
// Pause, and tick a small amount.
84+
player.pause();
85+
tick(710);
86+
checkTimes(player, [NaN, 700], [[NaN, 500], [NaN, 200]], 't = 710');
87+
88+
// Play and tick a small amount (this should do nothing to the currentTime).
89+
player.play();
90+
tick(720);
91+
checkTimes(player, [20, 700], [[20, 500], [520, 200]], 't = 720');
92+
93+
// Tick so that the while group is finished.
94+
tick(1320);
95+
checkTimes(player, [20, 1000], [[20, 500], [520, 500]], 't = 1320');
96+
});
97+
98+
test('AnimationSequence wrapped in an AnimationGroup', function() {
99+
var player = document.timeline.play(new AnimationGroup([this.seqSimple_source]));
100+
tick(0);
101+
checkTimes(player, [0, 0], [[[0, 0], [500, -500]]], 't = 0');
102+
103+
// Tick so that 0 is finished and 1 is started.
104+
tick(700);
105+
checkTimes(player, [0, 700], [[[0, 500], [500, 200]]], 't = 700');
106+
107+
// Pause, and tick a small amount.
108+
player.pause();
109+
tick(710);
110+
checkTimes(player, [NaN, 700], [[[NaN, 500], [NaN, 200]]], 't = 710');
111+
112+
// Play and tick a small amount (this should do nothing to the currentTime).
113+
player.play();
114+
tick(720);
115+
checkTimes(player, [20, 700], [[[20, 500], [520, 200]]], 't = 720');
116+
117+
// Tick so that the while group is finished.
118+
tick(1320);
119+
checkTimes(player, [20, 1000], [[[20, 500], [520, 500]]], 't = 1320');
120+
});
121+
122+
test('AnimationSequence wrapped in an AnimationSequence', function() {
123+
var player = document.timeline.play(new AnimationSequence([this.seqSimple_source]));
124+
tick(0);
125+
checkTimes(player, [0, 0], [[[0, 0], [500, -500]]], 't = 0');
126+
127+
// Tick so that 0 is finished and 1 is started.
128+
tick(700);
129+
checkTimes(player, [0, 700], [[[0, 500], [500, 200]]], 't = 700');
130+
131+
// Pause, and tick a small amount.
132+
player.pause();
133+
tick(710);
134+
checkTimes(player, [NaN, 700], [[[NaN, 500], [NaN, 200]]], 't = 710');
135+
136+
// Play and tick a small amount (this should do nothing to the currentTime).
137+
player.play();
138+
tick(720);
139+
checkTimes(player, [20, 700], [[[20, 500], [520, 200]]], 't = 720');
140+
141+
// Tick so that the while group is finished.
142+
tick(1320);
143+
checkTimes(player, [20, 1000], [[[20, 500], [520, 500]]], 't = 1320');
144+
});
145+
146+
test('AnimationSequence which is the first child in an AnimationSequence', function() {
147+
var player = document.timeline.play(new AnimationSequence([this.seqSimple_source, this.animSimple_source]));
148+
tick(0);
149+
checkTimes(player, [0, 0], [[[0, 0], [500, -500]], [1000, -1000]], 't = 0');
150+
151+
// Tick so that seq is finished, and last child is started.
152+
tick(1200);
153+
checkTimes(player, [0, 1200], [[[0, 500], [500, 500]], [1000, 200]], 't = 1200');
154+
155+
// Pause, and tick a small amount.
156+
player.pause();
157+
tick(1300);
158+
checkTimes(player, [NaN, 1200], [[[NaN, 500], [NaN, 500]], [NaN, 200]], 't = 1300');
159+
160+
// Play and tick a small amount (this should do nothing to the currentTime).
161+
player.play();
162+
tick(1400);
163+
checkTimes(player, [200, 1200], [[[200, 500], [700, 500]], [1200, 200]], 't = 1400');
164+
165+
// Tick so that the while group is finished.
166+
tick(1800);
167+
checkTimes(player, [200, 1500], [[[200, 500], [700, 500]], [1200, 500]], 't = 1800');
168+
});
169+
170+
171+
test('AnimationGroup wrapped in an AnimationGroup', function() {
172+
var target = document.createElement('div');
173+
var player = document.timeline.play(
174+
new AnimationGroup(
175+
[
176+
new AnimationGroup(
177+
[
178+
new Animation(
179+
target,
180+
[
181+
{backgroundColor: 'blue'},
182+
{backgroundColor: 'red'}
183+
],
184+
500
185+
),
186+
new Animation(
187+
target,
188+
[
189+
{backgroundColor: 'blue'},
190+
{backgroundColor: 'red'}
191+
],
192+
1000
193+
),
194+
])
195+
]));
196+
tick(0);
197+
checkTimes(player, [0, 0], [[[0, 0], [0, 0]]], 't = 0');
198+
199+
// Tick so that 0 is finished and 1 is started.
200+
tick(700);
201+
checkTimes(player, [0, 700], [[[0, 500], [0, 700]]], 't = 700');
202+
203+
// Pause, and tick a small amount.
204+
player.pause();
205+
tick(710);
206+
checkTimes(player, [NaN, 700], [[[NaN, 500], [NaN, 700]]], 't = 710');
207+
208+
// Play and tick a small amount (this should do nothing to the currentTime).
209+
player.play();
210+
tick(720);
211+
checkTimes(player, [20, 700], [[[20, 500], [20, 700]]], 't = 720');
212+
213+
// Tick so that the while group is finished.
214+
tick(1320);
215+
checkTimes(player, [20, 1000], [[[20, 500], [20, 1000]]], 't = 1320');
216+
});
217+
});

0 commit comments

Comments
 (0)