test_hide_and_show.html (7332B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="../testcommon.js"></script> 6 <style> 7 @keyframes move { 8 100% { 9 transform: translateX(100px); 10 } 11 } 12 13 div.pseudo::before { 14 animation: move 0.01s; 15 content: 'content'; 16 } 17 18 </style> 19 <body> 20 <div id="log"></div> 21 <script> 22 'use strict'; 23 24 test(function(t) { 25 var div = addDiv(t, { style: 'animation: move 100s infinite' }); 26 assert_equals(div.getAnimations().length, 1, 27 'display:initial element has animations'); 28 29 div.style.display = 'none'; 30 assert_equals(div.getAnimations().length, 0, 31 'display:none element has no animations'); 32 }, 'Animation stops playing when the element style display is set to "none"'); 33 34 test(function(t) { 35 var parentElement = addDiv(t); 36 var div = addDiv(t, { style: 'animation: move 100s infinite' }); 37 parentElement.appendChild(div); 38 assert_equals(div.getAnimations().length, 1, 39 'display:initial element has animations'); 40 41 parentElement.style.display = 'none'; 42 assert_equals(div.getAnimations().length, 0, 43 'Element in display:none subtree has no animations'); 44 }, 'Animation stops playing when its parent element style display is set ' + 45 'to "none"'); 46 47 test(function(t) { 48 var div = addDiv(t, { style: 'animation: move 100s infinite' }); 49 assert_equals(div.getAnimations().length, 1, 50 'display:initial element has animations'); 51 52 div.style.display = 'none'; 53 assert_equals(div.getAnimations().length, 0, 54 'display:none element has no animations'); 55 56 div.style.display = ''; 57 assert_equals(div.getAnimations().length, 1, 58 'Element which is no longer display:none has animations ' + 59 'again'); 60 }, 'Animation starts playing when the element gets shown from ' + 61 '"display:none" state'); 62 63 test(function(t) { 64 var parentElement = addDiv(t); 65 var div = addDiv(t, { style: 'animation: move 100s infinite' }); 66 parentElement.appendChild(div); 67 assert_equals(div.getAnimations().length, 1, 68 'display:initial element has animations'); 69 70 parentElement.style.display = 'none'; 71 assert_equals(div.getAnimations().length, 0, 72 'Element in display:none subtree has no animations'); 73 74 parentElement.style.display = ''; 75 assert_equals(div.getAnimations().length, 1, 76 'Element which is no longer in display:none subtree has ' + 77 'animations again'); 78 }, 'Animation starts playing when its parent element is shown from ' + 79 '"display:none" state'); 80 81 test(function(t) { 82 var div = addDiv(t, { style: 'animation: move 100s forwards' }); 83 assert_equals(div.getAnimations().length, 1, 84 'display:initial element has animations'); 85 86 var animation = div.getAnimations()[0]; 87 animation.finish(); 88 assert_equals(div.getAnimations().length, 1, 89 'Element has finished animation if the animation ' + 90 'fill-mode is forwards'); 91 92 div.style.display = 'none'; 93 assert_equals(animation.playState, 'idle', 94 'The animation.playState should be idle'); 95 96 assert_equals(div.getAnimations().length, 0, 97 'display:none element has no animations'); 98 99 div.style.display = ''; 100 assert_equals(div.getAnimations().length, 1, 101 'Element which is no longer display:none has animations ' + 102 'again'); 103 assert_not_equals(div.getAnimations()[0], animation, 104 'Restarted animation is a newly-generated animation'); 105 106 }, 'Animation which has already finished starts playing when the element ' + 107 'gets shown from "display:none" state'); 108 109 test(function(t) { 110 var parentElement = addDiv(t); 111 var div = addDiv(t, { style: 'animation: move 100s forwards' }); 112 parentElement.appendChild(div); 113 assert_equals(div.getAnimations().length, 1, 114 'display:initial element has animations'); 115 116 var animation = div.getAnimations()[0]; 117 animation.finish(); 118 assert_equals(div.getAnimations().length, 1, 119 'Element has finished animation if the animation ' + 120 'fill-mode is forwards'); 121 122 parentElement.style.display = 'none'; 123 assert_equals(animation.playState, 'idle', 124 'The animation.playState should be idle'); 125 assert_equals(div.getAnimations().length, 0, 126 'Element in display:none subtree has no animations'); 127 128 parentElement.style.display = ''; 129 assert_equals(div.getAnimations().length, 1, 130 'Element which is no longer in display:none subtree has ' + 131 'animations again'); 132 133 assert_not_equals(div.getAnimations()[0], animation, 134 'Restarted animation is a newly-generated animation'); 135 136 }, 'Animation with fill:forwards which has already finished starts playing ' + 137 'when its parent element is shown from "display:none" state'); 138 139 test(function(t) { 140 var parentElement = addDiv(t); 141 var div = addDiv(t, { style: 'animation: move 100s' }); 142 parentElement.appendChild(div); 143 assert_equals(div.getAnimations().length, 1, 144 'display:initial element has animations'); 145 146 var animation = div.getAnimations()[0]; 147 animation.finish(); 148 assert_equals(div.getAnimations().length, 0, 149 'Element does not have finished animations'); 150 151 parentElement.style.display = 'none'; 152 assert_equals(animation.playState, 'idle', 153 'The animation.playState should be idle'); 154 assert_equals(div.getAnimations().length, 0, 155 'Element in display:none subtree has no animations'); 156 157 parentElement.style.display = ''; 158 assert_equals(div.getAnimations().length, 1, 159 'Element which is no longer in display:none subtree has ' + 160 'animations again'); 161 162 assert_not_equals(div.getAnimations()[0], animation, 163 'Restarted animation is a newly-generated animation'); 164 165 }, 'CSS Animation which has already finished starts playing when its parent ' + 166 'element is shown from "display:none" state'); 167 168 promise_test(function(t) { 169 var div = addDiv(t, { 'class': 'pseudo' }); 170 var eventWatcher = new EventWatcher(t, div, 'animationend'); 171 172 assert_equals(document.getAnimations().length, 1, 173 'CSS animation on pseudo element'); 174 175 return eventWatcher.wait_for('animationend').then(function() { 176 assert_equals(document.getAnimations().length, 0, 177 'No CSS animation on pseudo element after the animation ' + 178 'finished'); 179 180 // Remove the class which generated this pseudo element. 181 div.classList.remove('pseudo'); 182 183 // We need to wait for two frames to process re-framing. 184 // The callback of 'animationend' is processed just before rAF callbacks, 185 // and rAF callbacks are processed before re-framing process, so waiting for 186 // one rAF callback is not sufficient. 187 return waitForAnimationFrames(2); 188 }).then(function() { 189 // Add the class again to re-generate pseudo element. 190 div.classList.add('pseudo'); 191 assert_equals(document.getAnimations().length, 1, 192 'A new CSS animation on pseudo element'); 193 }); 194 }, 'CSS animation on pseudo element restarts after the pseudo element that ' + 195 'had a finished CSS animation is re-generated'); 196 197 </script> 198 </body>