opt-in-removed-during-transition.html (1677B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>View Transitions: @view-transition removing opt-in doesn't skip active transition</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="opt-in-removed-during-transition-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 @view-transition { 10 navigation: auto; 11 } 12 :root { 13 view-transition-name: none; 14 } 15 ::view-transition { 16 background-color: pink; 17 } 18 ::view-transition-new(target) { 19 animation: none; 20 opacity: 0; 21 } 22 ::view-transition-old(target) { 23 animation: none; 24 opacity: 1; 25 } 26 ::view-transition-group(target) { 27 animation-play-state: paused; 28 } 29 #target { 30 background-color: limegreen; 31 width: 100px; 32 height: 100px; 33 view-transition-name: target; 34 } 35 #target.transitioned { 36 background-color: red; 37 } 38 </style> 39 <script> 40 const params = new URLSearchParams(location.search.substr(1)); 41 const is_starting_page = !params.has('new'); 42 43 if (is_starting_page) { 44 requestAnimationFrame(() => requestAnimationFrame( () => { 45 location.replace(location.href + '?new'); 46 })); 47 } else { 48 addEventListener('pagereveal', async e => { 49 document.getElementById('target').classList.add('transitioned'); 50 await e.viewTransition.ready; 51 await new Promise(resolve => requestAnimationFrame(resolve)); 52 53 // Remove the opt-in after the view transition has started. 54 document.styleSheets[0].cssRules[0].navigation = 'none'; 55 56 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 57 }); 58 } 59 </script> 60 <div id="target"></div> 61 </html>