custom-elements/upgrading/Node-cloneNode.html

<!DOCTYPE html>
<html>
<head>
<title>Custom Elements: Upgrading</title>
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
<meta name="assert" content="Node.prototype.cloneNode should upgrade a custom element">
<link rel="help" href="https://html.spec.whatwg.org/#upgrades">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/custom-elements-helpers.js"></script>
</head>
<body>
<div id="log"></div>
<script>
setup({allow_uncaught_exception:true});

test(function () {
    class MyCustomElement extends HTMLElement {}
    customElements.define('my-custom-element', MyCustomElement);

    var instance = document.createElement('my-custom-element');
    assert_true(instance instanceof HTMLElement);
    assert_true(instance instanceof MyCustomElement);

    var clone = instance.cloneNode(false);
    assert_not_equals(instance, clone);
    assert_true(clone instanceof HTMLElement,
        'A cloned custom element must be an instance of HTMLElement');
    assert_true(clone instanceof MyCustomElement,
        'A cloned custom element must be an instance of the custom element');
}, 'Node.prototype.cloneNode(false) must be able to clone a custom element');

test(function () {
    class AutonomousCustomElement extends HTMLElement {};
    class IsCustomElement extends HTMLElement {};

    customElements.define('autonomous-custom-element', AutonomousCustomElement);
    customElements.define('is-custom-element', IsCustomElement);

    var instance = document.createElement('autonomous-custom-element', { is: "is-custom-element"});
    assert_true(instance instanceof HTMLElement);
    assert_true(instance instanceof AutonomousCustomElement);

    var clone = instance.cloneNode(false);
    assert_not_equals(instance, clone);
    assert_true(clone instanceof HTMLElement,
        'A cloned custom element must be an instance of HTMLElement');
    assert_true(clone instanceof AutonomousCustomElement,
        'A cloned custom element must be an instance of the custom element');
}, 'Node.prototype.cloneNode(false) must be able to clone as a autonomous custom element when it contains is attribute');

test(function () {
    class MyDiv1 extends HTMLDivElement {};
    class MyDiv2 extends HTMLDivElement {};
    class MyDiv3 extends HTMLDivElement {};
    customElements.define('my-div1', MyDiv1, { extends: 'div' });
    customElements.define('my-div2', MyDiv2, { extends: 'div' });

    let instance = document.createElement('div', { is: 'my-div1'});
    assert_true(instance instanceof MyDiv1);
    instance.setAttribute('is', 'my-div2');
    let clone = instance.cloneNode(false);
    assert_not_equals(instance, clone);
    assert_true(clone instanceof MyDiv1,
        'A cloned custom element must be an instance of the custom element even with an inconsistent "is" attribute');

    let instance3 = document.createElement('div', { is: 'my-div3'});
    assert_false(instance3 instanceof MyDiv3);
    instance3.setAttribute('is', 'my-div2');
    let clone3 = instance3.cloneNode(false);
    assert_not_equals(instance3, clone);
    customElements.define('my-div3', MyDiv3, { extends: 'div' });
    document.body.appendChild(instance3);
    document.body.appendChild(clone3);
    assert_true(instance3 instanceof MyDiv3,
        'An undefined element must be upgraded even with an inconsistent "is" attribute');
    assert_true(clone3 instanceof MyDiv3,
        'A cloned undefined element must be upgraded even with an inconsistent "is" attribute');
}, 'Node.prototype.cloneNode(false) must be able to clone as a customized built-in element when it has an inconsistent "is" attribute');

test_with_window(function (contentWindow) {
    var contentDocument = contentWindow.document;
    class MyCustomElement extends contentWindow.HTMLElement {}
    contentWindow.customElements.define('my-custom-element', MyCustomElement);

    var instance = contentDocument.createElement('my-custom-element');
    assert_true(instance instanceof contentWindow.HTMLElement);
    assert_true(instance instanceof MyCustomElement);

    var clone = instance.cloneNode(false);
    assert_not_equals(instance, clone);
    assert_true(clone instanceof contentWindow.HTMLElement,
        'A cloned custom element must be an instance of HTMLElement');
    assert_true(clone instanceof MyCustomElement,
        'A cloned custom element must be an instance of the custom element');
}, 'Node.prototype.cloneNode(false) must be able to clone a custom element inside an iframe');

test_with_window(function (contentWindow) {
    var contentDocument = contentWindow.document;
    class MyCustomElement extends contentWindow.HTMLElement { }
    contentWindow.customElements.define('my-custom-element', MyCustomElement);

    var instance = contentDocument.createElement('my-custom-element');
    var container = contentDocument.createElement('div');
    container.appendChild(instance);

    var containerClone = container.cloneNode(true);
    assert_true(containerClone instanceof contentWindow.HTMLDivElement);

    var clone = containerClone.firstChild;
    assert_not_equals(instance, clone);
    assert_true(clone instanceof contentWindow.HTMLElement,
        'A cloned custom element must be an instance of HTMLElement');
    assert_true(clone instanceof MyCustomElement,
        'A cloned custom element must be an instance of the custom element');
}, 'Node.prototype.cloneNode(true) must be able to clone a descendent custom element');

