summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/dom/parts/basic-dom-part-declarative-brace-syntax.tentative.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/dom/parts/basic-dom-part-declarative-brace-syntax.tentative.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/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.html235
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>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-02 13:28:04 +0000