almost-soft-navigation.html (5204B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>No Detection of Almost Soft Navigations.</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 src="../../resources/soft-navigation-test-helper.js"></script> 11 <script> 12 // We append this value to the URL of actualSoftNavigation() to 13 // identify the test, and to ensure it's unique. 14 let global_test_id; 15 16 // This click handler *does* cause a soft navigation, and *each test 17 // ends with detecting it*. This is by design a very simple soft 18 // navigation which we reliably detect - the same as in basic.html. 19 function actualSoftNavigation() { 20 const greeting = document.createElement("div"); 21 greeting.textContent = "Hello, World."; 22 document.body.appendChild(greeting); 23 history.pushState({}, "", "/actual-softnavigation?" + global_test_id); 24 } 25 26 // This click handler won't cause a soft navigation, because it 27 // doesn't change the URL. 28 function noUrlChange() { 29 const greeting = document.createElement("div"); 30 greeting.textContent = "Hello, World."; 31 document.body.appendChild(greeting); 32 } 33 34 // This click handler won't cause a soft navigation, because the 35 // element isn't attached to the DOM. 36 function domNotAttached() { 37 const greeting = document.createElement("div"); 38 greeting.textContent = "Hello, World."; 39 history.pushState({}, "", "/dom-not-attached"); 40 } 41 42 // This click handler won't cause a soft navigation, because it 43 // doesn't change the DOM. 44 function noDomChange() { 45 history.pushState({}, "", "/no-dom-change"); 46 } 47 48 // This click handler won't cause a soft navigation, because it 49 // doesn't paint, even though the element is attached to the DOM. 50 function noPaint() { 51 const greeting = document.createElement("div"); 52 greeting.textContent = "Hello, World."; 53 greeting.style.display = "none"; 54 document.body.appendChild(greeting); 55 history.pushState({}, "", "/no-paint"); 56 } 57 58 // This click handler won't cause a soft navigation, because it 59 // uses history.replaceState() instead of history.pushState(). 60 function replaceState() { 61 const greeting = document.createElement("div"); 62 greeting.textContent = "Hello, World."; 63 document.body.appendChild(greeting); 64 history.replaceState({}, "", "/replace-state"); 65 } 66 67 // This click handler won't cause a soft navigation, because it 68 // doesn't pass a URL to pushState(). 69 function noUrlPassedToPushState() { 70 const greeting = document.createElement("div"); 71 greeting.textContent = "Hello, World."; 72 document.body.appendChild(greeting); 73 history.pushState({}, ""); 74 } 75 </script> 76 </head> 77 <body> 78 <div id="actual-softnavigation" onclick="actualSoftNavigation()">Click here!</div> 79 <div id="no-url-change" onclick="noUrlChange()">Click here!</div> 80 <div id="dom-not-attached" onclick="domNotAttached()">Click here!</div> 81 <div id="no-dom-change" onclick="noDomChange()">Click here!</div> 82 <div id="no-paint" onclick="noPaint()">Click here!</div> 83 <div id="replace-state" onclick="replaceState()">Click here!</div> 84 <div id="no-url-passed-to-push-state" onclick="noUrlPassedToPushState()">Click here!</div> 85 86 <script> 87 function test_template(test_id, description) { 88 promise_test(async (t) => { 89 const promise = 90 SoftNavigationTestHelper.getPerformanceEntries("soft-navigation"); 91 if (test_driver) { 92 global_test_id = test_id; 93 test_driver.click(document.getElementById(test_id)); 94 test_driver.click(document.getElementById("actual-softnavigation")); 95 } 96 const helper = new SoftNavigationTestHelper(t); 97 const entries = await helper.withTimeoutMessage( 98 promise, 99 "No soft navigation (test_id=" + test_id + ").", 100 /*timeout=*/ 3000, 101 ); 102 assert_equals( 103 entries.length, 104 1, 105 "Expected single soft navigation (test_id=" + test_id + ").", 106 ); 107 assert_equals( 108 entries[0].name.replace(/.*\//, ""), 109 "actual-softnavigation?" + test_id, 110 "Expected name ending in 'actual-softnavigation?" + test_id + "'", 111 ); 112 }, description); 113 } 114 test_template("no-url-change", "The URL change is missing."); 115 test_template("dom-not-attached", "Creates an element but doesn't attach it to the DOM."); 116 test_template("no-paint", "Doesn't paint because the element is hidden."); 117 test_template("no-dom-change", "The DOM change is missing."); 118 test_template("replace-state", "Uses replaceState() instead of pushState()."); 119 test_template("no-url-passed-to-push-state", "Doesn't pass a URL to pushState()."); 120 </script> 121 </body> 122 </html>