test_with_window(function (contentWindow) {
    var parentNodeInConstructor;
    var previousSiblingInConstructor;
    var nextSiblingInConstructor;
    class MyCustomElement extends contentWindow.HTMLElement {
        constructor() {
            super();
            parentNodeInConstructor = this.parentNode;
            previousSiblingInConstructor = this.previousSibling;
            nextSiblingInConstructor = this.nextSibling;
        }
    }
    contentWindow.customElements.define('my-custom-element', MyCustomElement);

    var contentDocument = contentWindow.document;
    var instance = contentDocument.createElement('my-custom-element');
    var siblingBeforeInstance = contentDocument.createElement('b');
    var siblingAfterInstance = contentDocument.createElement('a');
    var container = contentDocument.createElement('div');
    container.appendChild(siblingBeforeInstance);
    container.appendChild(instance);
    container.appendChild(siblingAfterInstance);

    var containerClone = container.cloneNode(true);

    assert_equals(parentNodeInConstructor, containerClone,
        'An upgraded element must have its parentNode set before the custom element constructor is called');
    assert_equals(previousSiblingInConstructor, containerClone.firstChild,
        'An upgraded element must have its previousSibling set before the custom element constructor is called');
    assert_equals(nextSiblingInConstructor, containerClone.lastChild,
        'An upgraded element must have its nextSibling set before the custom element constructor is called');
}, 'Node.prototype.cloneNode(true) must set parentNode, previousSibling, and nextSibling before upgrading custom elements');

// The error reporting isn't clear yet when multiple globals involved in custom
// element, see w3c/webcomponents#635, so using test_with_window is not a good
// idea here.
test(function () {
    class MyCustomElement extends HTMLElement {
        constructor(doNotCreateItself) {
            super();
            if (!doNotCreateItself)
                new MyCustomElement(true);
        }
    }
    customElements.define('my-custom-element-constructed-after-super', MyCustomElement);

    var instance = new MyCustomElement(false);
    var uncaughtError;
    window.onerror = function (message, url, lineNumber, columnNumber, error) { uncaughtError = error; return true; }
    instance.cloneNode(false);
    assert_equals(uncaughtError.name, 'TypeError');
}, 'HTMLElement constructor must throw an TypeError when the top of the construction stack is marked AlreadyConstructed'
    + ' due to a custom element constructor constructing itself after super() call');

test(function () {
    class MyCustomElement extends HTMLElement {
        constructor(doNotCreateItself) {
            if (!doNotCreateItself)
                new MyCustomElement(true);
            super();
        }
    }
    customElements.define('my-custom-element-constructed-before-super', MyCustomElement);

    var instance = new MyCustomElement(false);
    var uncaughtError;
    window.onerror = function (message, url, lineNumber, columnNumber, error) { uncaughtError = error; return true; }
    instance.cloneNode(false);
    assert_equals(uncaughtError.name, 'TypeError');
}, 'HTMLElement constructor must throw an TypeError when the top of the construction stack is marked AlreadyConstructed'
    + ' due to a custom element constructor constructing itself before super() call');

test(function () {
    var returnSpan = false;
    class MyCustomElement extends HTMLElement {
        constructor() {
            super();
            if (returnSpan)
                return document.createElement('span');
        }
    }
    customElements.define('my-custom-element-return-another', MyCustomElement);

    var instance = new MyCustomElement(false);
    returnSpan = true;
    var uncaughtError;
    window.onerror = function (message, url, lineNumber, columnNumber, error) { uncaughtError = error; return true; }
    instance.cloneNode(false);
    assert_equals(uncaughtError.name, 'TypeError');
}, 'Upgrading a custom element must throw TypeError when the custom element\'s constructor returns another element');

test(function () {
    var instance = document.createElement('my-custom-element-throw-exception');
    document.body.appendChild(instance);

    var calls = [];
    class MyCustomElement extends HTMLElement {
        constructor() {
            super();
            calls.push(this);
            throw 'bad';
        }
    }

    var uncaughtError;
    window.onerror = function (message, url, lineNumber, columnNumber, error) { uncaughtError = error; return true; }
    customElements.define('my-custom-element-throw-exception', MyCustomElement);
    assert_equals(uncaughtError, 'bad');

    assert_array_equals(calls, [instance]);
    document.body.removeChild(instance);
    document.body.appendChild(instance);
    assert_array_equals(calls, [instance]);
}, 'Inserting an element must not try to upgrade a custom element when it had already failed to upgrade once');

</script>
</body>
</html>