mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-05-03 04:52:06 +02:00
125 lines
5.0 KiB
HTML
125 lines
5.0 KiB
HTML
<!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>
|
|
<some-host id="host">
|
|
<template shadowrootmode="closed" shadowrootclonable="true" shadowrootcustomelementregistry>
|
|
<a-b>
|
|
<template shadowrootmode="closed" shadowrootclonable="true" shadowrootcustomelementregistry>
|
|
<c-d>
|
|
<template shadowrootmode="closed" shadowrootclonable="true">
|
|
<a-b></a-b>
|
|
</template>
|
|
</c-d>
|
|
</template>
|
|
</a-b>
|
|
</template>
|
|
</some-host>
|
|
<script>
|
|
|
|
customElements.define('some-host', class SomeHost extends HTMLElement {
|
|
elementInternals;
|
|
|
|
constructor() {
|
|
super();
|
|
this.elementInternals = this.attachInternals();
|
|
}
|
|
});
|
|
customElements.define('a-b', class GlobalABElement extends HTMLElement { });
|
|
customElements.define('c-d', class GlobalCDElement extends HTMLElement { });
|
|
|
|
test(() => {
|
|
assert_equals(typeof(window.customElements.upgrade), 'function');
|
|
assert_equals(typeof((new CustomElementRegistry).upgrade), 'function');
|
|
}, 'upgrade is a function on both global and scoped CustomElementRegistry');
|
|
|
|
test(() => {
|
|
const registry = new CustomElementRegistry;
|
|
registry.define('a-b', class ABElement extends HTMLElement { });
|
|
|
|
const clone = host.cloneNode(true);
|
|
registry.upgrade(clone.elementInternals.shadowRoot);
|
|
assert_equals(clone.elementInternals.shadowRoot.querySelector('a-b').__proto__.constructor.name, 'HTMLElement');
|
|
}, 'upgrade is a no-op when called on a shadow root with no association');
|
|
|
|
test(() => {
|
|
const registry1 = new CustomElementRegistry;
|
|
const registry2 = new CustomElementRegistry;
|
|
const element = document.createElement('a-b', {customElementRegistry: registry1});
|
|
registry1.define('a-b', class ABElement1 extends HTMLElement { });
|
|
assert_false(element.matches(':defined'));
|
|
registry2.upgrade(element);
|
|
assert_false(element.matches(':defined'));
|
|
}, 'upgrade is a no-op when called on an element associated with a different registry');
|
|
|
|
test(() => {
|
|
const registry = new CustomElementRegistry;
|
|
registry.define('a-b', class ABElement extends HTMLElement {
|
|
elementInternals;
|
|
|
|
constructor() {
|
|
super();
|
|
this.elementInternals = this.attachInternals();
|
|
}
|
|
});
|
|
|
|
const clone = host.cloneNode(true);
|
|
registry.initialize(clone.elementInternals.shadowRoot);
|
|
registry.upgrade(clone.elementInternals.shadowRoot);
|
|
const abElement = clone.elementInternals.shadowRoot.querySelector('a-b');
|
|
assert_equals(abElement.__proto__.constructor.name, 'ABElement');
|
|
assert_equals(abElement.elementInternals.shadowRoot.customElementRegistry, null);
|
|
const cdElement = abElement.elementInternals.shadowRoot.querySelector('c-d');
|
|
assert_equals(cdElement.__proto__.constructor.name, 'HTMLElement');
|
|
assert_equals(cdElement.customElementRegistry, null);
|
|
}, 'upgrade should upgrade a candidate element when called on a shadow root with an association');
|
|
|
|
test(() => {
|
|
const registry = new CustomElementRegistry;
|
|
registry.define('a-b', class ScopedABElement extends HTMLElement {
|
|
elementInternals;
|
|
|
|
constructor() {
|
|
super();
|
|
this.elementInternals = this.attachInternals();
|
|
}
|
|
});
|
|
|
|
const clone = host.cloneNode(true);
|
|
registry.initialize(clone.elementInternals.shadowRoot);
|
|
registry.upgrade(clone.elementInternals.shadowRoot);
|
|
const abElement = clone.elementInternals.shadowRoot.querySelector('a-b');
|
|
assert_equals(abElement.__proto__.constructor.name, 'ScopedABElement');
|
|
registry.initialize(abElement.elementInternals.shadowRoot);
|
|
assert_equals(abElement.elementInternals.shadowRoot.customElementRegistry, registry);
|
|
const cdElement = abElement.elementInternals.shadowRoot.querySelector('c-d');
|
|
assert_equals(cdElement.customElementRegistry, registry);
|
|
|
|
registry.define('c-d', class ScopedCDElement extends HTMLElement {
|
|
elementInternals;
|
|
|
|
constructor() {
|
|
super();
|
|
this.elementInternals = this.attachInternals();
|
|
}
|
|
});
|
|
assert_equals(cdElement.__proto__.constructor.name, 'HTMLElement');
|
|
registry.upgrade(abElement.elementInternals.shadowRoot);
|
|
assert_equals(cdElement.__proto__.constructor.name, 'ScopedCDElement');
|
|
assert_equals(cdElement.customElementRegistry, registry);
|
|
|
|
assert_equals(cdElement.elementInternals.shadowRoot.customElementRegistry, window.customElements);
|
|
const innerAB = cdElement.elementInternals.shadowRoot.querySelector('a-b');
|
|
assert_equals(innerAB.customElementRegistry, window.customElements);
|
|
assert_equals(innerAB.__proto__.constructor.name, 'GlobalABElement');
|
|
}, 'upgrade should not upgrade a candidate element not associated with a registry');
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|