dom/nodes/Node-cloneNode.html

<!DOCTYPE html>
<meta charset=utf-8>
<title>Node.cloneNode</title>
<link rel=help href="https://dom.spec.whatwg.org/#dom-node-clonenode">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id=log></div>
<script>
function assert_equal_node(nodeA, nodeB) {
  assert_equals(nodeB.nodeType, nodeA.nodeType, "nodeType");
  assert_equals(nodeB.nodeName, nodeA.nodeName, "nodeName");

  if (nodeA.nodeType === Node.ELEMENT_NODE) {
    assert_equals(nodeB.prefix, nodeA.prefix, "prefix");
    assert_equals(nodeB.namespaceURI, nodeA.namespaceURI, "namespaceURI");
    assert_equals(nodeB.localName, nodeA.localName, "localName");
    assert_equals(nodeB.tagName, nodeA.tagName, "tagName");
    assert_not_equals(nodeB.attributes != nodeA.attributes, "attributes");
    assert_equals(nodeB.attributes.length, nodeA.attributes.length,
                  "attributes.length");
    for (var i = 0, il = nodeA.attributes.length; i < il; ++i) {
      assert_not_equals(nodeB.attributes[i], nodeA.attributes[i],
                        "attributes[" + i + "]");
      assert_equals(nodeB.attributes[i].name, nodeA.attributes[i].name,
                    "attributes[" + i + "].name");
      assert_equals(nodeB.attributes[i].prefix, nodeA.attributes[i].prefix,
                    "attributes[" + i + "].prefix");
      assert_equals(nodeB.attributes[i].namespaceURI, nodeA.attributes[i].namespaceURI,
                    "attributes[" + i + "].namespaceURI");
      assert_equals(nodeB.attributes[i].value, nodeA.attributes[i].value,
                    "attributes[" + i + "].value");
    }
  }
}

function check_copy(orig, copy, type) {
    assert_not_equals(orig, copy, "Object equality");
    assert_equal_node(orig, copy, "Node equality");
    assert_true(orig instanceof type, "original instanceof " + type);
    assert_true(copy instanceof type, "copy instanceof " + type);
}

function create_element_and_check(localName, typeName) {
  test(function() {
    assert_true(typeName in window, typeName + " is not supported");
    var element = document.createElement(localName);
    var copy = element.cloneNode();
    check_copy(element, copy, window[typeName]);
  }, "createElement(" + localName + ")");
}

