basic-dom-part-declarative-pi-syntax.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 4 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /dom/parts/basic-dom-part-declarative-pi-syntax.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>DOM Parts: Basic object structure, &lt;?child-node-part?> 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">

      <?child-node-part fullname?>

        First

        <!--?child-node-part middle?--> <?node-part middle-node?>Middle <?/child-node-part middle?>

        Last

    <!-- ?/child-node-part foobar? -->

    </h1>

    Email: <?node-part email-link?><a id="link"></a>

    Here are some invalid parts that should not get parsed:

    <!--child-node-part test comment without leading ?-->

    <child-node-part test PI without leading ?>

    <!--?child-node-partfoobar?-->

    <?child-node-partfoobar?>

  </div>

</div>

<template id=declarative>

  <div>

    <div id=target3>Declarative syntax

      <h1 id="name">

        <?child-node-part fullname?>

          First

          <!--?child-node-part middle?--> <?node-part middle-node?>Middle <?/child-node-part middle?>

          Last

        <!-- ?/child-node-part foobar? -->

      </h1>

      Email: <?node-part email-link?><a id="link"></a>

      Here are some invalid parts that should not get parsed:

      <!--child-node-part test comment without leading ?-->

      <child-node-part test PI without leading ?>

      <!--?child-node-partfoobar?-->

      <?child-node-partfoobar?>

    </div>

  </div>

</template>

<!-- TODO: This test should look at declarative shadow DOM behavior. -->

<script> {

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'));

        assert_true(template.content.getPartRoot().getParts().length != 0);

        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

    t.add_cleanup(() => root.getParts().forEach(part => part.disconnect()));

    assert_true(root instanceof DocumentPartRoot);

    if (expectDOMParts) {

      const expectedRootParts = [{type:'ChildNodePart',metadata:['fullname']},{type:'NodePart',metadata:['email-link']}];

      assertEqualParts(root.getParts(),expectedRootParts,0,'declarative root should have two parts');

      assert_equals(root.getParts()[1].node,target.querySelector('#link'));

      const childPart1 = root.getParts()[0];

      assertIsComment(childPart1.previousSibling,'?child-node-part fullname?');

      assertIsComment(childPart1.nextSibling,' ?/child-node-part foobar? ');

      const expectedChild1Parts = [{type:'ChildNodePart',metadata:['middle']}];

      assertEqualParts(childPart1.getParts(),expectedChild1Parts,0,'First level childpart should just have one child part');

      const childPart2 = childPart1.getParts()[0];

      assertIsComment(childPart2.previousSibling,'?child-node-part middle?');

      assertIsComment(childPart2.nextSibling,'?/child-node-part middle?');

      const expectedChild2Parts = [{type:'NodePart',metadata:['middle-node']}];

      assertEqualParts(childPart2.getParts(),expectedChild2Parts,0,'Second level childpart should have just the node part');

      assert_true(childPart2.getParts()[0].node instanceof Text);

      assert_equals(childPart2.getParts()[0].node.textContent,'Middle ');

    } else {

      assertEqualParts(root.getParts(),[],[]);

  }, `Basic declarative DOM Parts (${testCase})`);

});

}</script>