summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-basic.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-basic.html
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-basic.html')
-rw-r--r--testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-basic.html329
1 files changed, 329 insertions, 0 deletions
diff --git a/testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-basic.html b/testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-basic.html
new file mode 100644
index 0000000000..8bc6bec5f5
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-basic.html
@@ -0,0 +1,329 @@
+<!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>
+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 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: template root element');
+</script>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-21 00:55:10 +0000