summaryrefslogtreecommitdiffstats
path: root/dom/animation/test/chrome/test_generated_content_getAnimations.html
blob: 04e0f9bd09fae749ffdd497ce896ba407226056a (plain)
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>