content-visibility-transition-finished-001.html (1387B)
1 <!DOCTYPE html> 2 <html class="test-wait"> 3 <meta charset="utf-8"> 4 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1822907"> 6 <style> 7 #inner { 8 /* Extremely short so that we can just do a double-rAF and 9 * expect that this transition will have completed: */ 10 transition: opacity 0.01s; 11 } 12 </style> 13 <script> 14 function setup() { 15 // Flush style, in case the document hasn't been styled yet: 16 let origOpacity = getComputedStyle(inner).opacity; 17 18 // Trigger the (extremely short) transition, and proceed to next step 19 // when it finishes. 20 inner.addEventListener("transitionend", handleTransitionEnd); 21 inner.style.opacity = "0.8"; 22 } 23 function handleTransitionEnd(e) { 24 // Hide & unhide the subtree that contained the transition: 25 foo.style.contentVisibility = "hidden"; 26 document.documentElement.offsetHeight; // flush layout 27 foo.style.contentVisibility = ""; 28 29 // Double-rAF to see if we crash when animations are resampled. 30 requestAnimationFrame(() => { requestAnimationFrame(finish) }); 31 } 32 function finish() { 33 // If we get here, we've succeeded; hooray! 34 document.documentElement.removeAttribute("class"); 35 } 36 </script> 37 <body onload="setup()"> 38 <div id="foo"> 39 Hello 40 <div id="inner">Inner</div> 41 </div> 42 </body> 43 </html>