LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/Document-getAnimations.tentative.html

   1 <!doctype html>
   2 <meta charset=utf-8>
   3 <title>Document.getAnimations() for CSS transitions</title>
   4 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#animation-composite-order">
   5 <script src="/resources/testharness.js"></script>
   6 <script src="/resources/testharnessreport.js"></script>
   7 <script src="support/helper.js"></script>
   8 <div id="log"></div>
   9 <script>
  10 'use strict';
  11
  12 test(t => {
  13   assert_equals(document.getAnimations().length, 0,
  14     'getAnimations returns an empty sequence for a document'
  15     + ' with no animations');
  16 }, 'getAnimations for non-animated content');
  17
  18 test(t => {
  19   const div = addDiv(t);
  20
  21   // Add a couple of transitions
  22   div.style.left = '0px';
  23   div.style.top = '0px';
  24   getComputedStyle(div).transitionProperty;
  25
  26   div.style.transition = 'all 100s';
  27   div.style.left = '100px';
  28   div.style.top = '100px';
  29   assert_equals(document.getAnimations().length, 2,
  30                 'getAnimations returns two running CSS Transitions');
  31
  32   // Remove both
  33   div.style.transitionProperty = 'none';
  34   assert_equals(document.getAnimations().length, 0,
  35                 'getAnimations returns no running CSS Transitions');
  36 }, 'getAnimations for CSS Transitions');
  37
  38 test(t => {
  39   // Create two divs with the following arrangement:
  40   //
  41   //       parent
  42   //    (::marker,)
  43   //     ::before,
  44   //     ::after
  45   //        |
  46   //       child
  47
  48   addStyle(t, {
  49     '.init::after': 'content: ""; width: 0px; transition: all 100s;',
  50     '.init::before': 'content: ""; width: 0px; transition: all 100s;',
  51     '.change::after': 'width: 100px;',
  52     '.change::before': 'width: 100px;',
  53   });
  54
  55   const supportsMarkerPseudos = CSS.supports('selector(::marker)');
  56   if (supportsMarkerPseudos) {
  57     addStyle(t, {
  58       '.init::marker': 'content: ""; color: red; transition: all 100s;',
  59       '.change::marker': 'color: green;',
  60     });
  61   }
  62
  63   const parent = addDiv(t, { 'style': 'display: list-item' });
  64   const child = addDiv(t);
  65   parent.appendChild(child);
  66
  67   parent.style.left = '0px';
  68   parent.style.transition = 'left 100s';
  69   parent.classList.add('init');
  70   child.style.left = '0px';
  71   child.style.transition = 'left 100s';
  72   getComputedStyle(parent).left;
  73
  74   parent.style.left = '100px';
  75   parent.classList.add('change');
  76   child.style.left = '100px';
  77
  78   const expectedTransitions = [
  79     [parent, undefined],
  80     [parent, '::marker'],
  81     [parent, '::before'],
  82     [parent, '::after'],
  83     [child, undefined],
  84   ];
  85   if (!supportsMarkerPseudos) {
  86     expectedTransitions.splice(1, 1);
  87   }
  88
  89   const transitions = document.getAnimations();
  90   assert_equals(
  91     transitions.length,
  92     expectedTransitions.length,
  93     'CSS transition on both pseudo-elements and elements are returned'
  94   );
  95
  96   for (const [index, expected] of expectedTransitions.entries()) {
  97     const [element, pseudo] = expected;
  98     const actual = transitions[index];
  99
 100     if (pseudo) {
 101       assert_equals(
 102         actual.effect.target.element,
 103         element,
 104         `Transition #${index + 1} has expected target`
 105       );
 106       assert_equals(
 107         actual.effect.target.type,
 108         pseudo,
 109         `Transition #${index + 1} has expected pseudo type`
 110       );
 111     } else {
 112       assert_equals(
 113         actual.effect.target,
 114         element,
 115         `Transition #${index + 1} has expected target`
 116       );
 117     }
 118   }
 119 }, 'CSS Transitions targetting (pseudo-)elements should have correct order '
 120    + 'after sorting');
 121
 122 promise_test(async t => {
 123   const div = addDiv(t, { style: 'left: 0px; transition: all 50ms' });
 124   getComputedStyle(div).left;
 125
 126   div.style.left = '100px';
 127   const animations = div.getAnimations();
 128   assert_equals(animations.length, 1, 'Got transition');
 129   await animations[0].finished;
 130
 131   assert_equals(document.getAnimations().length, 0,
 132                 'No animations returned');
 133 }, 'Transitions are not returned after they have finished');
 134
 135 </script>