pagereveal-ready-promise.html (1357B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>View transitions: Test pagereveal.ready</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="author" href="mailto:bokan@chromium.org"> 6 <link rel="match" href="pagereveal-ready-promise-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 onload = () => { 22 requestAnimationFrame(() => requestAnimationFrame(() => { 23 location.replace(location.href + '?new'); 24 })); 25 }; 26 } 27 </script> 28 <style> 29 @view-transition { 30 navigation: auto; 31 } 32 #target { 33 width: 100px; 34 height: 100px; 35 background-color: limegreen; 36 position: absolute; 37 left: 20px; 38 top: 100px; 39 view-transition-name: target; 40 } 41 .newPage #target { 42 left: 300px; 43 } 44 45 /* Ensure view-transition snapshots are easily distinguished from live DOM */ 46 :root { 47 view-transition-name: unset; 48 } 49 ::view-transition { 50 background-color: thistle; 51 } 52 </style> 53 <div id="target"></div> 54 </html>