pageswap-fired-before-old-state-capture.html (1556B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>View transitions: Test pageswap fires before document capture</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 <link rel="match" href="pageswap-fired-before-old-state-capture-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <script> 9 const params = new URLSearchParams(location.search); 10 const is_new_page = params.has('new'); 11 12 if (is_new_page) { 13 document.documentElement.classList.add('newPage'); 14 addEventListener('pagereveal', e => { 15 e.viewTransition.ready.then(() => { 16 document.getAnimations().forEach(anim => anim.pause()); 17 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 18 }); 19 }); 20 } else { 21 addEventListener('pageswap', e => { 22 document.documentElement.classList.add('oldPage'); 23 }); 24 25 onload = () => { 26 requestAnimationFrame(() => requestAnimationFrame(() => { 27 location.replace(location.href + '?new'); 28 })); 29 }; 30 } 31 </script> 32 <style> 33 @view-transition { 34 navigation: auto; 35 } 36 #target { 37 width: 100px; 38 height: 100px; 39 background-color: limegreen; 40 position: absolute; 41 left: 20px; 42 top: 100px; 43 } 44 45 .oldPage #target { 46 view-transition-name: target; 47 } 48 49 .newPage #target { 50 left: 300px; 51 view-transition-name: target; 52 } 53 54 /* Ensure view-transition snapshots are easily distinguished from live DOM */ 55 :root { 56 view-transition-name: unset; 57 } 58 ::view-transition { 59 background-color: thistle; 60 } 61 </style> 62 <div id="target"></div> 63 </html>