Node-cloneNode.html (15632B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Node.cloneNode</title> 4 <link rel=help href="https://dom.spec.whatwg.org/#dom-node-clonenode"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <div id=log></div> 8 <script> 9 function assert_equal_node(nodeA, nodeB) { 10 assert_equals(nodeB.nodeType, nodeA.nodeType, "nodeType"); 11 assert_equals(nodeB.nodeName, nodeA.nodeName, "nodeName"); 12 13 if (nodeA.nodeType === Node.ELEMENT_NODE) { 14 assert_equals(nodeB.prefix, nodeA.prefix, "prefix"); 15 assert_equals(nodeB.namespaceURI, nodeA.namespaceURI, "namespaceURI"); 16 assert_equals(nodeB.localName, nodeA.localName, "localName"); 17 assert_equals(nodeB.tagName, nodeA.tagName, "tagName"); 18 assert_not_equals(nodeB.attributes != nodeA.attributes, "attributes"); 19 assert_equals(nodeB.attributes.length, nodeA.attributes.length, 20 "attributes.length"); 21 for (var i = 0, il = nodeA.attributes.length; i < il; ++i) { 22 assert_not_equals(nodeB.attributes[i], nodeA.attributes[i], 23 "attributes[" + i + "]"); 24 assert_equals(nodeB.attributes[i].name, nodeA.attributes[i].name, 25 "attributes[" + i + "].name"); 26 assert_equals(nodeB.attributes[i].prefix, nodeA.attributes[i].prefix, 27 "attributes[" + i + "].prefix"); 28 assert_equals(nodeB.attributes[i].namespaceURI, nodeA.attributes[i].namespaceURI, 29 "attributes[" + i + "].namespaceURI"); 30 assert_equals(nodeB.attributes[i].value, nodeA.attributes[i].value, 31 "attributes[" + i + "].value"); 32 } 33 } 34 } 35 36 function check_copy(orig, copy, type) { 37 assert_not_equals(orig, copy, "Object equality"); 38 assert_equal_node(orig, copy, "Node equality"); 39 assert_true(orig instanceof type, "original instanceof " + type); 40 assert_true(copy instanceof type, "copy instanceof " + type); 41 } 42 43 function create_element_and_check(localName, typeName) { 44 test(function() { 45 assert_true(typeName in window, typeName + " is not supported"); 46 var element = document.createElement(localName); 47 var copy = element.cloneNode(); 48 check_copy(element, copy, window[typeName]); 49 }, "createElement(" + localName + ")"); 50 } 51 52 // test1: createElement 53 create_element_and_check("a", "HTMLAnchorElement"); 54 create_element_and_check("abbr", "HTMLElement"); 55 create_element_and_check("acronym", "HTMLElement"); 56 create_element_and_check("address", "HTMLElement"); 57 create_element_and_check("area", "HTMLAreaElement"); 58 create_element_and_check("article", "HTMLElement"); 59 create_element_and_check("aside", "HTMLElement"); 60 create_element_and_check("audio", "HTMLAudioElement"); 61 create_element_and_check("b", "HTMLElement"); 62 create_element_and_check("base", "HTMLBaseElement"); 63 create_element_and_check("bdi", "HTMLElement"); 64 create_element_and_check("bdo", "HTMLElement"); 65 create_element_and_check("bgsound", "HTMLElement"); 66 create_element_and_check("big", "HTMLElement"); 67 create_element_and_check("blockquote","HTMLElement"); 68 create_element_and_check("body", "HTMLBodyElement"); 69 create_element_and_check("br", "HTMLBRElement"); 70 create_element_and_check("button", "HTMLButtonElement"); 71 create_element_and_check("canvas", "HTMLCanvasElement"); 72 create_element_and_check("caption", "HTMLTableCaptionElement"); 73 create_element_and_check("center", "HTMLElement"); 74 create_element_and_check("cite", "HTMLElement"); 75 create_element_and_check("code", "HTMLElement"); 76 create_element_and_check("col", "HTMLTableColElement"); 77 create_element_and_check("colgroup", "HTMLTableColElement"); 78 create_element_and_check("data", "HTMLDataElement"); 79 create_element_and_check("datalist", "HTMLDataListElement"); 80 create_element_and_check("dialog", "HTMLDialogElement"); 81 create_element_and_check("dd", "HTMLElement"); 82 create_element_and_check("del", "HTMLModElement"); 83 create_element_and_check("details", "HTMLElement"); 84 create_element_and_check("dfn", "HTMLElement"); 85 create_element_and_check("dir", "HTMLDirectoryElement"); 86 create_element_and_check("div", "HTMLDivElement"); 87 create_element_and_check("dl", "HTMLDListElement"); 88 create_element_and_check("dt", "HTMLElement"); 89 create_element_and_check("embed", "HTMLEmbedElement"); 90 create_element_and_check("fieldset", "HTMLFieldSetElement"); 91 create_element_and_check("figcaption","HTMLElement"); 92 create_element_and_check("figure", "HTMLElement"); 93 create_element_and_check("font", "HTMLFontElement"); 94 create_element_and_check("footer", "HTMLElement"); 95 create_element_and_check("form", "HTMLFormElement"); 96 create_element_and_check("frame", "HTMLFrameElement"); 97 create_element_and_check("frameset", "HTMLFrameSetElement"); 98 create_element_and_check("h1", "HTMLHeadingElement"); 99 create_element_and_check("h2", "HTMLHeadingElement"); 100 create_element_and_check("h3", "HTMLHeadingElement"); 101 create_element_and_check("h4", "HTMLHeadingElement"); 102 create_element_and_check("h5", "HTMLHeadingElement"); 103 create_element_and_check("h6", "HTMLHeadingElement"); 104 create_element_and_check("head", "HTMLHeadElement"); 105 create_element_and_check("header", "HTMLElement"); 106 create_element_and_check("hgroup", "HTMLElement"); 107 create_element_and_check("hr", "HTMLHRElement"); 108 create_element_and_check("html", "HTMLHtmlElement"); 109 create_element_and_check("i", "HTMLElement"); 110 create_element_and_check("iframe", "HTMLIFrameElement"); 111 create_element_and_check("img", "HTMLImageElement"); 112 create_element_and_check("input", "HTMLInputElement"); 113 create_element_and_check("ins", "HTMLModElement"); 114 create_element_and_check("isindex", "HTMLElement"); 115 create_element_and_check("kbd", "HTMLElement"); 116 create_element_and_check("label", "HTMLLabelElement"); 117 create_element_and_check("legend", "HTMLLegendElement"); 118 create_element_and_check("li", "HTMLLIElement"); 119 create_element_and_check("link", "HTMLLinkElement"); 120 create_element_and_check("main", "HTMLElement"); 121 create_element_and_check("map", "HTMLMapElement"); 122 create_element_and_check("mark", "HTMLElement"); 123 create_element_and_check("marquee", "HTMLElement"); 124 create_element_and_check("meta", "HTMLMetaElement"); 125 create_element_and_check("meter", "HTMLMeterElement"); 126 create_element_and_check("nav", "HTMLElement"); 127 create_element_and_check("nobr", "HTMLElement"); 128 create_element_and_check("noframes", "HTMLElement"); 129 create_element_and_check("noscript", "HTMLElement"); 130 create_element_and_check("object", "HTMLObjectElement"); 131 create_element_and_check("ol", "HTMLOListElement"); 132 create_element_and_check("optgroup", "HTMLOptGroupElement"); 133 create_element_and_check("option", "HTMLOptionElement"); 134 create_element_and_check("output", "HTMLOutputElement"); 135 create_element_and_check("p", "HTMLParagraphElement"); 136 create_element_and_check("param", "HTMLParamElement"); 137 create_element_and_check("pre", "HTMLPreElement"); 138 create_element_and_check("progress", "HTMLProgressElement"); 139 create_element_and_check("q", "HTMLQuoteElement"); 140 create_element_and_check("rp", "HTMLElement"); 141 create_element_and_check("rt", "HTMLElement"); 142 create_element_and_check("ruby", "HTMLElement"); 143 create_element_and_check("s", "HTMLElement"); 144 create_element_and_check("samp", "HTMLElement"); 145 create_element_and_check("script", "HTMLScriptElement"); 146 create_element_and_check("section", "HTMLElement"); 147 create_element_and_check("select", "HTMLSelectElement"); 148 create_element_and_check("small", "HTMLElement"); 149 create_element_and_check("source", "HTMLSourceElement"); 150 create_element_and_check("spacer", "HTMLElement"); 151 create_element_and_check("span", "HTMLSpanElement"); 152 create_element_and_check("strike", "HTMLElement"); 153 create_element_and_check("style", "HTMLStyleElement"); 154 create_element_and_check("sub", "HTMLElement"); 155 create_element_and_check("summary", "HTMLElement"); 156 create_element_and_check("sup", "HTMLElement"); 157 create_element_and_check("table", "HTMLTableElement"); 158 create_element_and_check("tbody", "HTMLTableSectionElement"); 159 create_element_and_check("td", "HTMLTableCellElement"); 160 create_element_and_check("template", "HTMLTemplateElement"); 161 create_element_and_check("textarea", "HTMLTextAreaElement"); 162 create_element_and_check("th", "HTMLTableCellElement"); 163 create_element_and_check("time", "HTMLTimeElement"); 164 create_element_and_check("title", "HTMLTitleElement"); 165 create_element_and_check("tr", "HTMLTableRowElement"); 166 create_element_and_check("tt", "HTMLElement"); 167 create_element_and_check("track", "HTMLTrackElement"); 168 create_element_and_check("u", "HTMLElement"); 169 create_element_and_check("ul", "HTMLUListElement"); 170 create_element_and_check("var", "HTMLElement"); 171 create_element_and_check("video", "HTMLVideoElement"); 172 create_element_and_check("unknown", "HTMLUnknownElement"); 173 create_element_and_check("wbr", "HTMLElement"); 174 175 test(function() { 176 var fragment = document.createDocumentFragment(); 177 var copy = fragment.cloneNode(); 178 check_copy(fragment, copy, DocumentFragment); 179 }, "createDocumentFragment"); 180 181 test(function() { 182 var text = document.createTextNode("hello world"); 183 var copy = text.cloneNode(); 184 check_copy(text, copy, Text); 185 assert_equals(text.data, copy.data); 186 assert_equals(text.wholeText, copy.wholeText); 187 }, "createTextNode"); 188 189 test(function() { 190 var comment = document.createComment("a comment"); 191 var copy = comment.cloneNode(); 192 check_copy(comment, copy, Comment); 193 assert_equals(comment.data, copy.data); 194 }, "createComment"); 195 196 test(function() { 197 var el = document.createElement("foo"); 198 el.setAttribute("a", "b"); 199 el.setAttribute("c", "d"); 200 var c = el.cloneNode(); 201 check_copy(el, c, Element); 202 }, "createElement with attributes") 203 204 test(function() { 205 var el = document.createElementNS("http://www.w3.org/1999/xhtml", "foo:div"); 206 var c = el.cloneNode(); 207 check_copy(el, c, HTMLDivElement); 208 }, "createElementNS HTML") 209 210 test(function() { 211 var el = document.createElementNS("http://www.example.com/", "foo:div"); 212 var c = el.cloneNode(); 213 check_copy(el, c, Element); 214 }, "createElementNS non-HTML") 215 216 test(function() { 217 var pi = document.createProcessingInstruction("target", "data"); 218 var copy = pi.cloneNode(); 219 check_copy(pi, copy, ProcessingInstruction); 220 assert_equals(pi.data, copy.data, "data"); 221 assert_equals(pi.target, pi.target, "target"); 222 }, "createProcessingInstruction"); 223 224 test(function() { 225 var attr = document.createAttribute("class"); 226 var copy = attr.cloneNode(); 227 check_copy(attr, copy, Attr); 228 assert_equals(attr.namespaceURI, copy.namespaceURI); 229 assert_equals(attr.prefix, copy.prefix); 230 assert_equals(attr.localName, copy.localName); 231 assert_equals(attr.value, copy.value); 232 233 attr.value = "abc"; 234 assert_equals(attr.namespaceURI, copy.namespaceURI); 235 assert_equals(attr.prefix, copy.prefix); 236 assert_equals(attr.localName, copy.localName); 237 assert_not_equals(attr.value, copy.value); 238 239 var copy2 = attr.cloneNode(); 240 check_copy(attr, copy2, Attr); 241 assert_equals(attr.namespaceURI, copy.namespaceURI); 242 assert_equals(attr.prefix, copy.prefix); 243 assert_equals(attr.localName, copy2.localName); 244 assert_equals(attr.value, copy2.value); 245 }, "createAttribute"); 246 247 test(function() { 248 var attr = document.createAttributeNS("http://www.w3.org/1999/xhtml", "foo:class"); 249 var copy = attr.cloneNode(); 250 check_copy(attr, copy, Attr); 251 assert_equals(attr.namespaceURI, copy.namespaceURI); 252 assert_equals(attr.prefix, copy.prefix); 253 assert_equals(attr.localName, copy.localName); 254 assert_equals(attr.value, copy.value); 255 256 attr.value = "abc"; 257 assert_equals(attr.namespaceURI, copy.namespaceURI); 258 assert_equals(attr.prefix, copy.prefix); 259 assert_equals(attr.localName, copy.localName); 260 assert_not_equals(attr.value, copy.value); 261 262 var copy2 = attr.cloneNode(); 263 check_copy(attr, copy2, Attr); 264 assert_equals(attr.namespaceURI, copy.namespaceURI); 265 assert_equals(attr.prefix, copy.prefix); 266 assert_equals(attr.localName, copy2.localName); 267 assert_equals(attr.value, copy2.value); 268 }, "createAttributeNS"); 269 270 test(function() { 271 var doctype = document.implementation.createDocumentType("html", "public", "system"); 272 var copy = doctype.cloneNode(); 273 check_copy(doctype, copy, DocumentType); 274 assert_equals(doctype.name, copy.name, "name"); 275 assert_equals(doctype.publicId, copy.publicId, "publicId"); 276 assert_equals(doctype.systemId, copy.systemId, "systemId"); 277 }, "implementation.createDocumentType"); 278 279 test(function() { 280 var doc = document.implementation.createDocument(null, null); 281 var copy = doc.cloneNode(); 282 check_copy(doc, copy, Document); 283 assert_equals(doc.charset, "UTF-8", "charset value"); 284 assert_equals(doc.charset, copy.charset, "charset equality"); 285 assert_equals(doc.contentType, "application/xml", "contentType value"); 286 assert_equals(doc.contentType, copy.contentType, "contentType equality"); 287 assert_equals(doc.URL, "about:blank", "URL value") 288 assert_equals(doc.URL, copy.URL, "URL equality"); 289 assert_equals(doc.compatMode, "CSS1Compat", "compatMode value"); 290 assert_equals(doc.compatMode, copy.compatMode, "compatMode equality"); 291 }, "implementation.createDocument"); 292 293 test(function() { 294 var html = document.implementation.createHTMLDocument("title"); 295 var copy = html.cloneNode(); 296 check_copy(html, copy, Document); 297 assert_equals(copy.title, "", "title value"); 298 }, "implementation.createHTMLDocument"); 299 300 test(function() { 301 var parent = document.createElement("div"); 302 var child1 = document.createElement("div"); 303 var child2 = document.createElement("div"); 304 var grandChild = document.createElement("div"); 305 306 child2.appendChild(grandChild); 307 parent.appendChild(child1); 308 parent.appendChild(child2); 309 310 var deep = true; 311 var copy = parent.cloneNode(deep); 312 313 check_copy(parent, copy, HTMLDivElement); 314 assert_equals(copy.childNodes.length, 2, 315 "copy.childNodes.length with deep copy"); 316 317 check_copy(child1, copy.childNodes[0], HTMLDivElement); 318 assert_equals(copy.childNodes[0].childNodes.length, 0, 319 "copy.childNodes[0].childNodes.length"); 320 321 check_copy(child2, copy.childNodes[1], HTMLDivElement); 322 assert_equals(copy.childNodes[1].childNodes.length, 1, 323 "copy.childNodes[1].childNodes.length"); 324 check_copy(grandChild, copy.childNodes[1].childNodes[0], HTMLDivElement); 325 326 deep = false; 327 copy = parent.cloneNode(deep); 328 329 check_copy(parent, copy, HTMLDivElement); 330 assert_equals(copy.childNodes.length, 0, 331 "copy.childNodes.length with non-deep copy"); 332 }, "node with children"); 333 334 test(() => { 335 const proto = Object.create(HTMLElement.prototype), 336 node = document.createElement("hi"); 337 Object.setPrototypeOf(node, proto); 338 assert_true(proto.isPrototypeOf(node)); 339 const clone = node.cloneNode(); 340 assert_false(proto.isPrototypeOf(clone)); 341 assert_true(HTMLUnknownElement.prototype.isPrototypeOf(clone)); 342 const deepClone = node.cloneNode(true); 343 assert_false(proto.isPrototypeOf(deepClone)); 344 assert_true(HTMLUnknownElement.prototype.isPrototypeOf(deepClone)); 345 }, "Node with custom prototype") 346 </script>