html-becomes-fixed.html (1085B)
1 <!DOCTYPE html> 2 <html id=r class=reftest-wait> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="match" href="html-becomes-fixed-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <style> 9 10 html { view-transition-name: none } 11 .f { position: fixed; background: #eee } 12 ::view-transition-group(*) { animation-duration: 0s } 13 #part { position: absolute; left: 50px; top: 50px; width: 50px; height: 50px; 14 padding: 5px; view-transition-name: p; background: #acf; } 15 16 </style> 17 </head> 18 <body> 19 <div id=part>A</div> 20 <script> 21 22 raf = () => new Promise(r => { requestAnimationFrame(r); }); 23 async function runTest() { 24 await waitForCompositorReady(); 25 26 const t = document.startViewTransition(() => { part.innerText = "B"; }) 27 await raf(); 28 await raf(); 29 r.classList.add("f"); 30 await t.finished; 31 32 const t2 = document.startViewTransition(() => { part.innerText = "A"; }); 33 await t2.finished; 34 35 await raf(); 36 takeScreenshot(); 37 } 38 onload = () => runTest(); 39 40 </script> 41 </body> 42 </html>