diff options
Diffstat (limited to 'testing/web-platform/tests/dom/parts/basic-dom-part-declarative-brace-syntax-innerhtml.tentative.html')
-rw-r--r-- | testing/web-platform/tests/dom/parts/basic-dom-part-declarative-brace-syntax-innerhtml.tentative.html | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/testing/web-platform/tests/dom/parts/basic-dom-part-declarative-brace-syntax-innerhtml.tentative.html b/testing/web-platform/tests/dom/parts/basic-dom-part-declarative-brace-syntax-innerhtml.tentative.html new file mode 100644 index 0000000000..58db5cd04f --- /dev/null +++ b/testing/web-platform/tests/dom/parts/basic-dom-part-declarative-brace-syntax-innerhtml.tentative.html @@ -0,0 +1,101 @@ +<!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 id=context_elements> + <div></div> + <div parseparts></div> + <template></template> + <template parseparts class=expect_success></template> +</div> + +<script> +function assertIsComment(node,commentText) { + assert_true(node instanceof Comment); + assert_equals(node.textContent,commentText); +} + +const declarativeOpenerNoParseparts = '<h1>'; +const declarativeOpenerParseparts = '<h1 parseparts>'; +const declarativeContent = '{{#}}First{{#}}<span {{}}>Middle</span>{{/}}Last{{/}}</h1>'; + +Array.from(document.querySelectorAll('#context_elements>*')).forEach(contextEl => { + const expectParts = contextEl.classList.contains('expect_success'); + [false,true].forEach(addParsePartsInside => { + const description = `${contextEl.outerHTML.split('><')[0]}><h1${addParsePartsInside ? " parseparts" : ""}>content...`; + const content = (addParsePartsInside ? declarativeOpenerParseparts : declarativeOpenerNoParseparts) + declarativeContent; + + test((t) => { + const root = contextEl.content ? contextEl.content.getPartRoot() : document.getPartRoot(); + assert_equals(root.getParts().length,0,'Should start with no parts'); + t.add_cleanup(() => { + contextEl.replaceChildren(); + root.getParts().forEach(part => part.disconnect()); + }); + contextEl.innerHTML = content; + if (expectParts) { + let expectedRootParts = [{type:'ChildNodePart',metadata:[]}]; + assertEqualParts(root.getParts(),expectedRootParts,0,'declarative root missing parts'); + 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'); + assert_true(childPart2.getParts()[0].node instanceof HTMLSpanElement); + assert_equals(childPart2.getParts()[0].node.textContent,'Middle'); + } else { + assert_equals(root.getParts().length,0); + } + }, `Declarative DOM Parts innerHTML ${description} (expect${expectParts ? "" : " no"} parts)`); + }); +}); + +test((t) => { + const tmpl = document.createElement('template'); + tmpl.parseparts = true; + // See crbug.com/1490375. + tmpl.innerHTML = '<div {{}}></div>'; + const root = tmpl.content.getPartRoot(); + t.add_cleanup(() => { + tmpl.remove(); + root.getParts().forEach(part => part.disconnect()); + }); + assert_equals(root.getParts().length,1,'There should be one NodePart'); +}, `Basic NodePart parsing`); + + +test((t) => { + const tmpl = document.createElement('template'); + tmpl.parseparts = true; + tmpl.innerHTML = ' <div id={{}} class={{}} foo=baz></div>'; + const root = tmpl.content.getPartRoot(); + t.add_cleanup(() => { + tmpl.remove(); + root.getParts().forEach(part => part.disconnect()); + }); + assert_equals(root.getParts().length,0,'Declarative AttributeParts should be automatic, and should not show up in getParts()'); + function checkBasics(checkContent,expectId,expectClass) { + const innerDiv = checkContent.firstElementChild; + assert_equals(innerDiv.localName,'div'); + assert_equals(innerDiv.getAttribute('id'),expectId || '','Declarative AttributeParts id attribute'); + assert_equals(innerDiv.getAttribute('class'),expectClass || '','Declarative AttributeParts class attribute'); + assert_equals(innerDiv.getAttribute('foo'),'baz','Declarative AttributeParts should not touch other attributes'); + return innerDiv; + } + checkBasics(tmpl.content); + const clone = root.clone(); + const clonedDiv = checkBasics(clone.rootContainer); + const cloneWithValues = root.clone({attributeValues: ['foo','bar']}); + const clonedDiv2 = checkBasics(cloneWithValues.rootContainer,'foo','bar'); +}, `Basic AttributePart cloning with values`); + +</script> + |