tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

test_generated_content_getAnimations.html (2547B)

      1 <!DOCTYPE html>
      2 <head>
      3 <meta charset=utf-8>
      4 <title>Test getAnimations() for generated-content elements</title>
      5 <script type="application/javascript" src="../testharness.js"></script>
      6 <script type="application/javascript" src="../testharnessreport.js"></script>
      7 <script type="application/javascript" src="../testcommon.js"></script>
      8 <style>
      9 @keyframes anim { }
     10 @keyframes anim2 { }
     11 .before::before {
     12  content: '';
     13  animation: anim 100s;
     14 }
     15 .after::after {
     16  content: '';
     17  animation: anim 100s, anim2 100s;
     18 }
     19 </style>
     20 </head>
     21 <body>
     22 <div id='root' class='before after'>
     23  <div class='before'></div>
     24  <div></div>
     25 </div>
     26 <script>
     27 'use strict';
     28 
     29 function getWalker(node) {
     30  var walker = Cc["@mozilla.org/inspector/deep-tree-walker;1"].
     31    createInstance(Ci.inIDeepTreeWalker);
     32  walker.showAnonymousContent = true;
     33  walker.init(node.ownerDocument, NodeFilter.SHOW_ALL);
     34  walker.currentNode = node;
     35  return walker;
     36 }
     37 
     38 test(function(t) {
     39  var root = document.getElementById('root');
     40  // Flush first to make sure the generated-content elements are ready
     41  // in the tree.
     42  flushComputedStyle(root);
     43  var before = getWalker(root).firstChild();
     44  var after = getWalker(root).lastChild();
     45 
     46  // Sanity Checks
     47  assert_equals(document.getAnimations().length, 4,
     48                'All animations in this document');
     49  assert_equals(before.tagName, '_moz_generated_content_before',
     50                'First child is ::before element');
     51  assert_equals(after.tagName, '_moz_generated_content_after',
     52                'Last child is ::after element');
     53 
     54  // Test Element.getAnimations() for generated-content elements
     55  assert_equals(before.getAnimations().length, 1,
     56                'Animations of ::before generated-content element');
     57  assert_equals(after.getAnimations().length, 2,
     58                'Animations of ::after generated-content element');
     59 }, 'Element.getAnimations() used on generated-content elements');
     60 
     61 test(function(t) {
     62  var root = document.getElementById('root');
     63  flushComputedStyle(root);
     64  var walker = getWalker(root);
     65 
     66  var animations = [];
     67  var element = walker.currentNode;
     68  while (element) {
     69    if (element.getAnimations) {
     70      animations = [...animations, ...element.getAnimations()];
     71    }
     72    element = walker.nextNode();
     73  }
     74 
     75  assert_equals(animations.length, document.getAnimations().length,
     76                'The number of animations got by DeepTreeWalker and ' +
     77                'document.getAnimations() should be the same');
     78 }, 'Element.getAnimations() used by traversing DeepTreeWalker');
     79 
     80 </script>
     81 </body>