Document-getAnimations.tentative.html (6174B)
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 const div = addDiv(t); 40 41 // Add a couple of transitions 42 div.style.top = '0px'; 43 div.style.left = '0px'; 44 getComputedStyle(div).transitionProperty; 45 46 div.style.transition = 'all 100s'; 47 div.style.top = '100px'; 48 div.style.left = '100px'; 49 50 var animations = document.getAnimations(); 51 assert_equals(animations.length, 2, 52 'getAnimations returns two running CSS Transitions'); 53 assert_equals(animations[0].transitionProperty, 'left'); 54 assert_equals(animations[1].transitionProperty, 'top'); 55 }, 'getAnimations for CSS Transitions sort by property name'); 56 57 promise_test(async t => { 58 const div = addDiv(t); 59 60 // Add a couple of transitions 61 div.style.top = '0px'; 62 div.style.left = '0px'; 63 getComputedStyle(div).transitionProperty; 64 65 div.style.transition = 'all 100s'; 66 div.style.top = '100px'; 67 div.style.left = '100px'; 68 69 var animations = document.getAnimations(); 70 assert_equals(animations.length, 2, 71 'getAnimations returns two running CSS Transitions'); 72 assert_equals(animations[0].transitionProperty, 'left'); 73 assert_equals(animations[1].transitionProperty, 'top'); 74 75 // Add one more transition. As the previous call to getAnimations triggered a 76 // style change, the new animation is in a higher transition generation even 77 // though no frame was rendered for the previous transitions. 78 div.style.opacity = '1' 79 div.style.transition = 'all 100s'; 80 div.style.opacity = '0' 81 animations = document.getAnimations(); 82 assert_equals(animations.length, 3, 83 'getAnimations returns three running CSS Transitions'); 84 assert_equals(animations[0].transitionProperty, 'left', '1'); 85 assert_equals(animations[1].transitionProperty, 'top', '2'); 86 assert_equals(animations[2].transitionProperty, 'opacity', '3'); 87 }, 'getAnimations for CSS Transitions sort by transition generation'); 88 89 function pseudoTest(description, testMarkerPseudos) { 90 test(t => { 91 // Create two divs with the following arrangement: 92 // 93 // parent 94 // (::marker,) // Optionally 95 // ::before, 96 // ::after 97 // | 98 // child 99 100 addStyle(t, { 101 '.init::after': 'content: ""; width: 0px; transition: all 100s;', 102 '.init::before': 'content: ""; width: 0px; transition: all 100s;', 103 '.change::after': 'width: 100px;', 104 '.change::before': 'width: 100px;', 105 }); 106 107 if (testMarkerPseudos) { 108 addStyle(t, { 109 '.init::marker': 'content: ""; color: red; transition: all 100s;', 110 '.change::marker': 'color: green;', 111 }); 112 } 113 114 const parent = addDiv(t, { 'style': 'display: list-item' }); 115 const child = addDiv(t); 116 parent.appendChild(child); 117 118 parent.style.left = '0px'; 119 parent.style.transition = 'left 100s'; 120 parent.classList.add('init'); 121 child.style.left = '0px'; 122 child.style.transition = 'left 100s'; 123 getComputedStyle(parent).left; 124 125 parent.style.left = '100px'; 126 parent.classList.add('change'); 127 child.style.left = '100px'; 128 129 const expectedTransitions = [ 130 [parent, undefined], 131 [parent, '::marker'], 132 [parent, '::before'], 133 [parent, '::after'], 134 [child, undefined], 135 ]; 136 if (!testMarkerPseudos) { 137 expectedTransitions.splice(1, 1); 138 } 139 140 const transitions = document.getAnimations(); 141 assert_equals( 142 transitions.length, 143 expectedTransitions.length, 144 'CSS transition on both pseudo-elements and elements are returned' 145 ); 146 147 for (const [index, expected] of expectedTransitions.entries()) { 148 const [element, pseudo] = expected; 149 const actual = transitions[index]; 150 151 if (pseudo) { 152 assert_equals( 153 actual.effect.target, 154 element, 155 `Transition #${index + 1} has expected target` 156 ); 157 assert_equals( 158 actual.effect.pseudoElement, 159 pseudo, 160 `Transition #${index + 1} has expected pseudo type` 161 ); 162 } else { 163 assert_equals( 164 actual.effect.target, 165 element, 166 `Transition #${index + 1} has expected target` 167 ); 168 assert_equals( 169 actual.effect.pseudoElement, 170 null, 171 `Transition #${index + 1} has null pseudo type` 172 ); 173 } 174 } 175 }, description); 176 } 177 178 pseudoTest('CSS Transitions targetting (pseudo-)elements should have correct ' 179 + 'order after sorting', false) 180 pseudoTest('CSS Transitions targetting (pseudo-)elements should have correct ' 181 + 'order after sorting (::marker)', true) 182 183 promise_test(async t => { 184 const div = addDiv(t, { style: 'left: 0px; transition: all 50ms' }); 185 getComputedStyle(div).left; 186 187 div.style.left = '100px'; 188 const animations = div.getAnimations(); 189 assert_equals(animations.length, 1, 'Got transition'); 190 await animations[0].finished; 191 192 assert_equals(document.getAnimations().length, 0, 193 'No animations returned'); 194 }, 'Transitions are not returned after they have finished'); 195 196 </script>