transformed-element-scroll-transform.html (1738B)
1 <!DOCTYPE html> 2 <html style="reftest-wait"> 3 <head> 4 <title>Scroll position transform should be the last one to be applied</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="transformed-element-scroll-transform-ref.html"> 8 <style> 9 :root { 10 view-transition-name: none; 11 } 12 13 ::view-transition-group(*) { 14 animation-duration: 10s; 15 } 16 17 #target { 18 width: 100px; 19 height: 100px; 20 background: green; 21 margin: 300px; 22 view-transition-name: target; 23 rotate: 90deg; 24 } 25 </style> 26 </head> 27 <body> 28 <div id="target"></div> 29 <div style="height: 1000px"></div> 30 <script> 31 function scrollBy(y) { 32 return new Promise(resolve => { 33 addEventListener("scroll", () => { 34 requestAnimationFrame(() => { 35 requestAnimationFrame(resolve); 36 }); 37 }, { once: true, capture: true }); 38 document.documentElement.scrollBy({ 39 top: y, 40 behavior: "instant" 41 }); 42 }); 43 } 44 addEventListener("load", async () => { 45 await scrollBy(200); 46 const transition = document.startViewTransition(); 47 await transition.ready; 48 requestAnimationFrame(() => { 49 requestAnimationFrame(() => { 50 document.documentElement.classList.remove("reftest-wait"); 51 }); 52 }); 53 }); 54 </script> 55 </body> 56 </html>