insert_adjacent_html.html (4799B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>insertAdjacentHTML in HTML</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="insert_adjacent_html.js"></script> 8 </head> 9 <body> 10 <p id="display"></p><div id="content" style="display: none"></div><div id="content2" style="display: none"></div> 11 <script> 12 var script_ran = false; 13 14 function testPositions(node, testDesc) { 15 test(function() { 16 script_ran = false; 17 node.insertAdjacentHTML("beforeBegin", "\u003Cscript>script_ran = true;\u003C/script><i></i>"); 18 assert_equals(node.previousSibling.localName, "i", "Should have had <i> as previous sibling"); 19 assert_equals(node.previousSibling.previousSibling.localName, "script", "Should have had <script> as second previous child"); 20 assert_false(script_ran, "script should not have run"); 21 }, "beforeBegin " + node.id + " " + testDesc) 22 23 test(function() { 24 script_ran = false; 25 node.insertAdjacentHTML("Afterbegin", "<b></b>\u003Cscript>script_ran = true;\u003C/script>"); 26 assert_equals(node.firstChild.localName, "b", "Should have had <b> as first child"); 27 assert_equals(node.firstChild.nextSibling.localName, "script", "Should have had <script> as second child"); 28 assert_false(script_ran, "script should not have run"); 29 }, "Afterbegin " + node.id + " " + testDesc); 30 31 test(function() { 32 script_ran = false; 33 node.insertAdjacentHTML("BeforeEnd", "\u003Cscript>script_ran = true;\u003C/script><u></u>"); 34 assert_equals(node.lastChild.localName, "u", "Should have had <u> as last child"); 35 assert_equals(node.lastChild.previousSibling.localName, "script", "Should have had <script> as penultimate child"); 36 assert_false(script_ran, "script should not have run"); 37 }, "BeforeEnd " + node.id + " " + testDesc) 38 39 test(function() { 40 script_ran = false; 41 node.insertAdjacentHTML("afterend", "<a></a>\u003Cscript>script_ran = true;\u003C/script>"); 42 assert_equals(node.nextSibling.localName, "a", "Should have had <a> as next sibling"); 43 assert_equals(node.nextSibling.nextSibling.localName, "script", "Should have had <script> as second next sibling"); 44 assert_false(script_ran, "script should not have run"); 45 }, "afterend " + node.id + " " + testDesc) 46 } 47 48 var content = document.getElementById("content"); 49 testPositions(content, "without next sibling"); 50 testPositions(content, "again, with next sibling"); 51 52 test(function() { 53 assert_throws_dom("SYNTAX_ERR", function() {content.insertAdjacentHTML("bar", "foo")}); 54 assert_throws_dom("SYNTAX_ERR", function() {content.insertAdjacentHTML("beforebegİn", "foo")}); 55 assert_throws_dom("SYNTAX_ERR", function() {content.insertAdjacentHTML("beforebegın", "foo")}); 56 }, "Should throw when inserting with invalid position string"); 57 58 var parentElement = document.createElement("div"); 59 var child = document.createElement("div"); 60 child.id = "child"; 61 62 testThrowingNoParent(child, "null"); 63 testThrowingNoParent(document.documentElement, "a document"); 64 65 test(function() { 66 child.insertAdjacentHTML("afterBegin", "foo"); 67 child.insertAdjacentHTML("beforeend", "bar"); 68 assert_equals(child.textContent, "foobar"); 69 parentElement.appendChild(child); 70 }, "Inserting after being and before end should order things correctly"); 71 72 testPositions(child, "node not in tree but has parent"); 73 74 test(function() { 75 script_ran = false; 76 content.appendChild(parentElement); // must not run scripts 77 assert_false(script_ran, "script should not have run"); 78 }, "Should not run script when appending things which have descendant <script> inserted via insertAdjacentHTML"); 79 80 var content2 = document.getElementById("content2"); 81 testPositions(content2, "without next sibling"); 82 testPositions(content2, "test again, now that there's a next sibling"); 83 84 // HTML only 85 test(function() { 86 document.body.insertAdjacentHTML("afterend", "<p>"); 87 document.head.insertAdjacentHTML("beforebegin", "<p>"); 88 assert_equals(document.getElementsByTagName("head").length, 1, "Should still have one head"); 89 assert_equals(document.getElementsByTagName("body").length, 1, "Should still have one body"); 90 }, "Inserting kids of the <html> element should not do weird things with implied <body>/<head> tags") 91 92 test(function() { 93 let div = document.createElement("div"); 94 div.appendChild(document.createTextNode("A")); 95 div.insertAdjacentHTML("beforeEnd", "B"); 96 assert_true(div.firstChild && div.firstChild.nextSibling && 97 !div.firstChild.nextSibling.nextSibling, 98 "div has two children"); 99 assert_equals(div.firstChild.textContent, "A"); 100 assert_equals(div.lastChild.textContent, "B"); 101 }, "A text node inserted via insertAdjacentHTML should not be merged with a sibling text node."); 102 103 </script> 104 <div id="log"></div> 105 </body> 106 </html>