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
|
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>Test getAnimations() for generated-content elements</title>
<script type="application/javascript" src="../testharness.js"></script>
<script type="application/javascript" src="../testharnessreport.js"></script>
<script type="application/javascript" src="../testcommon.js"></script>
<style>
@keyframes anim { }
@keyframes anim2 { }
.before::before {
content: '';
animation: anim 100s;
}
.after::after {
content: '';
animation: anim 100s, anim2 100s;
}
</style>
</head>
<body>
<div id='root' class='before after'>
<div class='before'></div>
<div></div>
</div>
<script>
'use strict';
const {Cc, Ci, Cu} = SpecialPowers;
function getWalker(node) {
var walker = Cc["@mozilla.org/inspector/deep-tree-walker;1"].
createInstance(Ci.inIDeepTreeWalker);
walker.showAnonymousContent = true;
walker.init(node.ownerDocument, Ci.nsIDOMNodeFilter.SHOW_ALL);
walker.currentNode = node;
return walker;
}
test(function(t) {
var root = document.getElementById('root');
// Flush first to make sure the generated-content elements are ready
// in the tree.
flushComputedStyle(root);
var before = getWalker(root).firstChild();
var after = getWalker(root).lastChild();
// Sanity Checks
assert_equals(document.getAnimations().length, 4,
'All animations in this document');
assert_equals(before.tagName, '_moz_generated_content_before',
'First child is ::before element');
assert_equals(after.tagName, '_moz_generated_content_after',
'Last child is ::after element');
// Test Element.getAnimations() for generated-content elements
assert_equals(before.getAnimations().length, 1,
'Animations of ::before generated-content element');
assert_equals(after.getAnimations().length, 2,
'Animations of ::after generated-content element');
}, 'Element.getAnimations() used on generated-content elements');
test(function(t) {
var root = document.getElementById('root');
flushComputedStyle(root);
var walker = getWalker(root);
var animations = [];
var element = walker.currentNode;
while (element) {
if (element.getAnimations) {
animations = [...animations, ...element.getAnimations()];
}
element = walker.nextNode();
}
assert_equals(animations.length, document.getAnimations().length,
'The number of animations got by DeepTreeWalker and ' +
'document.getAnimations() should be the same');
}, 'Element.getAnimations() used by traversing DeepTreeWalker');
</script>
</body>
|
