mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-05-03 04:52:06 +02:00
fe3c6a1f9f
Includes reimporting the test we already had, which has changed significantly. Most of these fail, but importing them now to track progress.
78 lines
3.7 KiB
HTML
78 lines
3.7 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>
|
|
<script>
|
|
|
|
function createConnectedShadowTree(test, customElementRegistry) {
|
|
const host = document.createElement('div');
|
|
const shadowRoot = host.attachShadow({mode: 'closed', customElementRegistry});
|
|
document.body.appendChild(host);
|
|
test.add_cleanup(() => host.remove());
|
|
return shadowRoot;
|
|
}
|
|
|
|
test((test) => {
|
|
const registry = new CustomElementRegistry;
|
|
|
|
class SomeElement extends HTMLElement { };
|
|
registry.define('some-element', SomeElement);
|
|
|
|
class OtherElement extends HTMLElement { };
|
|
registry.define('other-element', OtherElement);
|
|
|
|
const shadowRoot = createConnectedShadowTree(test, registry);
|
|
assert_true(document.createElement('some-element', {customElementRegistry: registry}) instanceof SomeElement);
|
|
assert_true(document.createElement('other-element', {customElementRegistry: registry}) instanceof OtherElement);
|
|
shadowRoot.innerHTML = '<some-element></some-element><other-element></other-element>';
|
|
|
|
assert_true(shadowRoot.querySelector('some-element') instanceof SomeElement);
|
|
assert_equals(shadowRoot.querySelector('some-element').customElementRegistry, registry);
|
|
assert_true(shadowRoot.querySelector('other-element') instanceof OtherElement);
|
|
assert_equals(shadowRoot.querySelector('other-element').customElementRegistry, registry);
|
|
}, 'innerHTML on a shadow root should use the scoped registry');
|
|
|
|
test((test) => {
|
|
class SomeElement1 extends HTMLElement { };
|
|
customElements.define('some-element', SomeElement1);
|
|
|
|
const registry = new CustomElementRegistry;
|
|
class SomeElement2 extends HTMLElement { };
|
|
registry.define('some-element', SomeElement2);
|
|
|
|
const shadowRoot = createConnectedShadowTree(test, registry);
|
|
shadowRoot.innerHTML = '<some-element></some-element>';
|
|
assert_true(shadowRoot.querySelector('some-element') instanceof SomeElement2);
|
|
assert_equals(shadowRoot.querySelector('some-element').customElementRegistry, registry);
|
|
}, 'innerHTML on a connected shadow root should use the associated scoped registry');
|
|
|
|
test((test) => {
|
|
const registry = new CustomElementRegistry;
|
|
class SomeElement extends HTMLElement { };
|
|
registry.define('some-element', SomeElement);
|
|
const shadowRoot = createConnectedShadowTree(test, registry);
|
|
|
|
shadowRoot.innerHTML = '<some-element></some-element><template><some-element></some-element></template>';
|
|
assert_equals(shadowRoot.querySelector('some-element').__proto__.constructor.name, 'SomeElement');
|
|
assert_equals(shadowRoot.querySelector('some-element').customElementRegistry, registry);
|
|
assert_equals(shadowRoot.querySelector('template').content.querySelector('some-element').__proto__.constructor.name, 'HTMLElement');
|
|
assert_equals(shadowRoot.querySelector('template').content.querySelector('some-element').customElementRegistry, null);
|
|
}, 'innerHTML on a connected shadow root should not upgrade a custom element inside a template element');
|
|
|
|
test((test) => {
|
|
const registry = new CustomElementRegistry;
|
|
const shadowRoot = createConnectedShadowTree(test, registry);
|
|
shadowRoot.innerHTML = '<someelement></someelement>';
|
|
assert_equals(shadowRoot.querySelector('someelement').__proto__.constructor.name, 'HTMLUnknownElement');
|
|
assert_equals(shadowRoot.querySelector('someelement').customElementRegistry, registry);
|
|
}, 'innerHTML on a connected shadow root should be able to create an unknown element');
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|