testing/web-platform/tests/dom/parts/basic-dom-part-declarative-brace-syntax-innerhtml.tentative.html

   1 <!DOCTYPE html>
   2 <title>DOM Parts: Basic object structure, {{}} declarative API</title>
   3 <meta name="author" href="mailto:masonf@chromium.org">
   4 <script src="/resources/testharness.js"></script>
   5 <script src="/resources/testharnessreport.js"></script>
   6 <script src="./resources/domparts-utils.js"></script>
   7
   8 <div id=context_elements>
   9   <div></div>
  10   <div parseparts></div>
  11   <template></template>
  12   <template parseparts class=expect_success></template>
  13 </div>
  14
  15 <script>
  16 function assertIsComment(node,commentText) {
  17   assert_true(node instanceof Comment);
  18   assert_equals(node.textContent,commentText);
  19 }
  20
  21 const declarativeOpenerNoParseparts  = '<h1>';
  22 const declarativeOpenerParseparts  = '<h1 parseparts>';
  23 const declarativeContent  = '{{#}}First{{#}}<span {{}}>Middle</span>{{/}}Last{{/}}</h1>';
  24
  25 Array.from(document.querySelectorAll('#context_elements>*')).forEach(contextEl => {
  26   const expectParts = contextEl.classList.contains('expect_success');
  27   [false,true].forEach(addParsePartsInside => {
  28     const description = `${contextEl.outerHTML.split('><')[0]}><h1${addParsePartsInside ? " parseparts" : ""}>content...`;
  29     const content = (addParsePartsInside ? declarativeOpenerParseparts : declarativeOpenerNoParseparts) + declarativeContent;
  30
  31     test((t) => {
  32       const root = contextEl.content ? contextEl.content.getPartRoot() : document.getPartRoot();
  33       assert_equals(root.getParts().length,0,'Should start with no parts');
  34       t.add_cleanup(() => {
  35         contextEl.replaceChildren();
  36         root.getParts().forEach(part => part.disconnect());
  37       });
  38       contextEl.innerHTML = content;
  39       if (expectParts) {
  40         let expectedRootParts = [{type:'ChildNodePart',metadata:[]}];
  41         assertEqualParts(root.getParts(),expectedRootParts,0,'declarative root missing parts');
  42         const childPart1 = root.getParts()[0];
  43         assertIsComment(childPart1.previousSibling,'');
  44         assertIsComment(childPart1.nextSibling,'');
  45         const expectedChild1Parts = [{type:'ChildNodePart',metadata:[]}];
  46         assertEqualParts(childPart1.getParts(),expectedChild1Parts,0,'First level childpart should just have one child part');
  47         const childPart2 = childPart1.getParts()[0];
  48         assertIsComment(childPart2.previousSibling,'');
  49         assertIsComment(childPart2.nextSibling,'');
  50         const expectedChild2Parts = [{type:'NodePart',metadata:[]}];
  51         assertEqualParts(childPart2.getParts(),expectedChild2Parts,0,'Second level childpart should have just the node part');
  52         assert_true(childPart2.getParts()[0].node instanceof HTMLSpanElement);
  53         assert_equals(childPart2.getParts()[0].node.textContent,'Middle');
  54       } else {
  55         assert_equals(root.getParts().length,0);
  56       }
  57     }, `Declarative DOM Parts innerHTML ${description} (expect${expectParts ? "" : " no"} parts)`);
  58   });
  59 });
  60 </script>
  61