pagereveal-with-view-transition.html (1449B)
1 <!DOCTYPE html> 2 <title>View transitions: pagereveal event provides viewTransition</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 4 <link rel="author" href="mailto:bokan@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 @view-transition { 9 navigation: auto; 10 } 11 </style> 12 <script> 13 const params = new URLSearchParams(location.search); 14 15 switch (params.get("mode") || "test") { 16 case "test": 17 promise_test(async t => { 18 const event = await new Promise(resolve => { 19 window.did_reveal = e => { resolve(e) }; 20 const popup = window.open("?mode=old"); 21 t.add_cleanup(() => popup.close()); 22 }); 23 24 assert_not_equals(event.viewTransition, null, 25 'Navigation with transition must have a viewTransition.'); 26 27 assert_true('skipTransition' in event.viewTransition, 28 'skipTransition in viewTransition'); 29 assert_true('finished' in event.viewTransition, 'finished in viewTransition'); 30 assert_true('ready' in event.viewTransition, 'ready in viewTransition'); 31 assert_true('updateCallbackDone' in event.viewTransition, 32 'updateCallbackDone in viewTransition'); 33 }); 34 break; 35 case "old": 36 onload = () => requestAnimationFrame(() => requestAnimationFrame(() => { 37 location.replace('?mode=new'); 38 })); 39 break; 40 case "new": 41 onpagereveal = e => window.opener.did_reveal(e); 42 break; 43 } 44 </script>