custom-elements/upgrading/Node-cloneNode-customized-builtins.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 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');

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