template-for-replace.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 3 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/dom/partial-updates/tentative/template-for-replace.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8" />

<title>HTML partial updates - declarative replace</title>

<link rel="help" href="https://github.com/WICG/declarative-partial-updates" />

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<div marker="placeholder">

  <?start>

  <div id="placeholder-old">Old content</div>

  <?end>

</div>

<template for="placeholder"><div id="placeholder">New content</div></template>

<script>

  test(() => {

    assert_equals(

      document.getElementById("placeholder").textContent,

      "New content",

);

  }, "<template for> replace");

test(() => {

    const doc = document.implementation.createHTMLDocument();

    doc.write('<div id="placeholder" marker=p><?start>Old content</div>');

    assert_equals(doc.querySelector("#placeholder").innerText, "Old content");

    doc.write('<template for="p">');

    assert_equals(doc.querySelector("template"), null);

    assert_equals(doc.querySelector("#placeholder").innerText, "");

    doc.write('<span>New</span>');

    assert_equals(doc.querySelector("#placeholder").innerText, "New");

    doc.write('<span> content</span></template>');

    assert_equals(doc.querySelector("#placeholder").innerText, "New content");

    assert_equals(doc.querySelector("template"), null);

}, "<template for> should work when chunked");

test(() => {

    const doc = document.implementation.createHTMLDocument();

    doc.write('<div id="placeholder" marker=p><?start>Old content</div>');

    assert_equals(doc.querySelector("#placeholder").textContent, "Old content");

    doc.write('<template for="p">');

    doc.write('<div id=main>Hello ');

    doc.write('main</div></template>');

    assert_equals(doc.querySelector("#placeholder #main").textContent, "Hello main");

}, "<template for> should work when elements are sliced in the middle");

</script>