reset-state-after-scrolled-view-transition.html (1669B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>Finishing a View Transition on a scrolled page should properly reset state</title> 5 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 6 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 7 <link rel="match" href="reset-state-after-scrolled-view-transition-ref.html"> 8 <style> 9 html { 10 background: lightblue; 11 } 12 body { 13 background-color: lightgreen; 14 } 15 ::view-transition-group(*) { 16 animation-duration: 2s; 17 } 18 </style> 19 </head> 20 <body> 21 <p>Start</p> 22 <div id="block" style="height: 150vh"></div> 23 <p>End</p> 24 25 <script> 26 function scrollBy(y) { 27 return new Promise(resolve => { 28 addEventListener("scroll", () => { 29 requestAnimationFrame(() => { 30 requestAnimationFrame(resolve); 31 }); 32 }, { once: true, capture: true }); 33 document.documentElement.scrollBy({ 34 top: y, 35 behavior: "instant" 36 }); 37 }); 38 } 39 addEventListener("load", async () => { 40 await scrollBy(document.documentElement.scrollHeight / 2); 41 const transition = document.startViewTransition(() => { block.style.height = '200vh' }); 42 await transition.ready; 43 scrollBy(document.documentElement.scrollHeight / 2); 44 await transition.finished; 45 document.documentElement.classList.remove("reftest-wait"); 46 }); 47 </script> 48 </body> 49 </html>