mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-12-08 06:09:58 +00:00
Tests: Import some declarative shadow dom tests
This commit is contained in:
Sam Atkins
Jelle Raaijmakers
parent
7ce103b96a
commit
dde1560dd9
Notes:
github-actions[bot]
2025-11-26 08:54:47 +00:00
Author: https://github.com/AtkinsSJ
Commit: dde1560dd9
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6931
Reviewed-by: https://github.com/gmta ✅
4 changed files with 510 additions and 0 deletions
|
|
@ -0,0 +1,8 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 2 tests
|
||||
|
||||
1 Pass
|
||||
1 Fail
|
||||
Pass can use ShadowRoot as options for attachShadow
|
||||
Fail can use ShadowRoot in document fragment as options for attachShadow
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 22 tests
|
||||
|
||||
18 Pass
|
||||
4 Fail
|
||||
Pass Declarative Shadow DOM: Basic test
|
||||
Pass Declarative Shadow DOM: Feature detection
|
||||
Pass Shadowrootmode reflection
|
||||
Pass Shadowrootmode reflection, setter
|
||||
Pass Shadowrootdelegatesfocus reflection
|
||||
Pass Shadowrootdelegatesfocus reflection, setter
|
||||
Pass Shadowrootclonable reflection
|
||||
Pass Shadowrootclonable reflection, setter
|
||||
Pass Declarative Shadow DOM: Fragment parser basic test
|
||||
Pass Declarative Shadow DOM: Invalid shadow root attribute
|
||||
Pass Declarative Shadow DOM: Closed shadow root attribute
|
||||
Pass Declarative Shadow DOM: Missing closing tag
|
||||
Pass Declarative Shadow DOM: delegates focus attribute
|
||||
Pass Declarative Shadow DOM: clonable attribute
|
||||
Pass Declarative Shadow DOM: Multiple roots
|
||||
Fail Declarative Shadow DOM: template containing declarative shadow root (with shadowrootclonable)
|
||||
Fail Declarative Shadow DOM: template containing (deeply nested) declarative shadow root
|
||||
Fail Declarative Shadow DOM: template containing a template containing declarative shadow root
|
||||
Fail Declarative Shadow DOM: template containing declarative shadow root and UA shadow root
|
||||
Pass Declarative Shadow DOM: template containing closed declarative shadow root and UA shadow root
|
||||
Pass Declarative Shadow DOM: declarative shadow roots are not supported by the template element
|
||||
Pass Declarative Shadow DOM: explicit test that exceptions are not thrown
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Shadow DOM: Element.attachShadow with ShadowRoot</title>
|
||||
<meta name="author" title="Jesse Jurman" href="mailto:j.r.jurman@gmail.com">
|
||||
<meta name="assert" content="It should be possible to use an existing ShadowRoot as input for Element.attachShadow">
|
||||
<link rel=help href="https://bugs.webkit.org/show_bug.cgi?id=295174">
|
||||
|
||||
<script src="../resources/testharness.js"></script>
|
||||
<script src="../resources/testharnessreport.js"></script>
|
||||
<script src="../resources/testdriver.js"></script>
|
||||
<script src="../resources/testdriver-actions.js"></script>
|
||||
<script src="../resources/testdriver-vendor.js"></script>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div id="elementSource">
|
||||
<span>
|
||||
<template shadowrootmode="open"></template>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="elementTarget"></div>
|
||||
|
||||
<template id="templateSource">
|
||||
<span>
|
||||
<template shadowrootmode="open"></template>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<div id="templateTarget"></div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// test that we can use a ShadowRoot as an input for attachShadow
|
||||
promise_test(async () => {
|
||||
const shadowRoot = elementSource.children[0].shadowRoot;
|
||||
|
||||
// validate that the ShadowRoot is an object, and has properties we expect (like "mode")
|
||||
assert_equals(typeof shadowRoot, 'object');
|
||||
assert_equals(shadowRoot.mode, 'open');
|
||||
|
||||
// attach the shadowRoot to our target element
|
||||
elementTarget.attachShadow(shadowRoot);
|
||||
|
||||
// validate that our target element has a shadowRoot with the same options
|
||||
assert_equals(typeof elementTarget.shadowRoot, 'object');
|
||||
assert_equals(elementTarget.shadowRoot.mode, 'open');
|
||||
}, 'can use ShadowRoot as options for attachShadow');
|
||||
|
||||
// test that we can use a ShadowRoot in a template element as an input for attachShadow
|
||||
promise_test(async () => {
|
||||
const shadowRoot = templateSource.content.children[0].shadowRoot;
|
||||
|
||||
// validate that the ShadowRoot is an object, and has properties we expect (like "mode")
|
||||
assert_equals(typeof shadowRoot, 'object');
|
||||
assert_equals(shadowRoot.mode, 'open');
|
||||
|
||||
// attach the shadowRoot to our target element
|
||||
templateTarget.attachShadow(shadowRoot);
|
||||
|
||||
// validate that our target element has a shadowRoot with the same options
|
||||
assert_equals(typeof templateTarget.shadowRoot, 'object');
|
||||
assert_equals(templateTarget.shadowRoot.mode, 'open');
|
||||
}, 'can use ShadowRoot in document fragment as options for attachShadow');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,405 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Declarative Shadow DOM</title>
|
||||
<link rel="author" href="mailto:masonf@chromium.org">
|
||||
<link rel="help" href="https://github.com/whatwg/dom/issues/831">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
|
||||
<div id="host" style="display:none">
|
||||
<template shadowrootmode="open">
|
||||
<slot id="s1" name="slot1"></slot>
|
||||
</template>
|
||||
<div id="c1" slot="slot1"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Uncaught exceptions (which will manifest as test harness
|
||||
// errors) constitute a failure of this test. No parsing
|
||||
// operations, whether imperative (setHTMLUnsafe) or declarative
|
||||
// (main document parsing) should ever throw exceptions.
|
||||
// More context:
|
||||
// https://github.com/whatwg/html/issues/10527#issuecomment-2275253439
|
||||
|
||||
test(() => {
|
||||
const host = document.querySelector('#host');
|
||||
const c1 = host.querySelector('#c1');
|
||||
assert_true(!!c1);
|
||||
assert_equals(host.querySelector('#s1'), null, "Should be inside shadow root");
|
||||
assert_equals(host.querySelector('template'), null, "No leftover template node");
|
||||
assert_true(!!host.shadowRoot,"No shadow root found");
|
||||
const s1 = host.shadowRoot.querySelector('#s1');
|
||||
assert_equals(c1.assignedSlot, s1);
|
||||
assert_array_equals(s1.assignedNodes(), [c1]);
|
||||
}, 'Declarative Shadow DOM: Basic test');
|
||||
|
||||
test(() => {
|
||||
assert_true(HTMLTemplateElement.prototype.hasOwnProperty("shadowRootMode"),'Unable to feature detect');
|
||||
}, 'Declarative Shadow DOM: Feature detection');
|
||||
|
||||
test(() => {
|
||||
const t = document.createElement('template');
|
||||
t.setAttribute('shadowrootmode','open');
|
||||
assert_equals(t.shadowRootMode,'open','The shadowRootMode IDL should reflect the content attribute');
|
||||
t.setAttribute('shadowrootmode','closed');
|
||||
assert_equals(t.shadowRootMode,'closed','"open" and "closed" should both be valid values');
|
||||
t.setAttribute('shadowrootmode','OpEn');
|
||||
assert_equals(t.shadowRootMode,'open','Case insensitive');
|
||||
t.setAttribute('shadowrootmode','INVALID');
|
||||
assert_equals(t.shadowRootMode,'','Invalid values map to empty string');
|
||||
t.removeAttribute('shadowrootmode');
|
||||
assert_equals(t.shadowRootMode,'','No shadowrootmode attribute maps to empty string');
|
||||
}, 'Shadowrootmode reflection');
|
||||
|
||||
test(() => {
|
||||
const t = document.createElement('template');
|
||||
t.shadowRootMode = 'blah';
|
||||
assert_equals(t.shadowRootMode, '');
|
||||
t.getAttribute('shadowrootmode', 'blah');
|
||||
t.shadowRootMode = 'CLOSED';
|
||||
assert_equals(t.shadowRootMode, 'closed');
|
||||
t.getAttribute('shadowrootmode', 'CLOSED');
|
||||
}, 'Shadowrootmode reflection, setter');
|
||||
|
||||
test(() => {
|
||||
const t = document.createElement('template');
|
||||
t.setAttribute('shadowrootdelegatesfocus','');
|
||||
assert_equals(t.shadowRootDelegatesFocus,true,'The shadowRootDelegatesFocus IDL should reflect the content attribute');
|
||||
t.setAttribute('shadowrootdelegatesfocus','foobar');
|
||||
assert_equals(t.shadowRootDelegatesFocus,true,'The value doesn\'t matter');
|
||||
t.removeAttribute('shadowrootdelegatesfocus');
|
||||
assert_equals(t.shadowRootDelegatesFocus,false,'No shadowRootDelegatesFocus attribute maps to false');
|
||||
}, 'Shadowrootdelegatesfocus reflection');
|
||||
|
||||
test(() => {
|
||||
const t = document.createElement('template');
|
||||
assert_equals(t.getAttribute('shadowrootdelegatesfocus'), null);
|
||||
t.shadowRootDelegatesFocus = true;
|
||||
assert_equals(t.getAttribute('shadowrootdelegatesfocus'), '');
|
||||
assert_equals(t.shadowRootDelegatesFocus, true);
|
||||
t.shadowRootDelegatesFocus = false;
|
||||
assert_equals(t.getAttribute('shadowrootdelegatesfocus'), null);
|
||||
assert_equals(t.shadowRootDelegatesFocus, false);
|
||||
}, 'Shadowrootdelegatesfocus reflection, setter');
|
||||
|
||||
|
||||
test(() => {
|
||||
const t = document.createElement('template');
|
||||
t.setAttribute('shadowrootclonable','');
|
||||
assert_equals(t.shadowRootClonable,true,'The shadowRootClonable IDL should reflect the content attribute');
|
||||
t.setAttribute('shadowrootclonable','foobar');
|
||||
assert_equals(t.shadowRootClonable,true,'The value doesn\'t matter');
|
||||
t.removeAttribute('shadowrootclonable');
|
||||
assert_equals(t.shadowRootClonable,false,'No shadowRootClonable attribute maps to false');
|
||||
}, 'Shadowrootclonable reflection');
|
||||
|
||||
test(() => {
|
||||
const t = document.createElement('template');
|
||||
assert_equals(t.getAttribute('shadowrootclonable'), null);
|
||||
t.shadowRootClonable = true;
|
||||
assert_equals(t.getAttribute('shadowrootclonable'), '');
|
||||
assert_equals(t.shadowRootClonable, true);
|
||||
t.shadowRootClonable = false;
|
||||
assert_equals(t.getAttribute('shadowrootclonable'), null);
|
||||
assert_equals(t.shadowRootClonable, false);
|
||||
}, 'Shadowrootclonable reflection, setter');
|
||||
|
||||
test(() => {
|
||||
const div = document.createElement('div');
|
||||
div.setHTMLUnsafe(`
|
||||
<div id="host">
|
||||
<template shadowrootmode="open">
|
||||
<slot id="s1" name="slot1"></slot>
|
||||
</template>
|
||||
<div id="c1" slot="slot1"></div>
|
||||
</div>
|
||||
`);
|
||||
const host = div.querySelector('#host');
|
||||
const c1 = host.querySelector('#c1');
|
||||
assert_true(!!c1);
|
||||
assert_equals(host.querySelector('#s1'), null, "Should be inside shadow root");
|
||||
assert_equals(host.querySelector('template'), null, "No leftover template node");
|
||||
assert_true(!!host.shadowRoot,"No shadow root found");
|
||||
const s1 = host.shadowRoot.querySelector('#s1');
|
||||
assert_equals(c1.assignedSlot, s1);
|
||||
assert_array_equals(s1.assignedNodes(), [c1]);
|
||||
}, 'Declarative Shadow DOM: Fragment parser basic test');
|
||||
|
||||
test(() => {
|
||||
const div = document.createElement('div');
|
||||
div.setHTMLUnsafe(`
|
||||
<div id="host">
|
||||
<template shadowrootmode="invalid">
|
||||
</template>
|
||||
</div>
|
||||
`);
|
||||
const host = div.querySelector('#host');
|
||||
assert_equals(host.shadowRoot, null, "Shadow root was found");
|
||||
const tmpl = host.querySelector('template');
|
||||
assert_true(!!tmpl,"Template should still be present");
|
||||
const shadowrootAttr = tmpl.getAttribute('shadowrootmode');
|
||||
assert_equals(shadowrootAttr,"invalid","'shadowrootmode' attribute should still be present");
|
||||
}, 'Declarative Shadow DOM: Invalid shadow root attribute');
|
||||
|
||||
test(() => {
|
||||
const div = document.createElement('div');
|
||||
div.setHTMLUnsafe(`
|
||||
<div id="host">
|
||||
<template shadowrootmode="closed">
|
||||
</template>
|
||||
</div>
|
||||
`);
|
||||
const host = div.querySelector('#host');
|
||||
assert_equals(host.shadowRoot, null, "Closed shadow root");
|
||||
assert_equals(host.querySelector('template'), null, "No template - converted to shadow root");
|
||||
}, 'Declarative Shadow DOM: Closed shadow root attribute');
|
||||
|
||||
test(() => {
|
||||
const div = document.createElement('div');
|
||||
div.setHTMLUnsafe(`
|
||||
<div id="host">
|
||||
<template shadowrootmode="open">
|
||||
<slot id="s1" name="slot1"></slot>
|
||||
</div>
|
||||
`);
|
||||
const host = div.querySelector('#host');
|
||||
assert_equals(host.querySelector('#s1'), null, "Should be inside shadow root");
|
||||
assert_equals(host.querySelector('template'), null, "No leftover template node");
|
||||
assert_true(!!host.shadowRoot,"No shadow root found");
|
||||
const s1 = host.shadowRoot.querySelector('#s1');
|
||||
assert_true(!!s1,"Slot should be inside the shadow root");
|
||||
}, 'Declarative Shadow DOM: Missing closing tag');
|
||||
|
||||
test(() => {
|
||||
const div = document.createElement('div');
|
||||
div.setHTMLUnsafe(`
|
||||
<div id="host">
|
||||
<template shadowrootmode="open" shadowrootdelegatesfocus>
|
||||
</template>
|
||||
</div>
|
||||
`);
|
||||
var host = div.querySelector('#host');
|
||||
assert_true(!!host.shadowRoot,"No shadow root found");
|
||||
assert_true(host.shadowRoot.delegatesFocus,"delegatesFocus should be true");
|
||||
div.setHTMLUnsafe(`
|
||||
<div id="host">
|
||||
<template shadowrootmode="open">
|
||||
</template>
|
||||
</div>
|
||||
`);
|
||||
host = div.querySelector('#host');
|
||||
assert_true(!!host.shadowRoot,"No shadow root found");
|
||||
assert_false(host.shadowRoot.delegatesFocus,"delegatesFocus should be false without the shadowrootdelegatesfocus attribute");
|
||||
}, 'Declarative Shadow DOM: delegates focus attribute');
|
||||
|
||||
test(() => {
|
||||
const div = document.createElement('div');
|
||||
div.setHTMLUnsafe(`
|
||||
<div id="host">
|
||||
<template shadowrootmode="open" shadowrootclonable>
|
||||
</template>
|
||||
</div>
|
||||
`);
|
||||
var host = div.querySelector('#host');
|
||||
assert_true(!!host.shadowRoot,"No shadow root found");
|
||||
assert_true(host.shadowRoot.clonable,"clonable should be true");
|
||||
div.setHTMLUnsafe(`
|
||||
<div id="host">
|
||||
<template shadowrootmode="open">
|
||||
</template>
|
||||
</div>
|
||||
`);
|
||||
host = div.querySelector('#host');
|
||||
assert_true(!!host.shadowRoot,"No shadow root found");
|
||||
assert_false(host.shadowRoot.clonable,"clonable should be false without the shadowrootclonable attribute");
|
||||
}, 'Declarative Shadow DOM: clonable attribute');
|
||||
</script>
|
||||
|
||||
<div id="multi-host" style="display:none">
|
||||
<template shadowrootmode="open">
|
||||
<span>root 1</span>
|
||||
</template>
|
||||
<template shadowrootmode="closed">
|
||||
<span>root 2</span>
|
||||
</template>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
const host = document.querySelector('#multi-host');
|
||||
const leftover = host.querySelector('template');
|
||||
assert_true(!!leftover, "The second (duplicate) template should be left in the DOM");
|
||||
assert_true(leftover instanceof HTMLTemplateElement);
|
||||
assert_equals(leftover.getAttribute('shadowrootmode'),"closed");
|
||||
assert_equals(leftover.shadowRootMode,"closed");
|
||||
assert_true(!!host.shadowRoot,"No open shadow root found - first root should remain");
|
||||
const innerSpan = host.shadowRoot.querySelector('span');
|
||||
assert_equals(innerSpan.textContent, 'root 1', "Content should come from first declarative shadow root");
|
||||
}, 'Declarative Shadow DOM: Multiple roots');
|
||||
|
||||
</script>
|
||||
|
||||
<template id="template-containing-shadow">
|
||||
<div class="innerdiv">
|
||||
<template shadowrootmode=open shadowrootclonable>Content</template>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
test(() => {
|
||||
const template = document.querySelector('#template-containing-shadow');
|
||||
const container1 = document.createElement('div');
|
||||
container1.style.display = 'none';
|
||||
document.body.appendChild(container1);
|
||||
container1.appendChild(template.content.cloneNode(true));
|
||||
let innerDiv = container1.querySelector('div.innerdiv');
|
||||
const shadowRoot1 = innerDiv.shadowRoot;
|
||||
assert_true(!!shadowRoot1,"Inner div should have a shadow root");
|
||||
assert_equals(innerDiv.querySelector('template'), null, "No leftover template node");
|
||||
|
||||
const container2 = document.createElement('div');
|
||||
container2.style.display = 'none';
|
||||
document.body.appendChild(container2);
|
||||
container2.appendChild(template.content.cloneNode(true));
|
||||
innerDiv = container2.querySelector('div.innerdiv');
|
||||
const shadowRoot2 = innerDiv.shadowRoot;
|
||||
assert_true(!!shadowRoot2,"Inner div should have a shadow root");
|
||||
assert_equals(innerDiv.querySelector('template'), null, "No leftover template node");
|
||||
|
||||
assert_not_equals(shadowRoot1,shadowRoot2,'Should not get back the same shadow root');
|
||||
|
||||
// Make sure importNode also works.
|
||||
const container3 = document.createElement('div');
|
||||
container3.style.display = 'none';
|
||||
document.body.appendChild(container3);
|
||||
container3.appendChild(document.importNode(template.content,true));
|
||||
innerDiv = container3.querySelector('div.innerdiv');
|
||||
const shadowRoot3 = innerDiv.shadowRoot;
|
||||
assert_true(!!shadowRoot3,"Inner div should have a shadow root");
|
||||
assert_equals(innerDiv.querySelector('template'), null, "No leftover template node");
|
||||
assert_not_equals(shadowRoot1,shadowRoot3,'Should not get back the same shadow root');
|
||||
|
||||
}, 'Declarative Shadow DOM: template containing declarative shadow root (with shadowrootclonable)');
|
||||
</script>
|
||||
|
||||
<template id="template-containing-deep-shadow">
|
||||
<div><div><div><div><div>
|
||||
<div class="innerdiv">
|
||||
<template shadowrootmode=open shadowrootclonable>Content</template>
|
||||
</div>
|
||||
</div></div></div></div></div>
|
||||
</template>
|
||||
<script>
|
||||
test(() => {
|
||||
const template = document.querySelector('#template-containing-deep-shadow');
|
||||
const host = document.createElement('div');
|
||||
host.style.display = 'none';
|
||||
document.body.appendChild(host);
|
||||
host.appendChild(template.content.cloneNode(true));
|
||||
assert_true(!!host.querySelector('div.innerdiv').shadowRoot,"Inner div should have a shadow root");
|
||||
}, 'Declarative Shadow DOM: template containing (deeply nested) declarative shadow root');
|
||||
</script>
|
||||
|
||||
<template id="template-containing-template">
|
||||
<div>
|
||||
<template id="inner-template">
|
||||
<div class="innerdiv">
|
||||
<template shadowrootmode=open shadowrootclonable>Content</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
test(() => {
|
||||
const template = document.querySelector('#template-containing-template');
|
||||
const host = document.createElement('div');
|
||||
host.style.display = 'none';
|
||||
document.body.appendChild(host);
|
||||
host.appendChild(template.content.cloneNode(true));
|
||||
const innerTemplate = host.querySelector('#inner-template');
|
||||
assert_true(!!innerTemplate.content.querySelector('div.innerdiv').shadowRoot,"Inner div should have a shadow root");
|
||||
}, 'Declarative Shadow DOM: template containing a template containing declarative shadow root');
|
||||
</script>
|
||||
|
||||
<template id="template-containing-ua-shadow">
|
||||
<div class="innerdiv">
|
||||
<template shadowrootmode=open shadowrootclonable>
|
||||
<video></video> <!--Assumed to have UA shadow root-->
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
test(() => {
|
||||
const template = document.querySelector('#template-containing-ua-shadow');
|
||||
const host = document.createElement('div');
|
||||
host.style.display = 'none';
|
||||
document.body.appendChild(host);
|
||||
// Mostly make sure clone of template *does* clone the
|
||||
// shadow root, and doesn't crash on cloning the <video>.
|
||||
host.appendChild(template.content.cloneNode(true));
|
||||
let innerDiv = host.querySelector('div.innerdiv');
|
||||
const shadowRoot = innerDiv.shadowRoot;
|
||||
assert_true(!!shadowRoot,"Inner div should have a shadow root");
|
||||
assert_equals(innerDiv.querySelector('template'), null, "No leftover template node");
|
||||
assert_true(!!innerDiv.shadowRoot.querySelector('video'),'Video element should be present');
|
||||
}, 'Declarative Shadow DOM: template containing declarative shadow root and UA shadow root');
|
||||
</script>
|
||||
|
||||
<template id="template-containing-ua-shadow-closed">
|
||||
<div class="innerdiv">
|
||||
<template shadowrootmode=closed>
|
||||
<video></video> <!--Assumed to have UA shadow root-->
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
test(() => {
|
||||
const template = document.querySelector('#template-containing-ua-shadow-closed');
|
||||
const host = document.createElement('div');
|
||||
host.style.display = 'none';
|
||||
document.body.appendChild(host);
|
||||
host.appendChild(template.content.cloneNode(true));
|
||||
let innerDiv = host.querySelector('div.innerdiv');
|
||||
assert_true(!innerDiv.shadowRoot,"Inner div should have a closed shadow root");
|
||||
}, 'Declarative Shadow DOM: template containing closed declarative shadow root and UA shadow root');
|
||||
</script>
|
||||
|
||||
<template id="root-element-shadow">
|
||||
<template shadowrootmode=open>Content</template>
|
||||
</template>
|
||||
<script>
|
||||
test(() => {
|
||||
// Root element of this template is a <template shadowroot>:
|
||||
const template = document.querySelector('#root-element-shadow');
|
||||
const host = document.createElement('div');
|
||||
host.appendChild(template.content.cloneNode(true));
|
||||
assert_equals(host.shadowRoot, null, "Shadow root should not be present");
|
||||
const tmpl = host.querySelector('template');
|
||||
assert_true(!!tmpl,"Template should still be present");
|
||||
assert_equals(tmpl.getAttribute('shadowrootmode'),"open","'shadowrootmode' attribute should still be present");
|
||||
}, 'Declarative Shadow DOM: declarative shadow roots are not supported by the template element');
|
||||
</script>
|
||||
|
||||
<script>
|
||||
let gotError = false;
|
||||
window.addEventListener('error',() => {gotError = true;});
|
||||
</script>
|
||||
<progress id="invalid-element-exception">
|
||||
<template shadowrootmode=open>Content</template>
|
||||
</progress>
|
||||
<script>
|
||||
test(() => {
|
||||
assert_false(gotError,'Exceptions should not be thrown by the parser');
|
||||
const host = document.querySelector('#invalid-element-exception');
|
||||
const leftover = host.querySelector('template');
|
||||
assert_true(!host.shadowRoot,"Progress elements don't allow shadow roots");
|
||||
assert_true(!!leftover, "The template should be left in the DOM");
|
||||
// This also should not throw exceptions:
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
div.setHTMLUnsafe('<progress><template shadowrootmode=open></template></progress>');
|
||||
assert_false(gotError,'Exceptions should not be thrown by the parser');
|
||||
assert_true(!!div.querySelector('template'),'parsing should have succeeded and left the template child');
|
||||
host.remove();
|
||||
div.remove();
|
||||
}, 'Declarative Shadow DOM: explicit test that exceptions are not thrown');
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue