pageswap-push-from-click.html (2650B)
1 <!DOCTYPE html> 2 <title>View transitions: pageswap navigationactivation for push navigations from user click</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 4 <link rel="author" href="mailto:khushalsagar@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 10 <style> 11 @view-transition { 12 navigation: auto; 13 } 14 </style> 15 <script> 16 const expectedUrl = location.href + '?new'; 17 18 const params = new URLSearchParams(location.search); 19 // The page the popup navigates to. 20 const is_new_page = params.has('new'); 21 // The initial page in the popup. 22 const is_popup_page = params.has('popup'); 23 // The test page itself. 24 const is_test_page = !is_popup_page && !is_new_page; 25 26 const channel = new BroadcastChannel("testchannel"); 27 28 if (is_test_page) { 29 const expectedUrl = location.href + "?new"; 30 const expectedEvents = ["pageswap", "transition", expectedUrl, "push","from", "pagehide"]; 31 32 promise_test(async t => { 33 let popup; 34 onload = () => { 35 document.getElementById('nav_link').remove(); 36 window.events = []; 37 popup = window.open("?popup"); 38 t.add_cleanup(() => popup.close()); 39 40 popup.addEventListener("load", () => { 41 popup.requestAnimationFrame( 42 () => popup.requestAnimationFrame(() => { 43 let nav_link = popup.document.getElementById('nav_link'); 44 test_driver 45 .click(nav_link) 46 .catch(() => assert_unreached("click failed")); 47 })); 48 }); 49 }; 50 51 await new Promise(resolve => { 52 channel.addEventListener( 53 "message", t.step_func(async (e) => { 54 if (e.data === "nav") { 55 assert_array_equals(window.events, expectedEvents, 'incorrect event order'); 56 popup.close(); 57 resolve(); 58 } 59 })); 60 }); 61 }, `pageswap on navigation from user click`); 62 } else if (is_popup_page) { 63 onpageswap = (e) => { 64 window.opener.events.push("pageswap"); 65 if (e.viewTransition != null) 66 window.opener.events.push("transition"); 67 window.opener.events.push(e.activation.entry.url); 68 window.opener.events.push(e.activation.navigationType); 69 if (e.activation.from == navigation.currentEntry) 70 window.opener.events.push("from"); 71 }; 72 73 onpagehide = () => { 74 window.opener.events.push("pagehide"); 75 channel.postMessage("nav"); 76 }; 77 } 78 </script> 79 <body> 80 <a id="nav_link" href='/css/css-view-transitions/navigation/pageswap-push-from-click.html?new'>Click me</a> 81 </body>