basic.html (2441B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Soft Navigation Detection: The Basics.</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script> 11 // The click handler is triggered by user interaction; it modifies 12 // the DOM, causing a paint, and also changes the URL. 13 // This constitutes a soft navigation. 14 function clickHandler() { 15 const greeting = document.createElement("div"); 16 greeting.textContent = "Hello, World."; 17 document.body.appendChild(greeting); 18 history.pushState({}, "", "/greeting.html"); 19 } 20 </script> 21 </head> 22 <body> 23 <div id="click-target" onclick="clickHandler()">Click here!</div> 24 25 <script> 26 test(() => { 27 const observer = new PerformanceObserver(() => {}); 28 observer.observe({ type: "soft-navigation", buffered: true }); 29 const records = observer.takeRecords(); 30 observer.disconnect(); 31 assert_equals(records.length, 0, "Expecting empty list."); 32 }, "No soft navigation detection without user interaction."); 33 34 promise_test(async (t) => { 35 const test_origin = new URL(location.href).origin; 36 37 let entries; 38 new PerformanceObserver((list, observer) => { 39 entries = list.getEntries(); 40 observer.disconnect(); 41 }).observe({ type: "soft-navigation" }); 42 43 // Initiate the user interaction to trigger the soft navigation. 44 if (test_driver) { 45 test_driver.click(document.getElementById("click-target")); 46 } 47 48 await t.step_wait( 49 () => entries !== undefined, 50 "Waiting for entries from PerformanceObserver.", 51 ); 52 53 // Now check there's one entry, and it's fields. 54 // The SoftNavigationEntry instance is spec'd in 55 // https://github.com/WICG/soft-navigations/ 56 assert_equals(entries.length, 1, "Expecting one soft navigation entry."); 57 58 const expected_url = new URL("/greeting.html", test_origin); 59 assert_equals( 60 entries[0].name, 61 expected_url.toString(), 62 "Soft navigation should record destination URL as its name.", 63 ); 64 }, "Detect soft navigation after a click."); 65 </script> 66 </body> 67 </html>