dom.html (6594B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>The DOM Modification Criterion for Soft Navigation Detection.</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 // Uses Element.innerHTML to add to the DOM. 13 // https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML 14 function elementInnerHTML() { 15 document.getElementById("element-inner-html").innerHTML = "<div>Hello, World.</div>"; 16 history.pushState({}, "", "/element-inner-html"); 17 } 18 19 // Uses Node.appendChild to add to the DOM. 20 // https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild 21 function nodeAppendChild() { 22 const greeting = document.createElement("div"); 23 greeting.textContent = "Hello, World."; 24 document.body.appendChild(greeting); 25 history.pushState({}, "", "/node-append-child"); 26 } 27 28 // Uses Node.insertBefore to add to the DOM. 29 // https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore 30 function nodeInsertBefore() { 31 const greeting = document.createElement("div"); 32 greeting.textContent = "Hello, World."; 33 document.body.insertBefore(greeting, document.body.firstChild); 34 history.pushState({}, "", "/node-insert-before"); 35 } 36 37 // Uses Document.importNode to add to the DOM. 38 // https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode 39 function documentImportNode() { 40 const iframe = document.getElementById("iframe-example"); 41 const oldNode = iframe.contentWindow.document.getElementById("import-this"); 42 const newNode = document.importNode(oldNode, true); 43 document.body.appendChild(newNode); 44 history.pushState({}, "", "/document-import-node"); 45 } 46 47 // Uses Document.adoptNode to add to the DOM. 48 // https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptNode 49 function documentAdoptNode() { 50 const iframe = document.getElementById("iframe-example"); 51 const oldNode = iframe.contentWindow.document.getElementById("import-this"); 52 const newNode = document.adoptNode(oldNode); 53 document.body.appendChild(newNode); 54 history.pushState({}, "", "/document-adopt-node"); 55 } 56 57 // Uses a template element to add to the DOM. 58 // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template 59 function templateElement() { 60 const template = document.getElementById("template-example"); 61 const cloned = template.content.cloneNode(true); 62 document.body.appendChild(cloned); 63 history.pushState({}, "", "/template-element"); 64 } 65 66 // Uses Element.innerText to add to the DOM, without overriding existing text. 67 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText 68 function elementInnerTextInitial() { 69 document.getElementById("element-inner-text-initial-dest").innerText = "Hello, World."; 70 history.pushState({}, "", "/element-inner-text-initial"); 71 } 72 73 // Uses Element.innerText to add to the DOM, overriding existing text. 74 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText 75 function elementInnerTextOverride() { 76 document.getElementById("element-inner-text-override-dest").innerText = "Hello, World."; 77 history.pushState({}, "", "/element-inner-text-override"); 78 } 79 </script> 80 </head> 81 <body> 82 <div id="element-inner-html" onclick="elementInnerHTML()">Click here!</div> 83 <div id="node-append-child" onclick="nodeAppendChild()">Click here!</div> 84 <div id="node-insert-before" onclick="nodeInsertBefore()">Click here!</div> 85 <div id="document-import-node" onclick="documentImportNode()">Click here!</div> 86 <div id="document-adopt-node" onclick="documentAdoptNode()">Click here!</div> 87 <div id="template-element" onclick="templateElement()">Click here!</div> 88 <div id="element-inner-text-initial" onclick="elementInnerTextInitial()"> 89 Click here! 90 <div id="element-inner-text-initial-dest"></div> 91 </div> 92 <div id="element-inner-text-override" onclick="elementInnerTextOverride()"> 93 Click here! 94 <div id="element-inner-text-override-dest">Some text already there.</div> 95 </div> 96 97 <iframe id="iframe-example" srcdoc="<div id='import-this'>Hello, World.</div>"></iframe> 98 99 <template id="template-example"> 100 <div>Hello, World.</div> 101 </template> 102 103 <script> 104 function test_template(test_id, description) { 105 promise_test(async (t) => { 106 const promise = 107 SoftNavigationTestHelper.getPerformanceEntries("soft-navigation"); 108 if (test_driver) { 109 test_driver.click(document.getElementById(test_id)); 110 } 111 const helper = new SoftNavigationTestHelper(t); 112 const entries = await helper.withTimeoutMessage( 113 promise, 114 "Soft navigation event not fired.", 115 /* timeout= */ 3000, 116 ); 117 assert_equals(entries.length, 1, "Expected exactly one soft navigation."); 118 assert_equals( 119 entries[0].name.replace(/.*\//, ""), 120 test_id, 121 "URL should end with the test ID.", 122 ); 123 }, description); 124 } 125 126 test_template("element-inner-html", "Soft Navigation Detection supports Element.innerHTML."); 127 test_template("node-append-child", "Soft Navigation Detection supports Node.appendChild."); 128 test_template("node-insert-before", "Soft Navigation Detection supports Node.insertBefore."); 129 test_template( 130 "document-import-node", 131 "Soft Navigation Detection supports Document.importNode.", 132 ); 133 test_template( 134 "document-adopt-node", 135 "Soft Navigation Detection supports Document.adoptNode.", 136 ); 137 test_template("template-element", "Soft Navigation Detection supports template elements."); 138 test_template( 139 "element-inner-text-initial", 140 "Soft Navigation Detection supports Element.innerText when it does not override existing text.", 141 ); 142 test_template( 143 "element-inner-text-override", 144 "Soft Navigation Detection supports Element.innerText when it overrides existing text.", 145 ); 146 </script> 147 </body> 148 </html>