diff options
Diffstat (limited to 'testing/web-platform/tests/dom/parts/basic-dom-part-declarative-brace-syntax.tentative.html')
-rw-r--r-- | testing/web-platform/tests/dom/parts/basic-dom-part-declarative-brace-syntax.tentative.html | 235 |
1 files changed, 235 insertions, 0 deletions
diff --git a/testing/web-platform/tests/dom/parts/basic-dom-part-declarative-brace-syntax.tentative.html b/testing/web-platform/tests/dom/parts/basic-dom-part-declarative-brace-syntax.tentative.html new file mode 100644 index 0000000000..001ac24a44 --- /dev/null +++ b/testing/web-platform/tests/dom/parts/basic-dom-part-declarative-brace-syntax.tentative.html @@ -0,0 +1,235 @@ +<!DOCTYPE html> +<title>DOM Parts: Basic object structure, {{}} declarative API</title> +<meta name="author" href="mailto:masonf@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="./resources/domparts-utils.js"></script> + +<div> + <!-- Note - the test will remove this chunk of DOM once the test completes --> + <div id=target2> + Declarative syntax - The *two* templates below should have IDENTICAL STRUCTURE + to this one. There are four cases to test: + 1. Main document parsing (this chunk) + 2. Template parsing (the template below with id=declarative) + 3. Template/fragment cloning (a clone of the template with id=declarative) + 4. Declarative Shadow DOM parsing (template with id=declarative_shadow_dom and shadowrootmode attribute) + <h1 id="name" parseparts> + {{#}} + First + {{#}} <span {{}} id={{}}>Middle</span> {{/}} + Last + {{/}} + <a foo {{}} id=nodepart1>content</a> + <a {{}} id=nodepart2>content</a> + <a {{}}id=nodepart3>content</a> + <a id=nodepart4 {{}}>content</a> + <a id=nodepart5 foo {{}}>content</a> + <a id=nodepart6 foo {{}} >content</a> + </h1> + </div> +</div> +<template id=declarative> + <div> + <div id=target3>Declarative syntax + <h1 id="name" parseparts> + {{#}} + First + {{#}} <span {{}} id={{}}>Middle</span> {{/}} + Last + {{/}} + <a foo {{}} id=nodepart1>content</a> + <a {{}} id=nodepart2>content</a> + <a {{}}id=nodepart3>content</a> + <a id=nodepart4 {{}}>content</a> + <a id=nodepart5 foo {{}}>content</a> + <a id=nodepart6 foo {{}} >content</a> + </h1> + </div> + </div> +</template> + +<!-- TODO: This test should look at declarative shadow DOM behavior. --> + +<script> { +function addPartsCleanup(t,partRoot) { + t.add_cleanup(() => partRoot.getParts().forEach(part => part.disconnect())); +} + +const template = document.getElementById('declarative'); +['Main Document','Template','Clone','PartClone'].forEach(testCase => { + function assertIsComment(node,commentText) { + assert_true(node instanceof Comment); + assert_equals(node.textContent,commentText); + } + + test((t) => { + let doc,target,wrapper,cleanup; + let expectDOMParts = true; + switch (testCase) { + case 'Main Document': + doc = document; + target = doc.querySelector('#target2'); + cleanup = [target.parentElement]; + break; + case 'Template': + doc = template.content; + target = doc.querySelector('#target3'); + cleanup = []; + break; + case 'Clone': + doc = document; + wrapper = document.body.appendChild(document.createElement('div')); + wrapper.appendChild(template.content.cloneNode(true)); + target = wrapper.querySelector('#target3'); + // A "normal" tree clone should not keep DOM Parts: + expectDOMParts = false; + cleanup = [wrapper]; + break; + case 'PartClone': + doc = document; + wrapper = document.body.appendChild(document.createElement('div')); + wrapper.appendChild(template.content.getPartRoot().clone().rootContainer); + target = wrapper.querySelector('#target3'); + // Even a PartRoot clone should not add parts to the document, when that + // clone is appendChilded to the document. + expectDOMParts = false; + cleanup = [wrapper]; + break; + default: + assert_unreached('Invalid test case'); + } + assert_true(!!(doc && target && target.parentElement)); + + const root = doc.getPartRoot(); + t.add_cleanup(() => cleanup.forEach(el => el.remove())); // Cleanup + addPartsCleanup(t,root); // Clean up all Parts when this test ends. + + assert_true(root instanceof DocumentPartRoot); + if (expectDOMParts) { + let expectedRootParts = [{type:'ChildNodePart',metadata:[]}]; + for(let i=0;i<6;++i) { + expectedRootParts.push({type:'NodePart',metadata:[]}); + } + assertEqualParts(root.getParts(),expectedRootParts,0,'declarative root missing parts'); + for(let i=1;i<=6;++i) { + assert_equals(root.getParts()[i].node,target.querySelector(`#nodepart${i}`)); + } + const childPart1 = root.getParts()[0]; + assertIsComment(childPart1.previousSibling,''); + assertIsComment(childPart1.nextSibling,''); + const expectedChild1Parts = [{type:'ChildNodePart',metadata:[]}]; + assertEqualParts(childPart1.getParts(),expectedChild1Parts,0,'First level childpart should just have one child part'); + const childPart2 = childPart1.getParts()[0]; + assertIsComment(childPart2.previousSibling,''); + assertIsComment(childPart2.nextSibling,''); + const expectedChild2Parts = [{type:'NodePart',metadata:[]}]; + assertEqualParts(childPart2.getParts(),expectedChild2Parts,0,'Second level childpart should have just the node part (AttributePart is automatic)'); + assert_true(childPart2.getParts()[0].node instanceof HTMLSpanElement); + assert_equals(childPart2.getParts()[0].node.textContent,'Middle'); + } else { + assertEqualParts(root.getParts(),[],[]); + } + }, `Basic declarative DOM Parts (${testCase})`); +}); + +}</script> + +<div parseparts>Before {{#}}Parts{{/}} After</div> +<script> + test((t) => { + const target = document.currentScript.previousElementSibling; + t.add_cleanup(() => target.remove()); + const root = document.getPartRoot(); + addPartsCleanup(t,root); + assert_equals(root.getParts().length,1); + assert_equals(target.innerHTML,'Before <!---->Parts<!----> After'); + + // Verify that removing the parseparts attribute does nothing. + target.removeAttribute('parseparts'); + assert_equals(root.getParts().length,1); + assert_equals(target.innerHTML,'Before <!---->Parts<!----> After'); + }, 'Post-parsing structure of child parts, and stickiness'); +</script> + +<div>Before {{#}}Parts{{/}} After</div> +<script>{ + test((t) => { + const target = document.currentScript.previousElementSibling; + t.add_cleanup(() => target.remove()); + const root = document.getPartRoot(); + addPartsCleanup(t,root); + assert_equals(root.getParts().length,0); + assert_equals(target.innerHTML,'Before {{#}}Parts{{/}} After'); + target.setAttribute('parseparts',''); + assert_equals(root.getParts().length,0); + assert_equals(target.innerHTML,'Before {{#}}Parts{{/}} After'); + }, 'Parser only behavior - adding parseparts does nothing'); +}</script> + +<div parseparts>{{#}}{{/}}</div> +<script>{ + test((t) => { + const target = document.currentScript.previousElementSibling; + t.add_cleanup(() => target.remove()); + const root = document.getPartRoot(); + addPartsCleanup(t,root); + assert_equals(root.getParts().length,1); + assert_equals(target.innerHTML,'<!----><!---->'); + }, 'Just parts, no text before'); +}</script> + +<div><input parseparts>{{#}}{{/}}</input></div> +<script>{ + test((t) => { + const target = document.currentScript.previousElementSibling; + t.add_cleanup(() => target.remove()); + const root = document.getPartRoot(); + addPartsCleanup(t,root); + assert_equals(root.getParts().length,0); + assert_equals(target.innerHTML,'<input parseparts=\"\">{{#}}{{/}}'); + }, 'Self closing elements can\'t use parseparts'); +}</script> + +<div><head parseparts>{{#}}{{/}}</head></div> +<script>{ + test((t) => { + const target = document.currentScript.previousElementSibling; + t.add_cleanup(() => target.remove()); + const root = document.getPartRoot(); + addPartsCleanup(t,root); + assert_equals(root.getParts().length,0); + assert_equals(target.innerHTML,'{{#}}{{/}}'); + }, 'Second head element can\'t use parseparts'); +}</script> + +<div parseparts><svg>{{#}}<circle/>{{/}}</svg></div> + +<script>{ + test((t) => { + const target = document.currentScript.previousElementSibling; + t.add_cleanup(() => target.remove()); + const root = document.getPartRoot(); + addPartsCleanup(t,root); + assert_equals(root.getParts().length,1); + assert_equals(target.innerHTML,'<svg><!----><circle/><!----></svg>'); + }, 'Foreign content should support Parts'); +}</script> + +<div> + <div parseparts>{{}}{{ }}{{ #}}{{ /}}{{{}}}</div> + <div>{{}}{{ }}{{ #}}{{ /}}{{{}}}</div> +</div> +<script>{ + test((t) => { + const target = document.currentScript.previousElementSibling; + t.add_cleanup(() => target.remove()); + const root = document.getPartRoot(); + addPartsCleanup(t,root); + assert_equals(root.getParts().length,0); + assert_equals(target.childElementCount,2); + Array.from(target.children).forEach(el => { + assert_equals(el.innerHTML,'{{}}{{ }}{{ #}}{{ /}}{{{}}}'); + }) + }, 'Not quite parts syntax - none should become parts, and nothing should crash'); +}</script> |