// test1: createElement
create_element_and_check("a",         "HTMLAnchorElement");
create_element_and_check("abbr",      "HTMLElement");
create_element_and_check("acronym",   "HTMLElement");
create_element_and_check("address",   "HTMLElement");
create_element_and_check("area",      "HTMLAreaElement");
create_element_and_check("article",   "HTMLElement");
create_element_and_check("aside",     "HTMLElement");
create_element_and_check("audio",     "HTMLAudioElement");
create_element_and_check("b",         "HTMLElement");
create_element_and_check("base",      "HTMLBaseElement");
create_element_and_check("bdi",       "HTMLElement");
create_element_and_check("bdo",       "HTMLElement");
create_element_and_check("bgsound",   "HTMLElement");
create_element_and_check("big",       "HTMLElement");
create_element_and_check("blockquote","HTMLElement");
create_element_and_check("body",      "HTMLBodyElement");
create_element_and_check("br",        "HTMLBRElement");
create_element_and_check("button",    "HTMLButtonElement");
create_element_and_check("canvas",    "HTMLCanvasElement");
create_element_and_check("caption",   "HTMLTableCaptionElement");
create_element_and_check("center",    "HTMLElement");
create_element_and_check("cite",      "HTMLElement");
create_element_and_check("code",      "HTMLElement");
create_element_and_check("col",       "HTMLTableColElement");
create_element_and_check("colgroup",  "HTMLTableColElement");
create_element_and_check("data",      "HTMLDataElement");
create_element_and_check("datalist",  "HTMLDataListElement");
create_element_and_check("dialog",    "HTMLDialogElement");
create_element_and_check("dd",        "HTMLElement");
create_element_and_check("del",       "HTMLModElement");
create_element_and_check("details",   "HTMLElement");
create_element_and_check("dfn",       "HTMLElement");
create_element_and_check("dir",       "HTMLDirectoryElement");
create_element_and_check("div",       "HTMLDivElement");
create_element_and_check("dl",        "HTMLDListElement");
create_element_and_check("dt",        "HTMLElement");
create_element_and_check("embed",     "HTMLEmbedElement");
create_element_and_check("fieldset",  "HTMLFieldSetElement");
create_element_and_check("figcaption","HTMLElement");
create_element_and_check("figure",    "HTMLElement");
create_element_and_check("font",      "HTMLFontElement");
create_element_and_check("footer",    "HTMLElement");
create_element_and_check("form",      "HTMLFormElement");
create_element_and_check("frame",     "HTMLFrameElement");
create_element_and_check("frameset",  "HTMLFrameSetElement");
create_element_and_check("h1",        "HTMLHeadingElement");
create_element_and_check("h2",        "HTMLHeadingElement");
create_element_and_check("h3",        "HTMLHeadingElement");
create_element_and_check("h4",        "HTMLHeadingElement");
create_element_and_check("h5",        "HTMLHeadingElement");
create_element_and_check("h6",        "HTMLHeadingElement");
create_element_and_check("head",      "HTMLHeadElement");
create_element_and_check("header",    "HTMLElement");
create_element_and_check("hgroup",    "HTMLElement");
create_element_and_check("hr",        "HTMLHRElement");
create_element_and_check("html",      "HTMLHtmlElement");
create_element_and_check("i",         "HTMLElement");
create_element_and_check("iframe",    "HTMLIFrameElement");
create_element_and_check("img",       "HTMLImageElement");
create_element_and_check("input",     "HTMLInputElement");
create_element_and_check("ins",       "HTMLModElement");
create_element_and_check("isindex",   "HTMLElement");
create_element_and_check("kbd",       "HTMLElement");
create_element_and_check("label",     "HTMLLabelElement");
create_element_and_check("legend",    "HTMLLegendElement");
create_element_and_check("li",        "HTMLLIElement");
create_element_and_check("link",      "HTMLLinkElement");
create_element_and_check("main",      "HTMLElement");
create_element_and_check("map",       "HTMLMapElement");
create_element_and_check("mark",      "HTMLElement");
create_element_and_check("marquee",   "HTMLElement");
create_element_and_check("meta",      "HTMLMetaElement");
create_element_and_check("meter",     "HTMLMeterElement");
create_element_and_check("nav",       "HTMLElement");
create_element_and_check("nobr",      "HTMLElement");
create_element_and_check("noframes",  "HTMLElement");
create_element_and_check("noscript",  "HTMLElement");
create_element_and_check("object",    "HTMLObjectElement");
create_element_and_check("ol",        "HTMLOListElement");
create_element_and_check("optgroup",  "HTMLOptGroupElement");
create_element_and_check("option",    "HTMLOptionElement");
create_element_and_check("output",    "HTMLOutputElement");
create_element_and_check("p",         "HTMLParagraphElement");
create_element_and_check("param",     "HTMLParamElement");
create_element_and_check("pre",       "HTMLPreElement");
create_element_and_check("progress",  "HTMLProgressElement");
create_element_and_check("q",         "HTMLQuoteElement");
create_element_and_check("rp",        "HTMLElement");
create_element_and_check("rt",        "HTMLElement");
create_element_and_check("ruby",      "HTMLElement");
create_element_and_check("s",         "HTMLElement");
create_element_and_check("samp",      "HTMLElement");
create_element_and_check("script",    "HTMLScriptElement");
create_element_and_check("section",   "HTMLElement");
create_element_and_check("select",    "HTMLSelectElement");
create_element_and_check("small",     "HTMLElement");
create_element_and_check("source",    "HTMLSourceElement");
create_element_and_check("spacer",    "HTMLElement");
create_element_and_check("span",      "HTMLSpanElement");
create_element_and_check("strike",    "HTMLElement");
create_element_and_check("style",     "HTMLStyleElement");
create_element_and_check("sub",       "HTMLElement");
create_element_and_check("summary",   "HTMLElement");
create_element_and_check("sup",       "HTMLElement");
create_element_and_check("table",     "HTMLTableElement");
create_element_and_check("tbody",     "HTMLTableSectionElement");
create_element_and_check("td",        "HTMLTableCellElement");
create_element_and_check("template",  "HTMLTemplateElement");
create_element_and_check("textarea",  "HTMLTextAreaElement");
create_element_and_check("th",        "HTMLTableCellElement");
create_element_and_check("time",      "HTMLTimeElement");
create_element_and_check("title",     "HTMLTitleElement");
create_element_and_check("tr",        "HTMLTableRowElement");
create_element_and_check("tt",        "HTMLElement");
create_element_and_check("track",     "HTMLTrackElement");
create_element_and_check("u",         "HTMLElement");
create_element_and_check("ul",        "HTMLUListElement");
create_element_and_check("var",       "HTMLElement");
create_element_and_check("video",     "HTMLVideoElement");
create_element_and_check("unknown",   "HTMLUnknownElement");
create_element_and_check("wbr",       "HTMLElement");

