1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
|
<!DOCTYPE html>
<meta charset=utf-8>
<title>
Test chrome-only MutationObserver animation notifications (async tests)
</title>
<!--
This file contains tests for animation mutation observers that require
some asynchronous steps (e.g. waiting for animation events).
Where possible, however, we prefer to write synchronous tests since they are
less to timeout when run on automation. These synchronous tests are located
in test_animation_observers_sync.html.
-->
<script type="application/javascript" src="../testharness.js"></script>
<script type="application/javascript" src="../testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<div id="log"></div>
<style>
@keyframes anim {
to { transform: translate(100px); }
}
@keyframes anotherAnim {
to { transform: translate(0px); }
}
#target {
width: 100px;
height: 100px;
background-color: yellow;
line-height: 16px;
}
</style>
<div id=container><div id=target></div></div>
<script>
var div = document.getElementById("target");
var gRecords = [];
var gObserver = new MutationObserver(newRecords => {
gRecords.push(...newRecords);
});
function setupAsynchronousObserver(t, options) {
gRecords = [];
t.add_cleanup(() => {
gObserver.disconnect();
});
gObserver.observe(options.subtree ? div.parentNode : div,
{ animations: true, subtree: options.subtree });
}
// Adds an event listener and returns a Promise that is resolved when the
// event listener is called.
function await_event(aElement, aEventName) {
return new Promise(aResolve => {
function listener(aEvent) {
aElement.removeEventListener(aEventName, listener);
aResolve();
}
aElement.addEventListener(aEventName, listener);
});
}
function assert_record_list(actual, expected, desc, index, listName) {
assert_equals(actual.length, expected.length,
`${desc} - record[${index}].${listName} length`);
if (actual.length != expected.length) {
return;
}
for (var i = 0; i < actual.length; i++) {
assert_not_equals(actual.indexOf(expected[i]), -1,
`${desc} - record[${index}].${listName} contains expected Animation`);
}
}
function assert_records(expected, desc) {
var records = gRecords;
gRecords = [];
assert_equals(records.length, expected.length, `${desc} - number of records`);
if (records.length != expected.length) {
return;
}
for (var i = 0; i < records.length; i++) {
assert_record_list(records[i].addedAnimations, expected[i].added, desc, i, "addedAnimations");
assert_record_list(records[i].changedAnimations, expected[i].changed, desc, i, "changedAnimations");
assert_record_list(records[i].removedAnimations, expected[i].removed, desc, i, "removedAnimations");
}
}
function assert_records_any_order(expected, desc) {
// Generate a unique label for each Animation object.
let animation_labels = new Map();
let animation_counter = 0;
for (let record of gRecords) {
for (let a of [...record.addedAnimations, ...record.changedAnimations, ...record.removedAnimations]) {
if (!animation_labels.has(a)) {
animation_labels.set(a, ++animation_counter);
}
}
}
for (let record of expected) {
for (let a of [...record.added, ...record.changed, ...record.removed]) {
if (!animation_labels.has(a)) {
animation_labels.set(a, ++animation_counter);
}
}
}
function record_label(record) {
// Generate a label of the form:
//
// <added-animations>:<changed-animations>:<removed-animations>
let added = record.addedAnimations || record.added;
let changed = record.changedAnimations || record.changed;
let removed = record.removedAnimations || record.removed;
return [added .map(a => animation_labels.get(a)).sort().join(),
changed.map(a => animation_labels.get(a)).sort().join(),
removed.map(a => animation_labels.get(a)).sort().join()]
.join(":");
}
// Sort records by their label.
gRecords.sort((a, b) => record_label(a) < record_label(b));
expected.sort((a, b) => record_label(a) < record_label(b));
// Assert the sorted record lists are equal.
assert_records(expected, desc);
}
// -- Tests ------------------------------------------------------------------
// We run all tests first targeting the div and observing the div, then again
// targeting the div and observing its parent while using the subtree:true
// MutationObserver option.
function runTest() {
[
{ observe: div, target: div, subtree: false },
{ observe: div.parentNode, target: div, subtree: true },
].forEach(aOptions => {
var e = aOptions.target;
promise_test(t => {
setupAsynchronousObserver(t, aOptions);
// Clear all styles once test finished since we re-use the same element
// in all test cases.
t.add_cleanup(() => {
e.style = "";
flushComputedStyle(e);
});
// Start a transition.
e.style = "transition: background-color 100s; background-color: lime;";
// Register for the end of the transition.
var transitionEnd = await_event(e, "transitionend");
// The transition should cause the creation of a single Animation.
var animations = e.getAnimations();
assert_equals(animations.length, 1,
"getAnimations().length after transition start");
// Wait for the single MutationRecord for the Animation addition to
// be delivered.
return waitForFrame().then(() => {
assert_records([{ added: animations, changed: [], removed: [] }],
"records after transition start");
// Advance until near the end of the transition, then wait for it to
// finish.
animations[0].currentTime = 99900;
}).then(() => {
return transitionEnd;
}).then(() => {
// After the transition has finished, the Animation should disappear.
assert_equals(e.getAnimations().length, 0,
"getAnimations().length after transition end");
// Wait for the change MutationRecord for seeking the Animation to be
// delivered, followed by the the removal MutationRecord.
return waitForFrame();
}).then(() => {
assert_records([{ added: [], changed: animations, removed: [] },
{ added: [], changed: [], removed: animations }],
"records after transition end");
});
}, `single_transition ${aOptions.subtree ? ': subtree' : ''}`);
// Test that starting a single animation that completes normally
// dispatches an added notification and then a removed notification.
promise_test(t => {
setupAsynchronousObserver(t, aOptions);
t.add_cleanup(() => {
e.style = "";
flushComputedStyle(e);
});
// Start an animation.
e.style = "animation: anim 100s;";
// Register for the end of the animation.
var animationEnd = await_event(e, "animationend");
// The animation should cause the creation of a single Animation.
var animations = e.getAnimations();
assert_equals(animations.length, 1,
"getAnimations().length after animation start");
// Wait for the single MutationRecord for the Animation addition to
// be delivered.
return waitForFrame().then(() => {
assert_records([{ added: animations, changed: [], removed: [] }],
"records after animation start");
// Advance until near the end of the animation, then wait for it to finish.
animations[0].currentTime = 99900;
return animationEnd;
}).then(() => {
// After the animation has finished, the Animation should disappear.
assert_equals(e.getAnimations().length, 0,
"getAnimations().length after animation end");
// Wait for the change MutationRecord from seeking the Animation to
// be delivered, followed by a further MutationRecord for the Animation
// removal.
return waitForFrame();
}).then(() => {
assert_records([{ added: [], changed: animations, removed: [] },
{ added: [], changed: [], removed: animations }],
"records after animation end");
});
}, `single_animation ${aOptions.subtree ? ': subtree' : ''}`);
// Test that starting a single animation that is cancelled by updating
// the animation-fill-mode property dispatches an added notification and
// then a removed notification.
promise_test(t => {
setupAsynchronousObserver(t, aOptions);
t.add_cleanup(() => {
e.style = "";
flushComputedStyle(e);
});
// Start a short, filled animation.
e.style = "animation: anim 100s forwards;";
// Register for the end of the animation.
var animationEnd = await_event(e, "animationend");
// The animation should cause the creation of a single Animation.
var animations = e.getAnimations();
assert_equals(animations.length, 1,
"getAnimations().length after animation start");
// Wait for the single MutationRecord for the Animation addition to
// be delivered.
return waitForFrame().then(() => {
assert_records([{ added: animations, changed: [], removed: [] }],
"records after animation start");
// Advance until near the end of the animation, then wait for it to finish.
animations[0].currentTime = 99900;
return animationEnd;
}).then(() => {
// The only MutationRecord at this point should be the change from
// seeking the Animation.
assert_records([{ added: [], changed: animations, removed: [] }],
"records after animation starts filling");
// Cancel the animation by setting animation-fill-mode.
e.style.animationFillMode = "none";
// Explicitly flush style to make sure the above style change happens.
// Normally we don't need explicit style flush if there is a waitForFrame()
// call but in this particular case we are in the middle of animation events'
// callback handling and requestAnimationFrame handling so that we have no
// chance to process styling even after the requestAnimationFrame handling.
flushComputedStyle(e);
// Wait for the single MutationRecord for the Animation removal to
// be delivered.
return waitForFrame();
}).then(() => {
assert_records([{ added: [], changed: [], removed: animations }],
"records after animation end");
});
}, `single_animation_cancelled_fill ${aOptions.subtree ? ': subtree' : ''}`);
// Test that calling finish() on a paused (but otherwise finished) animation
// dispatches a changed notification.
promise_test(t => {
setupAsynchronousObserver(t, aOptions);
t.add_cleanup(() => {
e.style = "";
flushComputedStyle(e);
});
// Start a long animation
e.style = "animation: anim 100s forwards";
// The animation should cause the creation of a single Animation.
var animations = e.getAnimations();
assert_equals(animations.length, 1,
"getAnimations().length after animation start");
// Wait for the single MutationRecord for the Animation addition to
// be delivered.
return waitForFrame().then(() => {
assert_records([{ added: animations, changed: [], removed: [] }],
"records after animation start");
// Wait until the animation is playing.
return animations[0].ready;
}).then(() => {
// Finish and pause.
animations[0].finish();
animations[0].pause();
// Wait for the pause to complete.
return animations[0].ready;
}).then(() => {
assert_true(
!animations[0].pending && animations[0].playState === "paused",
"playState after finishing and pausing");
// We should have two MutationRecords for the Animation changes:
// one for the finish, one for the pause.
assert_records([{ added: [], changed: animations, removed: [] },
{ added: [], changed: animations, removed: [] }],
"records after finish() and pause()");
// Call finish() again.
animations[0].finish();
assert_equals(animations[0].playState, "finished",
"playState after finishing from paused state");
// Wait for the single MutationRecord for the Animation change to
// be delivered. Even though the currentTime does not change, the
// playState will change.
return waitForFrame();
}).then(() => {
assert_records([{ added: [], changed: animations, removed: [] }],
"records after finish() and pause()");
// Cancel the animation.
e.style = "";
// Wait for the single removal notification.
return waitForFrame();
}).then(() => {
assert_records([{ added: [], changed: [], removed: animations }],
"records after animation end");
});
}, `finish_from_pause ${aOptions.subtree ? ': subtree' : ''}`);
// Test that calling play() on a paused Animation dispatches a changed
// notification.
promise_test(t => {
setupAsynchronousObserver(t, aOptions);
t.add_cleanup(() => {
e.style = "";
flushComputedStyle(e);
});
// Start a long, paused animation
e.style = "animation: anim 100s paused";
// The animation should cause the creation of a single Animation.
var animations = e.getAnimations();
assert_equals(animations.length, 1,
"getAnimations().length after animation start");
// Wait for the single MutationRecord for the Animation addition to
// be delivered.
return waitForFrame().then(() => {
assert_records([{ added: animations, changed: [], removed: [] }],
"records after animation start");
// Wait until the animation is ready
return animations[0].ready;
}).then(() => {
// Play
animations[0].play();
// Wait for the single MutationRecord for the Animation change to
// be delivered.
return animations[0].ready;
}).then(() => {
assert_records([{ added: [], changed: animations, removed: [] }],
"records after play()");
// Redundant play
animations[0].play();
// Wait to ensure no change is dispatched
return waitForFrame();
}).then(() => {
assert_records([], "records after redundant play()");
// Cancel the animation.
e.style = "";
// Wait for the single removal notification.
return waitForFrame();
}).then(() => {
assert_records([{ added: [], changed: [], removed: animations }],
"records after animation end");
});
}, `play ${aOptions.subtree ? ': subtree' : ''}`);
// Test that a non-cancelling change to an animation followed immediately by a
// cancelling change will only send an animation removal notification.
promise_test(t => {
setupAsynchronousObserver(t, aOptions);
t.add_cleanup(() => {
e.style = "";
flushComputedStyle(e);
});
// Start a long animation.
e.style = "animation: anim 100s;";
// The animation should cause the creation of a single Animation.
var animations = e.getAnimations();
assert_equals(animations.length, 1,
"getAnimations().length after animation start");
// Wait for the single MutationRecord for the Animation addition to
// be delivered.
return waitForFrame().then(() => {;
assert_records([{ added: animations, changed: [], removed: [] }],
"records after animation start");
// Update the animation's delay such that it is still running.
e.style.animationDelay = "-1s";
// Then cancel the animation by updating its duration.
e.style.animationDuration = "0.5s";
// We should get a single removal notification.
return waitForFrame();
}).then(() => {
assert_records([{ added: [], changed: [], removed: animations }],
"records after animation end");
});
}, `coalesce_change_cancel ${aOptions.subtree ? ': subtree' : ''}`);
});
}
promise_test(t => {
setupAsynchronousObserver(t, { observe: div, subtree: true });
t.add_cleanup(() => {
div.style = "";
flushComputedStyle(div);
});
// Add style for pseudo elements
var extraStyle = document.createElement('style');
document.head.appendChild(extraStyle);
var sheet = extraStyle.sheet;
var rules = { ".before::before": "animation: anim 100s; content: '';",
".after::after" : "animation: anim 100s, anim 100s; " +
"content: '';"};
for (var selector in rules) {
sheet.insertRule(selector + '{' + rules[selector] + '}',
sheet.cssRules.length);
}
// Create a tree with two children:
//
// div
// (::before)
// (::after)
// / \
// childA childB(::before)
var childA = document.createElement("div");
var childB = document.createElement("div");
div.appendChild(childA);
div.appendChild(childB);
// Start an animation on each (using order: childB, div, childA)
//
// We include multiple animations on some nodes so that we can test batching
// works as expected later in this test.
childB.style = "animation: anim 100s";
div.style = "animation: anim 100s, anim 100s, anim 100s";
childA.style = "animation: anim 100s, anim 100s";
// Start animations targeting to pseudo element of div and childB.
childB.classList.add("before");
div.classList.add("after");
div.classList.add("before");
// Check all animations we have in this document
var docAnims = document.getAnimations();
assert_equals(docAnims.length, 10, "total animations");
var divAnimations = div.getAnimations();
var childAAnimations = childA.getAnimations();
var childBAnimations = childB.getAnimations();
var divBeforeAnimations =
docAnims.filter(x => (x.effect.target == div &&
x.effect.pseudoElement == "::before"));
var divAfterAnimations =
docAnims.filter(x => (x.effect.target == div &&
x.effect.pseudoElement == "::after"));
var childBPseudoAnimations =
docAnims.filter(x => (x.effect.target == childB &&
x.effect.pseudoElement == "::before"));
var seekRecords;
// The order in which we get the corresponding records is currently
// based on the order we visit these nodes when updating styles.
//
// That is because we don't do any document-level batching of animation
// mutation records when we flush styles. We may introduce that in the
// future but for now all we are interested in testing here is that the
// right records are generated, but we allow them to occur in any order.
return waitForFrame().then(() => {
assert_records_any_order(
[{ added: divAfterAnimations, changed: [], removed: [] },
{ added: childAAnimations, changed: [], removed: [] },
{ added: childBAnimations, changed: [], removed: [] },
{ added: childBPseudoAnimations, changed: [], removed: [] },
{ added: divAnimations, changed: [], removed: [] },
{ added: divBeforeAnimations, changed: [], removed: [] }],
"records after simultaneous animation start");
// The one case where we *do* currently perform document-level (or actually
// timeline-level) batching is when animations are updated from a refresh
// driver tick. In particular, this means that when animations finish
// naturally the removed records should be dispatched according to the
// position of the elements in the tree.
// First, flatten the set of animations. we put the animations targeting to
// pseudo elements last. (Actually, we don't care the order in the list.)
var animations = [ ...divAnimations,
...childAAnimations,
...childBAnimations,
...divBeforeAnimations,
...divAfterAnimations,
...childBPseudoAnimations ];
// Fast-forward to *just* before the end of the animation.
animations.forEach(animation => animation.currentTime = 99999);
// Prepare the set of expected change MutationRecords, one for each
// animation that was seeked.
seekRecords = animations.map(
p => ({ added: [], changed: [p], removed: [] })
);
return await_event(div, "animationend");
}).then(() => {
// After the changed notifications, which will be dispatched in the order that
// the animations were seeked, we should get removal MutationRecords in order
// (div, div::before, div::after), childA, (childB, childB::before).
// Note: The animations targeting to the pseudo element are appended after
// the animations of its parent element.
divAnimations = [ ...divAnimations,
...divBeforeAnimations,
...divAfterAnimations ];
childBAnimations = [ ...childBAnimations, ...childBPseudoAnimations ];
assert_records(seekRecords.concat(
{ added: [], changed: [], removed: divAnimations },
{ added: [], changed: [], removed: childAAnimations },
{ added: [], changed: [], removed: childBAnimations }),
"records after finishing");
// Clean up
div.classList.remove("before");
div.classList.remove("after");
div.style = "";
childA.remove();
childB.remove();
extraStyle.remove();
});
}, "tree_ordering: subtree");
// Test that animations removed by auto-removal trigger an event
promise_test(async t => {
setupAsynchronousObserver(t, { observe: div, subtree: false });
// Start two animations such that one will be auto-removed
const animA = div.animate(
{ opacity: 1 },
{ duration: 100 * MS_PER_SEC, fill: 'forwards' }
);
const animB = div.animate(
{ opacity: 1 },
{ duration: 100 * MS_PER_SEC, fill: 'forwards' }
);
// Wait for the MutationRecords corresponding to each addition.
await waitForNextFrame();
assert_records(
[
{ added: [animA], changed: [], removed: [] },
{ added: [animB], changed: [], removed: [] },
],
'records after animation start'
);
// Finish the animations -- this should cause animA to be replaced, and
// automatically removed.
animA.finish();
animB.finish();
// Wait for the MutationRecords corresponding to the timing changes and the
// subsequent removal to be delivered.
await waitForNextFrame();
assert_records(
[
{ added: [], changed: [animA], removed: [] },
{ added: [], changed: [animB], removed: [] },
{ added: [], changed: [], removed: [animA] },
],
'records after finishing'
);
// Restore animA.
animA.persist();
// Wait for the MutationRecord corresponding to the re-addition of animA.
await waitForNextFrame();
assert_records(
[{ added: [animA], changed: [], removed: [] }],
'records after persisting'
);
// Tidy up
animA.cancel();
animB.cancel();
await waitForNextFrame();
assert_records(
[
{ added: [], changed: [], removed: [animA] },
{ added: [], changed: [], removed: [animB] },
],
'records after tidying up end'
);
}, 'Animations automatically removed are reported');
setup({explicit_done: true});
SpecialPowers.pushPrefEnv(
{
set: [
["dom.animations-api.autoremove.enabled", true],
["dom.animations-api.implicit-keyframes.enabled", true],
],
},
function() {
runTest();
done();
}
);
</script>
|
