mozilla-release/testing/web-platform/tests/custom-elements/Document-createElement.html

<!DOCTYPE html>
<html>
<head>
<title>Custom Elements: document.createElement should create an element with synchronous custom elements flag set</title>
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
<meta name="assert" content="document.createElement should create an element with synchronous custom elements flag set">
<link rel="help" content="https://dom.spec.whatwg.org/#dom-document-createelement">
<link rel="help" content="https://dom.spec.whatwg.org/#concept-create-element">
<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 {};

    assert_true(document.createElement('my-custom-element') instanceof HTMLElement);
    assert_false(document.createElement('my-custom-element') instanceof MyCustomElement);

    customElements.define('my-custom-element', MyCustomElement);
    var instance = document.createElement('my-custom-element');
    assert_true(instance instanceof MyCustomElement);
    assert_equals(instance.localName, 'my-custom-element');
    assert_equals(instance.namespaceURI, 'http://www.w3.org/1999/xhtml', 'A custom element HTML must use HTML namespace');

}, 'document.createElement must create an instance of custom elements');

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 AutonomousCustomElement);
    assert_equals(instance.localName, 'autonomous-custom-element');
    assert_equals(instance.namespaceURI, 'http://www.w3.org/1999/xhtml', 'A custom element HTML must use HTML namespace');

    var instance2 = document.createElement('undefined-element', { is: 'is-custom-element'});
    assert_false(instance2.matches(':defined'));
    class DefinedLater extends HTMLElement {}
    customElements.define('undefined-element', DefinedLater);
    document.body.appendChild(instance2);
    assert_true(instance2 instanceof DefinedLater);
}, 'document.createElement must create an instance of autonomous custom elements when it has is attribute');

test(() => {
    class SuperP extends HTMLParagraphElement {}
    customElements.define("super-p", SuperP, { extends: "p" });

    const superP = document.createElement("p", { is: "super-p" });
    assert_true(superP instanceof HTMLParagraphElement);
    assert_true(superP instanceof SuperP);
    assert_equals(superP.localName, "p");

    const notSuperP = document.createElement("p", "super-p");
    assert_true(notSuperP instanceof HTMLParagraphElement);
    assert_false(notSuperP instanceof SuperP);
    assert_equals(notSuperP.localName, "p");
}, "document.createElement()'s second argument is to be ignored when it's a string");

function assert_reports(expected, testFunction, message) {
    var uncaughtError = null;
    window.onerror = function (message, url, lineNumber, columnNumber, error) { uncaughtError = error; return true; }
    testFunction();
    if (typeof(expected) == 'string')
        assert_equals(uncaughtError, expected, message);
    else if (expected && 'name' in expected)
        assert_equals(uncaughtError.name, expected.name, message);
    else
      assert_equals(uncaughtError, expected, message);
    window.onerror = null;
}

function assert_not_reports(testFunction, message) {
    assert_reports(null, testFunction, message);
}

test(function () {
    class ObjectCustomElement extends HTMLElement {
        constructor()
        {
            return {foo: 'bar'};
        }
    };
    customElements.define('object-custom-element', ObjectCustomElement);

    var instance = new ObjectCustomElement;
    assert_true(instance instanceof Object);
    assert_equals(instance.foo, 'bar');

    var instance;
    assert_reports({name: 'TypeError'}, function () { instance = document.createElement('object-custom-element'); });
    assert_equals(instance.localName, 'object-custom-element');
    assert_true(instance instanceof HTMLUnknownElement);
}, 'document.createElement must report a TypeError when the result of Construct is not a DOM node');

test(function () {
    class TextCustomElement extends HTMLElement {
        constructor()
        {
            return document.createTextNode('hello');
        }
    };
    customElements.define('text-custom-element', TextCustomElement);
    assert_true(new TextCustomElement instanceof Text);
    var instance;
    assert_reports({name: 'TypeError'}, function () { instance = document.createElement('text-custom-element'); });
    assert_equals(instance.localName, 'text-custom-element');
    assert_true(instance instanceof HTMLUnknownElement);
}, 'document.createElement must report a TypeError when the result of Construct is a TextNode');

test(function () {
    class ElementWithAttribute extends HTMLElement {
        constructor()
        {
            super();
            this.setAttribute('id', 'foo');
        }
    };
    customElements.define('element-with-attribute', ElementWithAttribute);
    assert_true(new ElementWithAttribute instanceof ElementWithAttribute);
    var instance;
    assert_reports({name: 'NotSupportedError'}, function () { instance = document.createElement('element-with-attribute'); });
    assert_equals(instance.localName, 'element-with-attribute');
    assert_true(instance instanceof HTMLUnknownElement);
}, 'document.createElement must report a NotSupportedError when attribute is added by setAttribute during construction');

test(function () {
    class ElementWithAttrNode extends HTMLElement {
        constructor()
        {
            super();
            this.attributes.setNamedItem(document.createAttribute('title'));
        }
    };
    customElements.define('element-with-attr-node', ElementWithAttrNode);
    assert_true(new ElementWithAttrNode instanceof ElementWithAttrNode);
    var instance;
    assert_reports({name: 'NotSupportedError'}, function () { instance = document.createElement('element-with-attr-node'); });
    assert_equals(instance.localName, 'element-with-attr-node');
    assert_true(instance instanceof HTMLUnknownElement);
}, 'document.createElement must report a NotSupportedError when attribute is added by attributes.setNamedItem during construction');

