tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

basic-dom-part-declarative-brace-syntax-innerhtml.tentative.html (4791B)

      1 <!DOCTYPE html>
      2 <title>DOM Parts: Basic object structure, {{}} declarative API</title>
      3 <link rel=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 const kChildNodePartStartCommentData = "#";
     17 const kChildNodePartEndCommentData = "/";
     18 function assertIsComment(node, commentText) {
     19  assert_true(node instanceof Comment);
     20  // TODO(crbug.com/40271855): While developing alternative syntax, the comment might be empty or it might be "#" or "/".
     21  assert_true(node.textContent === '' || node.textContent === commentText);
     22 }
     23 
     24 const declarativeOpenerNoParseparts  = '<h1>';
     25 const declarativeOpenerParseparts  = '<h1 parseparts>';
     26 const declarativeContent  = '{{#}}First{{#}}<span {{}}>Middle</span>{{/}}Last{{/}}</h1>';
     27 
     28 Array.from(document.querySelectorAll('#context_elements>*')).forEach(contextEl => {
     29  const expectParts = contextEl.classList.contains('expect_success');
     30  [false,true].forEach(addParsePartsInside => {
     31    const description = `${contextEl.outerHTML.split('><')[0]}><h1${addParsePartsInside ? " parseparts" : ""}>content...`;
     32    const content = (addParsePartsInside ? declarativeOpenerParseparts : declarativeOpenerNoParseparts) + declarativeContent;
     33 
     34    test((t) => {
     35      const root = contextEl.content ? contextEl.content.getPartRoot() : document.getPartRoot();
     36      assert_equals(root.getParts().length,0,'Should start with no parts');
     37      t.add_cleanup(() => {
     38        (contextEl.content || contextEl).replaceChildren();
     39        root.getParts().forEach(part => part.disconnect());
     40      });
     41      contextEl.innerHTML = content;
     42      if (expectParts) {
     43        let expectedRootParts = [{type:'ChildNodePart',metadata:[]}];
     44        assertEqualParts(root.getParts(),expectedRootParts,0,'declarative root missing parts');
     45        const childPart1 = root.getParts()[0];
     46        assertIsComment(childPart1.previousSibling,kChildNodePartStartCommentData);
     47        assertIsComment(childPart1.nextSibling,kChildNodePartEndCommentData);
     48        const expectedChild1Parts = [{type:'ChildNodePart',metadata:[]}];
     49        assertEqualParts(childPart1.getParts(),expectedChild1Parts,0,'First level childpart should just have one child part');
     50        const childPart2 = childPart1.getParts()[0];
     51        assertIsComment(childPart2.previousSibling,kChildNodePartStartCommentData);
     52        assertIsComment(childPart2.nextSibling,kChildNodePartEndCommentData);
     53        const expectedChild2Parts = [{type:'NodePart',metadata:[]}];
     54        assertEqualParts(childPart2.getParts(),expectedChild2Parts,0,'Second level childpart should have just the node part');
     55        assert_true(childPart2.getParts()[0].node instanceof HTMLSpanElement);
     56        assert_equals(childPart2.getParts()[0].node.textContent,'Middle');
     57      } else {
     58        assert_equals(root.getParts().length,0);
     59      }
     60    }, `Declarative DOM Parts innerHTML ${description} (expect${expectParts ? "" : " no"} parts)`);
     61  });
     62 });
     63 
     64 test((t) => {
     65  const tmpl = document.createElement('template');
     66  tmpl.parseparts = true;
     67  // See crbug.com/1490375.
     68  tmpl.innerHTML = '<div {{}}></div>';
     69  const root = tmpl.content.getPartRoot();
     70  t.add_cleanup(() => {
     71    tmpl.remove();
     72    root.getParts().forEach(part => part.disconnect());
     73  });
     74  assert_equals(root.getParts().length,1,'There should be one NodePart');
     75 }, `Basic NodePart parsing`);
     76 
     77 
     78 test((t) => {
     79  const tmpl = document.createElement('template');
     80  tmpl.parseparts = true;
     81  tmpl.innerHTML = ' <div id={{}} class={{}} foo=baz></div>';
     82  const root = tmpl.content.getPartRoot();
     83  t.add_cleanup(() => {
     84    tmpl.remove();
     85    root.getParts().forEach(part => part.disconnect());
     86  });
     87  assertEqualParts(root.getParts(),[{type:'AttributePart',metadata:[]},{type:'AttributePart',metadata:[]}],0,'Declarative AttributePart should be present');
     88  function checkBasics(checkContent,expectId,expectClass) {
     89    const innerDiv = checkContent.firstElementChild;
     90    assert_equals(innerDiv.localName,'div');
     91    assert_equals(innerDiv.getAttribute('id'),expectId || '','Declarative AttributeParts id attribute');
     92    assert_equals(innerDiv.getAttribute('class'),expectClass || '','Declarative AttributeParts class attribute');
     93    assert_equals(innerDiv.getAttribute('foo'),'baz','Declarative AttributeParts should not touch other attributes');
     94    return innerDiv;
     95  }
     96  checkBasics(tmpl.content);
     97  const clone = root.clone();
     98  const clonedDiv = checkBasics(clone.rootContainer);
     99 }, `Basic AttributePart parsing with multiple attributes`);
    100 
    101 </script>