130 lines
5.1 KiB
HTML
130 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>ElementInternals.shadowRoot</title>
|
|
<link rel="author" href="mailto:masonf@chromium.org">
|
|
<link rel="help" href="https://html.spec.whatwg.org/#dom-elementinternals-shadowroot">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<script>
|
|
|
|
test(() => {
|
|
let constructed = false;
|
|
customElements.define('custom-open', class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
const elementInternals = this.attachInternals();
|
|
assert_equals(elementInternals.shadowRoot, null);
|
|
const shadow = this.attachShadow({mode: 'open'});
|
|
assert_equals(elementInternals.shadowRoot, shadow);
|
|
constructed = true;
|
|
}
|
|
});
|
|
const element = document.createElement('custom-open');
|
|
assert_true(constructed);
|
|
}, 'ElementInternals.shadowRoot allows access to open shadow root');
|
|
|
|
test(() => {
|
|
let constructed = false;
|
|
customElements.define('custom-closed', class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
const elementInternals = this.attachInternals();
|
|
assert_equals(elementInternals.shadowRoot, null);
|
|
const shadow = this.attachShadow({mode: 'closed'});
|
|
assert_equals(elementInternals.shadowRoot, shadow);
|
|
assert_equals(this.shadowRoot, null);
|
|
constructed = true;
|
|
}
|
|
});
|
|
const element = document.createElement('custom-closed');
|
|
assert_true(constructed);
|
|
}, 'ElementInternals.shadowRoot allows access to closed shadow root');
|
|
|
|
test(() => {
|
|
let constructed = false;
|
|
const element = document.createElement('x-1');
|
|
assert_throws_dom('NotSupportedError', () => element.attachInternals(),'attachInternals cannot be called before definition exists');
|
|
customElements.define('x-1', class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
assert_true(!!this.attachInternals());
|
|
constructed = true;
|
|
}
|
|
});
|
|
assert_false(constructed);
|
|
assert_throws_dom('NotSupportedError', () => element.attachInternals(),'attachInternals cannot be called before constructor');
|
|
customElements.upgrade(element);
|
|
assert_true(constructed);
|
|
assert_throws_dom('NotSupportedError', () => element.attachInternals(),'attachInternals already called');
|
|
}, 'ElementInternals cannot be called before constructor, upgrade case');
|
|
|
|
test(() => {
|
|
let constructed = false;
|
|
const element = document.createElement('x-2');
|
|
customElements.define('x-2', class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
// Don't attachInternals() here
|
|
constructed = true;
|
|
}
|
|
});
|
|
assert_throws_dom('NotSupportedError', () => element.attachInternals(),'attachInternals cannot be called before constructor');
|
|
assert_false(constructed);
|
|
customElements.upgrade(element);
|
|
assert_true(constructed);
|
|
assert_true(!!element.attachInternals(),'After the constructor, ok to call from outside');
|
|
}, 'ElementInternals *can* be called after constructor, upgrade case');
|
|
|
|
test(() => {
|
|
let constructed = false;
|
|
customElements.define('x-3', class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
assert_true(!!this.attachInternals());
|
|
constructed = true;
|
|
}
|
|
});
|
|
const element = document.createElement('x-3');
|
|
assert_true(constructed);
|
|
assert_throws_dom('NotSupportedError', () => element.attachInternals(), 'attachInternals already called');
|
|
}, 'ElementInternals cannot be called after constructor calls it, create case');
|
|
|
|
test(() => {
|
|
let constructed = false;
|
|
const element = document.createElement('x-5');
|
|
customElements.define('x-5', class extends HTMLElement {
|
|
static disabledFeatures = [ 'internals' ];
|
|
constructor() {
|
|
super();
|
|
assert_throws_dom('NotSupportedError', () => this.attachInternals(), 'attachInternals forbidden by disabledFeatures, constructor');
|
|
constructed = true;
|
|
}
|
|
});
|
|
assert_false(constructed);
|
|
assert_throws_dom('NotSupportedError', () => element.attachInternals(), 'attachInternals forbidden by disabledFeatures, pre-upgrade');
|
|
customElements.upgrade(element);
|
|
assert_true(constructed);
|
|
assert_throws_dom('NotSupportedError', () => element.attachInternals(), 'attachInternals forbidden by disabledFeatures, post-upgrade');
|
|
}, 'ElementInternals disabled by disabledFeatures');
|
|
|
|
test(() => {
|
|
let constructed = false;
|
|
const element = document.createElement('x-6');
|
|
const sr = element.attachShadow({mode: 'closed'});
|
|
assert_true(sr instanceof ShadowRoot);
|
|
customElements.define('x-6', class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
assert_throws_dom('NotSupportedError', () => this.attachShadow({mode:'open'}), 'attachShadow already called');
|
|
const elementInternals = this.attachInternals();
|
|
assert_equals(elementInternals.shadowRoot, null, 'ElementInternals.shadowRoot should not be available for pre-attached shadow');
|
|
constructed = true;
|
|
}
|
|
});
|
|
assert_false(constructed);
|
|
customElements.upgrade(element);
|
|
assert_true(constructed,'Failed to construct - test failed');
|
|
assert_equals(element.shadowRoot, null, 'shadow root is closed');
|
|
}, 'ElementInternals.shadowRoot doesn\'t reveal pre-attached closed shadowRoot');
|
|
</script>
|