test(function () {
    class ElementWithNoAttributes extends HTMLElement {
        constructor()
        {
            super();
            this.attributes.setNamedItem(document.createAttribute('title'));
            this.removeAttribute('title');
        }
    };
    customElements.define('element-with-no-attiributes', ElementWithNoAttributes);
    assert_true(new ElementWithNoAttributes instanceof ElementWithNoAttributes);
    var instance;
    assert_not_reports(function () { instance = document.createElement('element-with-no-attiributes'); });
    assert_true(instance instanceof ElementWithNoAttributes);
}, 'document.createElement must not report a NotSupportedError when attribute is added and removed during construction');

test(function () {
    class ElementWithChildText extends HTMLElement {
        constructor()
        {
            super();
            this.appendChild(document.createTextNode('hello'));
        }
    };
    customElements.define('element-with-child-text', ElementWithChildText);
    assert_true(new ElementWithChildText instanceof ElementWithChildText);
    var instance;
    assert_reports({name: 'NotSupportedError'}, function () { instance = document.createElement('element-with-child-text'); });
    assert_equals(instance.localName, 'element-with-child-text');
    assert_true(instance instanceof HTMLUnknownElement);
}, 'document.createElement must report a NotSupportedError when a Text child is added during construction');

test(function () {
    class ElementWithChildComment extends HTMLElement {
        constructor()
        {
            super();
            this.appendChild(document.createComment('hello'));
        }
    };
    customElements.define('element-with-child-comment', ElementWithChildComment);
    assert_true(new ElementWithChildComment instanceof ElementWithChildComment);
    var instance;
    assert_reports({name: 'NotSupportedError'}, function () { instance = document.createElement('element-with-child-comment'); });
    assert_equals(instance.localName, 'element-with-child-comment');
    assert_true(instance instanceof HTMLUnknownElement);
}, 'document.createElement must report a NotSupportedError when a Comment child is added during construction');

test(function () {
    class ElementWithChildElement extends HTMLElement {
        constructor()
        {
            super();
            this.appendChild(document.createElement('div'));
        }
    };
    customElements.define('element-with-child-element', ElementWithChildElement);
    assert_true(new ElementWithChildElement instanceof ElementWithChildElement);
    var instance;
    assert_reports({name: 'NotSupportedError'}, function () { instance = document.createElement('element-with-child-element'); });
    assert_equals(instance.localName, 'element-with-child-element');
    assert_true(instance instanceof HTMLUnknownElement);
}, 'document.createElement must report a NotSupportedError when an element child is added during construction');

test(function () {
    class ElementWithNoChildElements extends HTMLElement {
        constructor()
        {
            super();
            this.appendChild(document.createElement('div'));
            this.removeChild(this.firstChild);
        }
    };
    customElements.define('element-with-no-child-elements', ElementWithNoChildElements);
    var instance;
    assert_not_reports(function () { instance = document.createElement('element-with-no-child-elements'); });
    assert_true(instance instanceof ElementWithNoChildElements);
}, 'document.createElement must not report a NotSupportedError when an element child is added and removed during construction');

test(function () {
    class ElementWithParent extends HTMLElement {
        constructor()
        {
            super();
            document.createElement('div').appendChild(this);
        }
    };
    customElements.define('element-with-parent', ElementWithParent);
    assert_true(new ElementWithParent instanceof ElementWithParent);
    var instance;
    assert_reports({name: 'NotSupportedError'}, function () { instance = document.createElement('element-with-parent'); });
    assert_equals(instance.localName, 'element-with-parent');
    assert_true(instance instanceof HTMLUnknownElement);
}, 'document.createElement must report a NotSupportedError when the element gets inserted into another element during construction');

test(function () {
    class ElementWithNoParent extends HTMLElement {
        constructor()
        {
            super();
            document.createElement('div').appendChild(this);
            this.parentNode.removeChild(this);
        }
    };
    customElements.define('element-with-no-parent', ElementWithNoParent);
    var instance;
    assert_not_reports(function () { instance = document.createElement('element-with-no-parent'); });
    assert_true(instance instanceof ElementWithNoParent);
}, 'document.createElement must not report a NotSupportedError when the element is inserted and removed from another element during construction');

