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>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: