dom/nodes/ParentNode-replaceChildren.html

<!DOCTYPE html>
<meta charset=utf-8>
<title>ParentNode.replaceChildren</title>
<link rel=help href="https://dom.spec.whatwg.org/#dom-parentnode-replacechildren">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pre-insertion-validation-hierarchy.js"></script>
<script>
  preInsertionValidateHierarchy("replaceChildren");

  function test_replacechildren(node, nodeName) {
    test(() => {
      const parent = node.cloneNode();
      parent.replaceChildren();
      assert_array_equals(parent.childNodes, []);
    }, `${nodeName}.replaceChildren() without any argument, on a parent having no child.`);

    test(() => {
      const parent = node.cloneNode();
      parent.replaceChildren(null);
      assert_equals(parent.childNodes[0].textContent, 'null');
    }, `${nodeName}.replaceChildren() with null as an argument, on a parent having no child.`);

    test(() => {
      const parent = node.cloneNode();
      parent.replaceChildren(undefined);
      assert_equals(parent.childNodes[0].textContent, 'undefined');
    }, `${nodeName}.replaceChildren() with undefined as an argument, on a parent having no child.`);

    test(() => {
      const parent = node.cloneNode();
      parent.replaceChildren('text');
      assert_equals(parent.childNodes[0].textContent, 'text');
    }, `${nodeName}.replaceChildren() with only text as an argument, on a parent having no child.`);

    test(() => {
      const parent = node.cloneNode();
      const x = document.createElement('x');
      parent.replaceChildren(x);
      assert_array_equals(parent.childNodes, [x]);
    }, `${nodeName}.replaceChildren() with only one element as an argument, on a parent having no child.`);

    test(() => {
      const parent = node.cloneNode();
      const child = document.createElement('test');
      parent.appendChild(child);
      parent.replaceChildren();
      assert_array_equals(parent.childNodes, []);
    }, `${nodeName}.replaceChildren() without any argument, on a parent having a child.`);

    test(() => {
      const parent = node.cloneNode();
      const child = document.createElement('test');
      parent.appendChild(child);
      parent.replaceChildren(null);
      assert_equals(parent.childNodes.length, 1);
      assert_equals(parent.childNodes[0].textContent, 'null');
    }, `${nodeName}.replaceChildren() with null as an argument, on a parent having a child.`);

    test(() => {
      const parent = node.cloneNode();
      const x = document.createElement('x');
      const child = document.createElement('test');
      parent.appendChild(child);
      parent.replaceChildren(x, 'text');
      assert_equals(parent.childNodes.length, 2);
      assert_equals(parent.childNodes[0], x);
      assert_equals(parent.childNodes[1].textContent, 'text');
    }, `${nodeName}.replaceChildren() with one element and text as argument, on a parent having a child.`);

    async_test(t => {
      let phase = 0;

      const previousParent = node.cloneNode();
      const insertions = [
        document.createElement("test1"),
        document.createElement("test2")
      ];
      previousParent.append(...insertions);

      const parent = node.cloneNode();
      const children = [
        document.createElement("test3"),
        document.createElement("test4")
      ];
      parent.append(...children);

      const previousObserver = new MutationObserver(mutations => {
        t.step(() => {
          assert_equals(phase, 0);
          assert_equals(mutations.length, 2);
          for (const [i, mutation] of Object.entries(mutations)) {
            assert_equals(mutation.type, "childList");
            assert_equals(mutation.addedNodes.length, 0);
            assert_equals(mutation.removedNodes.length, 1);
            assert_equals(mutation.removedNodes[0], insertions[i]);
          }
          phase = 1;
        });
      });
      previousObserver.observe(previousParent, { childList: true });

      const observer = new MutationObserver(mutations => {
        t.step(() => {
          assert_equals(phase, 1, "phase");
          assert_equals(mutations.length, 1, "mutations.length");
          const mutation = mutations[0];
          assert_equals(mutation.type, "childList", "mutation.type");
          assert_equals(mutation.addedNodes.length, 2, "added nodes length");
          assert_array_equals([...mutation.addedNodes], insertions, "added nodes");
          assert_equals(mutation.removedNodes.length, 2, "removed nodes length");
          assert_array_equals([...mutation.removedNodes], children, "removed nodes");
        });
        t.done();
      });
      observer.observe(parent, { childList: true });

      parent.replaceChildren(...previousParent.children);
    }, `${nodeName}.replaceChildren() should move nodes in the right order`);
  }

  test_replacechildren(document.createElement('div'), 'Element');
  test_replacechildren(document.createDocumentFragment(), 'DocumentFragment');
</script>

</html>