Document-createElement.tentative.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /custom-elements/revamped-scoped-registry/Document-createElement.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">

<link rel="help" href="https://github.com/whatwg/html/issues/10854">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

</head>

<body>

<script>

// Keep this ~synchronized with Document-createElementNS

"use strict";

const scopedRegistry = new CustomElementRegistry();

const otherScopedRegistry = new CustomElementRegistry();

class GlobalABElement extends HTMLElement {};

class ScopedABElement extends HTMLElement {};

customElements.define('a-b', GlobalABElement);

scopedRegistry.define('a-b', ScopedABElement);

test(() => {

    assert_true(document.createElement('a-b') instanceof GlobalABElement);

}, 'createElement should use the global registry by default');

test(() => {

    assert_true(document.createElement('a-b', {customElements: scopedRegistry}) instanceof ScopedABElement);

}, 'createElement should use the specified scoped registry');

test(() => {

    const elements = {

        div: HTMLDivElement,

        form: HTMLFormElement,

        span: HTMLSpanElement,

        table: HTMLTableElement,

        unknown: HTMLUnknownElement,

};

    for (const localName in elements) {

        const scopedElement = document.createElement(localName, {customElements: scopedRegistry});

        assert_true(scopedElement instanceof elements[localName], localName);

        assert_equals(scopedElement.customElements, scopedRegistry);

        const globalExplicitElement = document.createElement(localName, {customElements: window.customElements});

        assert_true(globalExplicitElement instanceof elements[localName], localName);

        assert_equals(globalExplicitElement.customElements, window.customElements);

        const globalImplicitElement = document.createElement(localName);

        assert_true(globalImplicitElement instanceof elements[localName], localName);

        assert_equals(globalImplicitElement.customElements, window.customElements);

}, 'createElement should create a builtin element regardless of a custom element registry specified');

test(() => {

    assert_true(document.createElement('a-b', {customElements: window.customElements}) instanceof GlobalABElement);

}, 'createElement should use the specified global registry');

test(() => {

    const element = document.createElement('a-b', {customElements: otherScopedRegistry});

    assert_equals(element.__proto__.constructor.name, 'HTMLElement');

}, 'createElement should create an upgrade candidate when there is no matching definition in the specified registry');

test(() => {

    class CDElement extends HTMLElement { }

    const registry = new CustomElementRegistry;

    const cdElement = document.createElement('c-d', {customElements: registry});

    assert_false(cdElement instanceof CDElement);

    assert_equals(cdElement.__proto__.constructor.name, 'HTMLElement');

    registry.define('c-d', CDElement);

    assert_false(cdElement instanceof CDElement); // Not yet upgraded since it's disconnected.

    assert_equals(cdElement.__proto__.constructor.name, 'HTMLElement');

    document.body.appendChild(cdElement);

    assert_true(cdElement instanceof CDElement);

}, 'createElement should create an upgrade candidate and the candidate should be upgraded when the element is defined');

test(() => {

    const doc = new Document();

    const scopedElement = doc.createElement("time", {customElements: scopedRegistry});

    assert_equals(scopedElement.namespaceURI, null);

    assert_equals(scopedElement.customElements, scopedRegistry);

    const abElement = doc.createElement("a-b", {customElements: scopedRegistry});

    assert_equals(abElement.namespaceURI, null);

    assert_equals(abElement.customElements, scopedRegistry);

    assert_false(abElement instanceof ScopedABElement);

}, 'createElement on a non-HTML document should still handle registries correctly');

</script>

</body>

</html>