diff options
Diffstat (limited to 'testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-basic.tentative.html')
| -rw-r--r-- | testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-basic.tentative.html | 294 |
1 files changed, 294 insertions, 0 deletions
diff --git a/testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-basic.tentative.html b/testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-basic.tentative.html new file mode 100644 index 0000000000..b71f7d1a37 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-basic.tentative.html @@ -0,0 +1,294 @@ +<!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> +<script src="support/helpers.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,null,'Invalid values map to null'); + t.removeAttribute('shadowrootmode'); + assert_equals(t.shadowRootMode,null,'No shadowrootmode attribute maps to null'); +}, 'Shadowrootmode reflection'); + +test(() => { + const div = document.createElement('div'); + setInnerHTML(div,` + <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'); + setInnerHTML(div,` + <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'); + setInnerHTML(div,` + <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'); + setInnerHTML(div,` + <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'); + setInnerHTML(div,` + <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"); + setInnerHTML(div,` + <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'); +</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'); + assert_equals(host.querySelector('template'), null, "No leftover template nodes from either root"); + assert_true(!!host.shadowRoot,"No open shadow root found - first root should remain"); + const innerSpan = host.shadowRoot.querySelector('span'); + assert_equals(innerSpan.textContent, 'root 2', "Content should come from last declarative shadow root"); +}, 'Declarative Shadow DOM: Multiple roots'); + +</script> + +<template id="template-containing-shadow"> + <div class="innerdiv"> + <template shadowrootmode=open>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'); +</script> + +<template id="template-containing-deep-shadow"> + <div><div><div><div><div> + <div class="innerdiv"> + <template shadowrootmode=open>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>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> + <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> |