зеркало из https://github.com/mozilla/gecko-dev.git
84 строки
2.5 KiB
HTML
84 строки
2.5 KiB
HTML
<!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>
|