test(function() {
    var fragment = document.createDocumentFragment();
    var copy = fragment.cloneNode();
    check_copy(fragment, copy, DocumentFragment);
}, "createDocumentFragment");

test(function() {
    var text = document.createTextNode("hello world");
    var copy = text.cloneNode();
    check_copy(text, copy, Text);
    assert_equals(text.data, copy.data);
    assert_equals(text.wholeText, copy.wholeText);
}, "createTextNode");

test(function() {
    var comment = document.createComment("a comment");
    var copy = comment.cloneNode();
    check_copy(comment, copy, Comment);
    assert_equals(comment.data, copy.data);
}, "createComment");

test(function() {
  var el = document.createElement("foo");
  el.setAttribute("a", "b");
  el.setAttribute("c", "d");
  var c = el.cloneNode();
  check_copy(el, c, Element);
}, "createElement with attributes")

test(function() {
  var el = document.createElementNS("http://www.w3.org/1999/xhtml", "foo:div");
  var c = el.cloneNode();
  check_copy(el, c, HTMLDivElement);
}, "createElementNS HTML")

test(function() {
  var el = document.createElementNS("http://www.example.com/", "foo:div");
  var c = el.cloneNode();
  check_copy(el, c, Element);
}, "createElementNS non-HTML")

test(function() {
    var pi = document.createProcessingInstruction("target", "data");
    var copy = pi.cloneNode();
    check_copy(pi, copy, ProcessingInstruction);
    assert_equals(pi.data, copy.data, "data");
    assert_equals(pi.target, pi.target, "target");
}, "createProcessingInstruction");

test(function() {
    var attr = document.createAttribute("class");
    var copy = attr.cloneNode();
    check_copy(attr, copy, Attr);
    assert_equals(attr.namespaceURI, copy.namespaceURI);
    assert_equals(attr.prefix, copy.prefix);
    assert_equals(attr.localName, copy.localName);
    assert_equals(attr.value, copy.value);

    attr.value = "abc";
    assert_equals(attr.namespaceURI, copy.namespaceURI);
    assert_equals(attr.prefix, copy.prefix);
    assert_equals(attr.localName, copy.localName);
    assert_not_equals(attr.value, copy.value);

    var copy2 = attr.cloneNode();
    check_copy(attr, copy2, Attr);
    assert_equals(attr.namespaceURI, copy.namespaceURI);
    assert_equals(attr.prefix, copy.prefix);
    assert_equals(attr.localName, copy2.localName);
    assert_equals(attr.value, copy2.value);
}, "createAttribute");

