tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

CustomElementRegistry-upgrade.html (4622B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
      5 <link rel="help" href="https://github.com/whatwg/html/issues/10854">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 </head>
      9 <body>
     10 <some-host id="host">
     11    <template shadowrootmode="closed" shadowrootclonable="true" shadowrootcustomelementregistry>
     12        <a-b>
     13            <template shadowrootmode="closed" shadowrootclonable="true" shadowrootcustomelementregistry>
     14                <c-d>
     15                    <template shadowrootmode="closed" shadowrootclonable="true">
     16                        <a-b></a-b>
     17                    </template>
     18                </c-d>
     19            </template>
     20        </a-b>
     21    </template>
     22 </some-host>
     23 <script>
     24 
     25 customElements.define('some-host', class SomeHost extends HTMLElement {
     26    elementInternals;
     27 
     28    constructor() {
     29        super();
     30        this.elementInternals = this.attachInternals();
     31    }
     32 });
     33 customElements.define('a-b', class GlobalABElement extends HTMLElement { });
     34 customElements.define('c-d', class GlobalCDElement extends HTMLElement { });
     35 
     36 test(() => {
     37    assert_equals(typeof(window.customElements.upgrade), 'function');
     38    assert_equals(typeof((new CustomElementRegistry).upgrade), 'function');
     39 }, 'upgrade is a function on both global and scoped CustomElementRegistry');
     40 
     41 test(() => {
     42    const registry = new CustomElementRegistry;
     43    registry.define('a-b', class ABElement extends HTMLElement { });
     44 
     45    const clone = host.cloneNode(true);
     46    registry.upgrade(clone.elementInternals.shadowRoot);
     47    assert_equals(clone.elementInternals.shadowRoot.querySelector('a-b').__proto__.constructor.name, 'HTMLElement');
     48 }, 'upgrade is a no-op when called on a shadow root with no association');
     49 
     50 test(() => {
     51    const registry = new CustomElementRegistry;
     52    registry.define('a-b', class ABElement extends HTMLElement {
     53        elementInternals;
     54 
     55        constructor() {
     56            super();
     57            this.elementInternals = this.attachInternals();
     58        }
     59    });
     60 
     61    const clone = host.cloneNode(true);
     62    registry.initialize(clone.elementInternals.shadowRoot);
     63    registry.upgrade(clone.elementInternals.shadowRoot);
     64    const abElement = clone.elementInternals.shadowRoot.querySelector('a-b');
     65    assert_equals(abElement.__proto__.constructor.name, 'ABElement');
     66    assert_equals(abElement.elementInternals.shadowRoot.customElementRegistry, null);
     67    const cdElement = abElement.elementInternals.shadowRoot.querySelector('c-d');
     68    assert_equals(cdElement.__proto__.constructor.name, 'HTMLElement');
     69    assert_equals(cdElement.customElementRegistry, null);
     70 }, 'upgrade should upgrade a candidate element when called on a shadow root with an association');
     71 
     72 test(() => {
     73    const registry = new CustomElementRegistry;
     74    registry.define('a-b', class ScopedABElement extends HTMLElement {
     75        elementInternals;
     76 
     77        constructor() {
     78            super();
     79            this.elementInternals = this.attachInternals();
     80        }
     81    });
     82 
     83    const clone = host.cloneNode(true);
     84    registry.initialize(clone.elementInternals.shadowRoot);
     85    registry.upgrade(clone.elementInternals.shadowRoot);
     86    const abElement = clone.elementInternals.shadowRoot.querySelector('a-b');
     87    assert_equals(abElement.__proto__.constructor.name, 'ScopedABElement');
     88    registry.initialize(abElement.elementInternals.shadowRoot);
     89    assert_equals(abElement.elementInternals.shadowRoot.customElementRegistry, registry);
     90    const cdElement = abElement.elementInternals.shadowRoot.querySelector('c-d');
     91    assert_equals(cdElement.customElementRegistry, registry);
     92 
     93    registry.define('c-d', class ScopedCDElement extends HTMLElement {
     94        elementInternals;
     95 
     96        constructor() {
     97            super();
     98            this.elementInternals = this.attachInternals();
     99        }
    100    });
    101    assert_equals(cdElement.__proto__.constructor.name, 'HTMLElement');
    102    registry.upgrade(abElement.elementInternals.shadowRoot);
    103    assert_equals(cdElement.__proto__.constructor.name, 'ScopedCDElement');
    104    assert_equals(cdElement.customElementRegistry, registry);
    105 
    106    assert_equals(cdElement.elementInternals.shadowRoot.customElementRegistry, window.customElements);
    107    const innerAB = cdElement.elementInternals.shadowRoot.querySelector('a-b');
    108    assert_equals(innerAB.customElementRegistry, window.customElements);
    109    assert_equals(innerAB.__proto__.constructor.name, 'GlobalABElement');
    110 }, 'upgrade should not upgrade a candidate element not associated with a registry');
    111 
    112 </script>
    113 </body>
    114 </html>