document_types().forEach(function (entry, testNumber) {
    if (entry.isOwner)
        return;

    var getDocument = entry.create;
    var documentName = entry.name;

    promise_test(function () {
        return getDocument().then(function (doc) {
            class ElementWithAdoptCall extends HTMLElement {
                constructor()
                {
                    super();
                    doc.adoptNode(this);
                }
            };
            var name = 'element-with-adopt-call-' + testNumber;
            customElements.define(name, ElementWithAdoptCall);
            assert_true(new ElementWithAdoptCall instanceof ElementWithAdoptCall);
            var instance;
            assert_reports({name: 'NotSupportedError'}, function () { instance = document.createElement(name); });
            assert_equals(instance.localName, name);
            assert_true(instance instanceof HTMLUnknownElement);
        });
    }, `document.createElement must report a NotSupportedError when the element is adopted into a ${documentName} during construction`);

    promise_test(function () {
        return getDocument().then(function (doc) {
            class ElementInsertedIntoAnotherDocument extends HTMLElement {
                constructor()
                {
                    super();
                    doc.documentElement.appendChild(this);
                }
            };
            var name = 'element-inserted-into-another-document-' + testNumber;
            customElements.define(name, ElementInsertedIntoAnotherDocument);
            assert_true(new ElementInsertedIntoAnotherDocument instanceof ElementInsertedIntoAnotherDocument);
            var instance;
            assert_reports({name: 'NotSupportedError'}, function () { instance = document.createElement(name); });
            assert_equals(instance.localName, name);
            assert_true(instance instanceof HTMLUnknownElement);
        });
    }, `document.createElement must report a NotSupportedError when the element is inserted into a ${documentName} during construction`);

    promise_test(function () {
        return getDocument().then(function (doc) {
            class ElementThatGetAdoptedBack extends HTMLElement {
                constructor()
                {
                    super();
                    doc.adoptNode(this);
                    document.adoptNode(this);
                }
            };
            var name = 'element-that-get-adopted-back' + testNumber;
            customElements.define(name, ElementThatGetAdoptedBack);
            var instance;
            assert_not_reports(function () { instance = document.createElement(name); });
            assert_true(instance instanceof ElementThatGetAdoptedBack);
        });
    }, `document.createElement must not report a NotSupportedError when the element is adopted back from a ${documentName} during construction`);
});

test(function () {
    class DivCustomElement extends HTMLElement {
        constructor()
        {
            super();
            return document.createElement('div');
        }
    };
    customElements.define('div-custom-element', DivCustomElement);
    assert_true(new DivCustomElement instanceof HTMLDivElement);
    var instance;
    assert_reports({name: 'NotSupportedError'}, function () { instance = document.createElement('div-custom-element'); });
    assert_equals(instance.localName, 'div-custom-element');
    assert_true(instance instanceof HTMLUnknownElement);
}, 'document.createElement must report a NotSupportedError when the local name of the element does not match that of the custom element');

test(function () {
    var exceptionToThrow = {name: 'exception thrown by a custom constructor'};
    class ThrowCustomElement extends HTMLElement {
        constructor()
        {
            super();
            if (exceptionToThrow)
                throw exceptionToThrow;
        }
    };
    customElements.define('throw-custom-element', ThrowCustomElement);

    assert_throws_exactly(exceptionToThrow, function () { new ThrowCustomElement; });
    var instance;
    assert_reports(exceptionToThrow, function () { instance = document.createElement('throw-custom-element'); });
    assert_equals(instance.localName, 'throw-custom-element');
    assert_true(instance instanceof HTMLUnknownElement);

    exceptionToThrow = false;
    var instance = document.createElement('throw-custom-element');
    assert_true(instance instanceof ThrowCustomElement);
    assert_equals(instance.localName, 'throw-custom-element');

}, 'document.createElement must report an exception thrown by a custom element constructor');

test(function () {
    var exceptionToThrow = {name: 'exception thrown by a custom constructor'};
    class ThrowCustomBuiltinElement extends HTMLDivElement {
        constructor()
        {
            super();
            if (exceptionToThrow)
                throw exceptionToThrow;
        }
    };
    customElements.define('throw-custom-builtin-element', ThrowCustomBuiltinElement, { extends: 'div' });

    assert_throws_exactly(exceptionToThrow, function () { new ThrowCustomBuiltinElement; });
    var instance;
    assert_reports(exceptionToThrow, function () { instance = document.createElement('div', { is: 'throw-custom-builtin-element' }); });
    assert_equals(instance.localName, 'div');
    assert_true(instance instanceof HTMLDivElement);

    exceptionToThrow = false;
    var instance = document.createElement('div', { is: 'throw-custom-builtin-element' });
    assert_true(instance instanceof ThrowCustomBuiltinElement);
    assert_equals(instance.localName, 'div');

}, 'document.createElement must report an exception thrown by a custom built-in element constructor');

test(() => {
  class MyElement extends HTMLDivElement {}

  // createElement with unknown 'is' should not throw.
  // https://github.com/w3c/webcomponents/issues/608
  let div = document.createElement('div', { is: 'my-div' });
  assert_false(div instanceof MyElement);
  assert_false(div.hasAttribute('is'));

  customElements.define('my-div', MyElement, { extends: 'div' });
  document.body.appendChild(div);
  assert_true(div instanceof MyElement, 'Undefined element is upgraded on connecting to a document');
}, 'document.createElement with unknown "is" value should create "undefined" state element');

test(() => {
  class MyElement extends HTMLElement {
      constructor() {
          super();
          this.foo = true;
      }
  }
  customElements.define("my-element", MyElement);

  const instance = document.createElement('my-element', undefined);
  assert_true(instance.foo);
}, 'document.createElement with undefined options value should be upgraded.');
</script>
</body>
</html>