test(function() {
    var attr = document.createAttributeNS("http://www.w3.org/1999/xhtml", "foo:class");
    var copy = attr.cloneNode();
    check_copy(attr, copy, Attr);
    assert_equals(attr.namespaceURI, copy.namespaceURI);
    assert_equals(attr.prefix, copy.prefix);
    assert_equals(attr.localName, copy.localName);
    assert_equals(attr.value, copy.value);

    attr.value = "abc";
    assert_equals(attr.namespaceURI, copy.namespaceURI);
    assert_equals(attr.prefix, copy.prefix);
    assert_equals(attr.localName, copy.localName);
    assert_not_equals(attr.value, copy.value);

    var copy2 = attr.cloneNode();
    check_copy(attr, copy2, Attr);
    assert_equals(attr.namespaceURI, copy.namespaceURI);
    assert_equals(attr.prefix, copy.prefix);
    assert_equals(attr.localName, copy2.localName);
    assert_equals(attr.value, copy2.value);
}, "createAttributeNS");

test(function() {
    var doctype = document.implementation.createDocumentType("html", "public", "system");
    var copy = doctype.cloneNode();
    check_copy(doctype, copy, DocumentType);
    assert_equals(doctype.name, copy.name, "name");
    assert_equals(doctype.publicId, copy.publicId, "publicId");
    assert_equals(doctype.systemId, copy.systemId, "systemId");
}, "implementation.createDocumentType");

test(function() {
    var doc = document.implementation.createDocument(null, null);
    var copy = doc.cloneNode();
    check_copy(doc, copy, Document);
    assert_equals(doc.charset, "UTF-8", "charset value");
    assert_equals(doc.charset, copy.charset, "charset equality");
    assert_equals(doc.contentType, "application/xml", "contentType value");
    assert_equals(doc.contentType, copy.contentType, "contentType equality");
    assert_equals(doc.URL, "about:blank", "URL value")
    assert_equals(doc.URL, copy.URL, "URL equality");
    assert_equals(doc.compatMode, "CSS1Compat", "compatMode value");
    assert_equals(doc.compatMode, copy.compatMode, "compatMode equality");
}, "implementation.createDocument");

test(function() {
    var html = document.implementation.createHTMLDocument("title");
    var copy = html.cloneNode();
    check_copy(html, copy, Document);
    assert_equals(copy.title, "", "title value");
}, "implementation.createHTMLDocument");

test(function() {
    var parent = document.createElement("div");
    var child1 = document.createElement("div");
    var child2 = document.createElement("div");
    var grandChild = document.createElement("div");

    child2.appendChild(grandChild);
    parent.appendChild(child1);
    parent.appendChild(child2);

    var deep = true;
    var copy = parent.cloneNode(deep);

    check_copy(parent, copy, HTMLDivElement);
    assert_equals(copy.childNodes.length, 2,
                  "copy.childNodes.length with deep copy");

    check_copy(child1, copy.childNodes[0], HTMLDivElement);
    assert_equals(copy.childNodes[0].childNodes.length, 0,
                  "copy.childNodes[0].childNodes.length");

    check_copy(child2, copy.childNodes[1], HTMLDivElement);
    assert_equals(copy.childNodes[1].childNodes.length, 1,
                  "copy.childNodes[1].childNodes.length");
    check_copy(grandChild, copy.childNodes[1].childNodes[0], HTMLDivElement);

    deep = false;
    copy = parent.cloneNode(deep);

    check_copy(parent, copy, HTMLDivElement);
    assert_equals(copy.childNodes.length, 0,
                  "copy.childNodes.length with non-deep copy");
}, "node with children");

test(() => {
  const proto = Object.create(HTMLElement.prototype),
        node = document.createElement("hi");
  Object.setPrototypeOf(node, proto);
  assert_true(proto.isPrototypeOf(node));
  const clone = node.cloneNode();
  assert_false(proto.isPrototypeOf(clone));
  assert_true(HTMLUnknownElement.prototype.isPrototypeOf(clone));
  const deepClone = node.cloneNode(true);
  assert_false(proto.isPrototypeOf(deepClone));
  assert_true(HTMLUnknownElement.prototype.isPrototypeOf(deepClone));
}, "Node with custom prototype")
</script>