commit 65152510bff5b96dcf489b691b72471aff8e9028 parent c2db92a339089aa1523fddfb9cb42e7eb72a2295 Author: Noam Rosenthal <nrosenthal@chromium.org> Date: Fri, 31 Oct 2025 08:53:31 +0000 Bug 1996607 [wpt PR 55680] - Out-of-order streaming: refactor to <template contentmethod>, a=testonly Automatic update from web-platform-tests Out-of-order streaming: refactor to <template contentmethod> See discussion in https://github.com/whatwg/html/issues/11542 (This is not shipped/fully specced yet) Using this model: ``` <element-name contentname="foo">Old content</element-name> <template contentmethod="replace|replace-children|append|prepend"> <element-name contentname="foo">New content</element-name> ``` By using the actual tag names instead of patching from the template directly, we reduce a lot of the parsing complexity because the state of the parser doesn't change. The entire "patching" mechanism is now done as preprocessing of a parser task, right before the task is queued. The entire state related to patching is saved on the relevant 1 or 2 StackItems, and HTMLTemplateElement is not part of this. Templates with a valid contentmethod are not attached to the document, regardless of the validity of their inner patches. patch events/CSS/patchAll temporarily don't work until we make some more progress on other things. Bug: 431374376 Change-Id: Id3f775ccf73ce9399db9c452c3fe96fa7c9ca6fb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7066816 Reviewed-by: Philip Jägenstedt <foolip@chromium.org> Commit-Queue: Noam Rosenthal <nrosenthal@google.com> Cr-Commit-Position: refs/heads/main@{#1536080} -- wpt-commits: f9300c0281db5295f2026ada45c59e357968a930 wpt-pr: 55680 Diffstat:
49 files changed, 637 insertions(+), 566 deletions(-)
diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/current-patch.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/current-patch.html @@ -1,34 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates - reflection via element.currentPatch</title> -<link rel=help href="https://github.com/WICG/declarative-partial-updates"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> - -<script> -promise_test(async t => { - const doc = document.implementation.createHTMLDocument(); - doc.write('<div id="placeholder">Old content</div>'); - const placeholder = doc.getElementById("placeholder"); - assert_equals(placeholder.currentPatch, null, "no patch active, currentPatch should be null"); - doc.write('<template id=patchy patchfor="placeholder">'); - const {currentPatch} = placeholder; - assert_true(currentPatch instanceof Patch); - const {finished, source} = currentPatch; - assert_true(source instanceof HTMLTemplateElement); - assert_equals(source.id, "patchy"); - let did_finish = false; - finished.then((() => {did_finish = true})); - await new Promise(resolve => t.step_timeout(resolve, 100)); - assert_false(did_finish, "we are not finished yet"); - doc.write("<p>content</p>"); - await new Promise(resolve => t.step_timeout(resolve, 100)); - assert_false(did_finish, "we are not finished yet"); - assert_equals(placeholder.currentPatch, currentPatch); - doc.write("</template>"); - assert_equals(placeholder.currentPatch, null, "template is closed, currentPatch is null"); - const result = await finished; - assert_equals(result, undefined); -}, "currentPatch lifecycle"); - -</script> -\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/patch-all.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/patch-all.html @@ -1,61 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates - patch stream</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 id="target">Default</div> -<div id="placeholder"> -<style id="style"></style> -<p id=text>Hello <span id="content"></span></p> -</div> -<div id="placeholder2"> - <span id="target"></span> -</div> - -<script> -promise_test(async t => { - const placeholder = document.querySelector("#placeholder"); - const writable = placeholder.patchAll(); - assert_true(writable instanceof WritableStream, "node.patchAll() returns a writable stream"); - const response = new Response(` - <div>before </div> - <template patchfor=content>world</template> - after - <template patchfor=style>#content { color: rgb(100, 0, 100); }</template> - `, {headers: {"Content-Type": "text/html"}}); - const done = response.body.pipeTo(writable); - const content = placeholder.querySelector("#content"); - let did_fire_event = false; - content.addEventListener("patch", () => { - did_fire_event = true; - }); - assert_equals(placeholder.currentPatch, null); - await done; - assert_equals(content.textContent, "world"); - assert_equals(getComputedStyle(content).color, "rgb(100, 0, 100)"); - assert_equals(placeholder.querySelector("#text").textContent, "Hello world"); - assert_true(did_fire_event); -}, "Streaming into node.patchAll() updates subtree by ID"); - -promise_test(async t => { - const placeholder = document.querySelector("#placeholder2"); - const writable = placeholder.patchAll(); - const response = new Response("<template patchfor=target>content</template>", {headers: {"Content-Type": "text/html"}}); - const inner_target = placeholder.querySelector("#target"); - const outer_target = document.body.querySelector("#target"); - await response.body.pipeTo(writable); - assert_equals(inner_target.textContent, "content"); - assert_equals(outer_target.textContent, "Default"); -}, "IDs are scoped to the patchAll target"); - -promise_test(async t => { - const placeholder = document.querySelector("#placeholder"); - placeholder.innerHTML = "before"; - const writable = placeholder.patchAll(); - const response = new Response("<template patchfor=placeholder>after</template>", {headers: {"Content-Type": "text/html"}}); - await response.body.pipeTo(writable); - assert_equals(placeholder.textContent, "before"); -}, "ID of the root node itself is ignored"); - -</script> -\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/patch-event.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/patch-event.html @@ -1,32 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates - patch event</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 id="placeholder"> -</div> - -<script> -promise_test(async t => { - const popup = window.open(); - const doc = popup.document; - doc.write("<div id=placeholder></div>"); - const placeholder = doc.getElementById("placeholder"); - const sequence = []; - const observer = new MutationObserver(records => { - sequence.push({type: "mutation", records}); - }); - observer.observe(placeholder, {childList: true}); - placeholder.addEventListener("patch", event => { - sequence.push({type: "event", event}); - }); - doc.write("<template patchfor=placeholder><p>content</p>"); - await Promise.resolve(); - assert_equals(sequence.length, 2); - assert_equals(sequence[0].type, "mutation"); - assert_equals(sequence[1].type, "event"); - assert_equals(sequence[1].event.patch, placeholder.currentPatch); -}, "patch event timing"); - -</script> -\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/patching-pseudo.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/patching-pseudo.html @@ -1,49 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates - :patching pseudo-class</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 id="placeholder"> - -</div> -<script> -</script> - -<script> -promise_test(async t => { - const popup = window.open(); - t.add_cleanup(() => popup.close()); - const doc = popup.document; - doc.write("<div id=placeholder></div>"); - const placeholder = doc.getElementById("placeholder"); - assert_false(placeholder.matches(":patching"), ":patching shouldn't match at start"); - doc.write("<template id=mypatch patchfor=placeholder><p>content</p>"); - assert_true(placeholder.matches(":patching"), ":patching should match while actively patching"); - doc.write("</template>"); - assert_false(placeholder.matches(":patching"), ":patching shouldn't match when patching is complete"); -}, "patching pseudo-class"); - -promise_test(async t => { - const popup = window.open(); - t.add_cleanup(() => popup.close()); - const doc = popup.document; - doc.write(` - <style> - #placeholder { color: rgb(100, 0, 0); } - #placeholder:patching { color: rgb(0, 0, 100); } - </style> - `); - doc.write("<div id=placeholder></div>"); - const placeholder = doc.getElementById("placeholder"); - await new Promise(resolve => popup.requestAnimationFrame(resolve)); - assert_equals(popup.getComputedStyle(placeholder).color, "rgb(100, 0, 0)"); - doc.write("<template patchfor=placeholder>"); - await new Promise(resolve => popup.requestAnimationFrame(resolve)); - assert_equals(popup.getComputedStyle(placeholder).color, "rgb(0, 0, 100)"); - doc.write("</template>"); - await new Promise(resolve => popup.requestAnimationFrame(resolve)); - assert_equals(popup.getComputedStyle(placeholder).color, "rgb(100, 0, 0)"); -}, "patching state change should invalidate style"); - -</script> -\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/patchsrc.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/patchsrc.html @@ -1,60 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates - patchsrc</title> -<link rel=help href="https://github.com/WICG/declarative-partial-updates"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/common/get-host-info.sub.js"></script> -<div id="placeholder">Initial</div> -<template patchsrc="resources/included.txt" patchfor="placeholder">Loading</template> -<script> - -const {REMOTE_ORIGIN} = get_host_info(); -const REMOTE_PATH = new URL(new URL(location.href).pathname + "/..", REMOTE_ORIGIN).href; - -promise_test(async t => { - const placeholder = document.querySelector("#placeholder"); - await placeholder.currentPatch.finished; - assert_equals(placeholder.querySelector("#included").textContent, "Done"); -}, "patchsrc should load external content"); - -promise_test(async t => { - const placeholder = document.querySelector("#placeholder"); - const writer = document.body.patchAll().getWriter(); - const patch_promise = new Promise(resolve => placeholder.addEventListener("patch", e => resolve(e.patch))); - await writer.write('<template patchfor="placeholder" patchsrc="/resources/404.html"></template>'); - const patch = await patch_promise; - await promise_rejects_dom(t, "NotFoundError", patch.finished); -}, "patchsrc should reject with NotFound when external content is not found"); - -promise_test(async t => { - const placeholder = document.querySelector("#placeholder"); - const writer = document.body.patchAll().getWriter(); - const patch_promise = new Promise(resolve => placeholder.addEventListener("patch", e => resolve(e.patch))); - await writer.write(`<template patchfor="placeholder" patchsrc="${REMOTE_PATH}/resources/included.txt"></template>`); - const patch = await patch_promise; - await promise_rejects_dom(t, "NetworkError", patch.finished); -}, "patchsrc should fail when loading a cross-origin patch without CORS headers"); - -promise_test(async t => { - const placeholder = document.querySelector("#placeholder"); - const writer = document.patchAll().getWriter(); - const patch_promise = new Promise(resolve => placeholder.addEventListener("patch", e => resolve(e.patch))); - await writer.write(`<template patchfor="placeholder" patchsrc="${REMOTE_PATH}/resources/included.txt?pipe=header(Access-Control-Allow-Origin,*)"></template>`); - const patch = await patch_promise; - await patch.finished; - assert_equals(placeholder.querySelector("#included").textContent, "Done"); -}, "patchsrc should work with the appropriate CORS headers"); - -promise_test(async t => { - const placeholder = document.querySelector("#placeholder"); - const writer = document.patchAll().getWriter(); - const patch_promise = new Promise(resolve => placeholder.addEventListener("patch", e => resolve(e.patch))); - await writer.write(`<template patchfor="placeholder" patchsrc="resources/delay.py?delay=2000">Wait</template>`); - const patch = await patch_promise; - assert_equals(placeholder.textContent, "Wait"); - await patch.finished; - assert_equals(placeholder.textContent, "OK"); -}, "patchsrc should apply the inline content before the response arrives"); - -</script> -\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/resources/contentmethod-root.xhtml b/testing/web-platform/tests/html/dom/partial-updates/tentative/resources/contentmethod-root.xhtml @@ -0,0 +1,4 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<template xmlns="http://www.w3.org/1999/xhtml" id="patch" contentmethod="append"> + <html contentname="a"></html> +</template> diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/resources/contentmethod.xhtml b/testing/web-platform/tests/html/dom/partial-updates/tentative/resources/contentmethod.xhtml @@ -0,0 +1,7 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html> +<section xmlns="http://www.w3.org/1999/xhtml" id="placeholder" contentname="p">Unchanged</section> +<template xmlns="http://www.w3.org/1999/xhtml" id="patch" contentmethod="replace-children"> + <section contentname="p"></section> +</template> +</html> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-append-elements.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-append-elements.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates - declarative append</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 id="placeholder" contentname="placeholder">Some</div> +<template contentmethod="append"><div contentname="placeholder"><span> </span><span>content</span></div></template> +<script> +test(() => { + assert_equals(document.getElementById("placeholder").innerHTML, "Some<span> </span><span>content</span>"); +}, "<template contentmethod=append> with element"); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-append-text.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-append-text.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates - declarative append</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 id="placeholder" contentname="placeholder">Some</div> +<template contentmethod="append"><div contentname="placeholder"> <span>content</span></div></template> +<script> +test(() => { + const placeholder = document.getElementById("placeholder"); + assert_equals(placeholder.textContent, "Some content"); + assert_equals(placeholder.firstChild.textContent, "Some "); + assert_equals(placeholder.firstChild.nextSibling.tagName, "SPAN"); +}, "<template contentmethod=append> with text"); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-append-to-head.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-append-to-head.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<head contentname="head"> +<meta charset="utf-8" /> +<title >HTML partial updates - cannot patch head directly</title> +<link rel=help href="https://github.com/WICG/declarative-partial-updates"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<template contentmethod="append"> + <head contentname="head"><meta id="added" content="something"></head> +</template> +<script> +test(() => { + const meta = document.getElementById("added"); + assert_equals(meta, null); +}); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-innerHTML-ambiguous.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-innerHTML-ambiguous.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates: patching via innerHTML with ambiguous target</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 id="container"></div> +<div id="placeholder" contentname="placeholder">Old content in light DOM</div> +<script> +// The contentname "placeholder" appears both after the container on which innerHTML is +// set, and in created fragment. Which element should be updated depends on the +// details of how this is spec'd. +test(() => { + const container = document.getElementById("container"); + const outerPlaceholder = document.getElementById("placeholder"); + container.innerHTML = `<div id="placeholder" contentname="placeholder">Old content in innerHTML</div><template contentmethod="replace-children"><div contentname="placeholder">New content</div></template>`; + const innerPlaceholder = container.firstChild; + assert_equals(innerPlaceholder.id, "placeholder"); + // patches apply inside the fragment + assert_equals(outerPlaceholder.textContent, "Old content in light DOM"); + assert_equals(innerPlaceholder.textContent, "New content"); +}, "<template patchfor> in innerHTML patching inner element"); +</script> diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-innerHTML-outside.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-innerHTML-outside.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates: patching via innerHTML</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 id="placeholder" contentname="p">Old content</div> +<div id="container"></div> +<script> +test(() => { + const placeholder = document.getElementById("placeholder"); + const container = document.getElementById("container"); + assert_equals(placeholder.textContent, "Old content"); + container.innerHTML = "<template contentmethod=replace><div contentname=p>New content</div></template>"; + assert_equals(placeholder.textContent, "Old content"); + // The <template> element should not be inserted, so no child nodes. + assert_false(container.hasChildNodes(), "template should not attach"); +}, "<template contentmethod> in innerHTML should not patch outer element"); +</script> diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-innerHTML-within.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-innerHTML-within.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates: patching via innerHTML</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 id="container"></div> +<script> +test(() => { + const container = document.getElementById("container"); + container.innerHTML = ` + <div id="placeholder" contentname=p>Old content in innerHTML</div> + <template contentmethod="replace-children"> + <div contentname="p">New content</div> + </template>`; + const placeholder = container.querySelector("div"); + assert_equals(placeholder.id, "placeholder"); + assert_equals(placeholder.textContent, "New content"); + assert_equals(container.querySelector("template"), null); +}, "<template contentmethod> in innerHTML patching inner element"); +</script> diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-invalid.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-invalid.html @@ -0,0 +1,13 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates: invalid contentmethod</title> +<link rel=help href="https://github.com/WICG/declarative-partial-updates"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<template contentmethod="invalid">New content</template> +<script> +test(() => { + assert_not_equals(document.querySelector("template[contentmethod=invalid]"), null); +}, "<template contentmethod> with an invalid contentmethod should attach"); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-multiple.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-multiple.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates - multiple patches</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 contentname="p1">Old P1</div> +<div contentname="p2">Old P2</div> +<div contentname="p3">Old P3</div> +<template contentmethod="replace-children"> + <div contentname="p1"><span>New P1</span></div> + <div contentname="p2"><span>New P2</span></div> +</template> +<template contentmethod="replace"> + <div contentname="p3"><span>New P3</span></div> +</template> +<template contentmethod="append"> + <div contentname="p2"><span>...</span><span></span>more P2</span></div> +</template> +<template contentmethod="prepend"> + <div contentname="p2"><span>And</span><span>...</span></div> + <div contentname="p3"><span>Pre P3 </span></div> +</template> +<script> +test(() => { + assert_equals(document.querySelector("div[contentname=p1]").textContent, 'New P1'); + assert_equals(document.querySelector("div[contentname=p2]").textContent, 'And...New P2...more P2'); + assert_equals(document.querySelector("div[contentname=p3]").textContent, 'Pre P3 New P3'); +}, "Multiple <template contentmethod>"); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-only-html-001.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-only-html-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates: template with contentmethod does not work in XHTML</title> +<link rel=help href="https://github.com/WICG/declarative-partial-updates"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<script> +promise_test(async () => { + const iframe = document.createElement("iframe"); + iframe.src = "resources/contentmethod.xhtml"; + document.body.append(iframe); + await new Promise(resolve => iframe.addEventListener("load", resolve)); + const {contentDocument} = iframe; + assert_not_equals(contentDocument.querySelector("#patch"), null); + assert_equals(contentDocument.querySelector("#placeholder").textContent, "Unchanged"); +}); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-only-html-002.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-only-html-002.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates: template with contentmethod does not work in XHTML</title> +<link rel=help href="https://github.com/WICG/declarative-partial-updates"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<script> +promise_test(async () => { + const iframe = document.createElement("iframe"); + iframe.src = "resources/contentmethod-root.xhtml"; + document.body.append(iframe); + await new Promise(resolve => iframe.addEventListener("load", resolve)); + const {contentDocument} = iframe; + assert_not_equals(contentDocument.querySelector("#patch"), null); +}); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-prepend-element.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-prepend-element.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates - declarative prepend element</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 id="placeholder" contentname="placeholder"><span>content</span></div> +<template contentmethod="prepend"><div contentname="placeholder"><span>Some </span></div></template> +<script> +test(() => { + assert_equals(document.getElementById("placeholder").textContent, "Some content"); +}, "<template contentmethod=prepend> with element"); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-prepend-invalid-ref.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-prepend-invalid-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates - declarative prepend element</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 id="placeholder" contentname="placeholder"><span id="ref">old</span>content</div> +<template contentmethod="prepend"> + <div contentname="placeholder"><span>New </span><script id="removal-script"> + document.querySelector("#ref").remove(); + </script><span>Junk </span></div> +</template> +<script> +test(() => { + document.querySelector("#removal-script").remove(); + assert_equals(document.getElementById("placeholder").textContent, "New content"); +}, "If the first node is no longer a child of the parent during prepend, next insertions abort"); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-prepend-text.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-prepend-text.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates - declarative prepend text</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 id="placeholder" contentname="placeholder"> content</div> +<template contentmethod="prepend"><div contentname="placeholder">Some</div></template> +<script> +test(() => { + assert_equals(document.getElementById("placeholder").textContent, "Some content"); +}, "<template contentmethod=prepend> with text"); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-replace-children-with-element.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-replace-children-with-element.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates - declarative replace-children</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 id="placeholder" contentname="placeholder">Old content</div> +<template contentmethod="replace-children"><div id="placeholder" contentname="placeholder"><p id="stuff">New content</p></div></template> +<script> +test(() => { + const {firstChild} = document.getElementById("placeholder"); + assert_equals(firstChild.id, "stuff") + assert_equals(firstChild.textContent, "New content"); +}, "<template contentmethod=replace-children> with element"); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-replace-children-with-text.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-replace-children-with-text.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates - declarative replace-children</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 id="placeholder" contentname="placeholder">Old content</div> +<template contentmethod="replace-children"><div contentname="placeholder">New content</div></template> +<script> +test(() => { + assert_equals(document.getElementById("placeholder").textContent, "New content"); +}, "<template contentmethod=replace-children> with text"); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-replace-invalid-ref.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-replace-invalid-ref.html @@ -0,0 +1,40 @@ +<!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 id="placeholder-old" contentname="placeholder">Old content</div> +<template contentmethod="replace"><div id="placeholder" contentname="placeholder">New content</div></template> +<script> +test(() => { + assert_equals(document.getElementById("placeholder").textContent, "New content"); +}, "<template contentmethod=replace>"); + +/* +test(() => { + const doc = document.implementation.createHTMLDocument(); + doc.write('<div id="placeholder">Old content</div>'); + assert_equals(doc.querySelector("#placeholder").innerText, "Old content"); + doc.write('<template patchfor="placeholder">'); + 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 patchfor> should work when chunked"); + +test(() => { + const doc = document.implementation.createHTMLDocument(); + doc.write('<div id="placeholder">Old content</div>'); + assert_equals(doc.querySelector("#placeholder").textContent, "Old content"); + doc.write('<template patchfor="placeholder">'); + doc.write('<div id=main>Hello '); + doc.write('main</div></template>'); + assert_equals(doc.querySelector("#placeholder #main").textContent, "Hello main"); +}, "<template patchfor> should work when elements are sliced in the middle"); +*/ +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-replace.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-replace.html @@ -0,0 +1,40 @@ +<!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 id="placeholder-old" contentname="placeholder">Old content</div> +<template contentmethod="replace"><div id="placeholder" contentname="placeholder">New content</div></template> +<script> +test(() => { + assert_equals(document.getElementById("placeholder").textContent, "New content"); +}, "<template contentmethod=replace>"); + +/* +test(() => { + const doc = document.implementation.createHTMLDocument(); + doc.write('<div id="placeholder">Old content</div>'); + assert_equals(doc.querySelector("#placeholder").innerText, "Old content"); + doc.write('<template patchfor="placeholder">'); + 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 patchfor> should work when chunked"); + +test(() => { + const doc = document.implementation.createHTMLDocument(); + doc.write('<div id="placeholder">Old content</div>'); + assert_equals(doc.querySelector("#placeholder").textContent, "Old content"); + doc.write('<template patchfor="placeholder">'); + doc.write('<div id=main>Hello '); + doc.write('main</div></template>'); + assert_equals(doc.querySelector("#placeholder #main").textContent, "Hello main"); +}, "<template patchfor> should work when elements are sliced in the middle"); +*/ +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-reverse.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-reverse.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates: patch should appear after its target</title> +<link rel=help href="https://github.com/WICG/declarative-partial-updates"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<template contentmethod="replace">New content</template> +<div id="placeholder">Old content</div> +<script> +test(() => { + assert_equals(document.querySelector("#placeholder").innerText, "Old content"); + assert_equals(document.querySelector("template[contentmethod=replace]"), null, "Template should not attach"); +}); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-script-children.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-script-children.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates - a script inside a patch should execute</title> +<link rel=help href="https://github.com/WICG/declarative-partial-updates"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<section id="placeholder" contentname="p"> + <script> + window.state = "init"; + </script> +</section> +<template contentmethod="replace-children"><section contentname=p><script>window.state = 'patched';</script></section></template> +<script> +test(() => { + assert_not_equals(document.querySelector("#placeholder").firstElementChild, null); + assert_equals(document.querySelector("#placeholder").firstElementChild.textContent, "window.state = 'patched';"); + assert_equals(window.state, "patched"); +}); + +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-script-eval.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-script-eval.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates - content template updates script with plain text but doesn't execute</title> +<link rel=help href="https://github.com/WICG/declarative-partial-updates"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<script id="placeholder" contentname="s"> + window.state = "init"; +</script> +<script> + window.placeholder = document.querySelector("#placeholder"); +</script> +<template contentmethod="replace-children"><script contentname="s">window.state = 'patched';</script></template> +<script> +test(() => { + assert_equals(placeholder.firstElementChild, null); + assert_equals(placeholder.textContent, "window.state = 'patched';"); + // The script has already started, so patching it would have no effect. + assert_equals(window.state, "init"); +}); + +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-script-replace.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-script-replace.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates - a script replaced with a patch should execute</title> +<link rel=help href="https://github.com/WICG/declarative-partial-updates"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<section id="placeholder"> + <script contentname="s"> + window.state = "init"; + </script> +</section> +<template contentmethod="replace"><script contentname="s">window.state = 'patched';</script></section></template> +<script> +test(() => { + assert_not_equals(document.querySelector("#placeholder").firstElementChild, null); + assert_equals(document.querySelector("#placeholder").firstElementChild.textContent, "window.state = 'patched';"); + assert_equals(window.state, "patched"); +}); + +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-scripting-nested.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-scripting-nested.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates - a script inside a template inside a patch should not execute</title> +<link rel=help href="https://github.com/WICG/declarative-partial-updates"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<section id="placeholder" contentname="c"> + <script> + window.state = "init"; + </script> +</section> +<template contentmethod="replace-children"><section contentname="c"><template><script>window.state = 'patched';</script></section></template></template> +<script> +test(() => { + assert_not_equals(document.querySelector("#placeholder").firstElementChild, null); + assert_equals(window.state, "init"); +}); + +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-shadow-nested.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-shadow-nested.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates: patching inside a declarative shadow tree</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 id="placeholder">Old content in light DOM</div> +<div id="container"> + <template shadowrootmode="open"> + <div> + <div id="placeholder" contentname="d">Old content in shadow DOM</div> + <template contentmethod="replace-children"><div contentname=d>New content</div></template> + </div> + </template> +</div> +<script> +test(() => { + assert_equals(document.querySelector("#placeholder").innerText, "Old content in light DOM"); + const {shadowRoot} = document.querySelector("#container"); + assert_equals(shadowRoot.querySelector("#placeholder").innerText, "New content"); + assert_equals(shadowRoot.querySelector("template[patchfor=placeholder]"), null); +}, "<template contentmethod> inside a <template shadowrootmode><div> should apply directly to its target"); + +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-shadow.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-shadow.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates: patching inside a declarative shadow tree</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 id="placeholder">Old content in light DOM</div> +<div id="container"> + <template shadowrootmode="open"> + <section id="placeholder" contentname="p">Old content in shadow DOM</section> + <template contentmethod="replace-children"><section contentname="p">New content</template> + </template> +</div> +<script> +test(() => { + assert_equals(document.querySelector("#placeholder").innerText, "Old content in light DOM"); + const {shadowRoot} = document.querySelector("#container"); + assert_equals(shadowRoot.querySelector("#placeholder").innerText, "New content"); + assert_equals(shadowRoot.querySelector("template[patchfor=placeholder]"), null); +}, "<template contentmethod> inside a <template shadowrootmode> should apply directly to its target"); + +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-style-in-head.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-style-in-head.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates - patch updates style with plain text</title> +<link rel=help href="https://github.com/WICG/declarative-partial-updates"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style id="placeholder" contentname="cn"></style> +<body> +<div id="target"></div> +<template contentmethod="replace"> + <style contentname="cn" id="placeholder"> + #target { color: rgba(100, 0, 100); } + #something:after { content: "<div id=dontparseme></div>" }; + </style> +</template> +<script> +test(() => { + assert_equals(document.querySelector("#placeholder").firstElementChild, null); + assert_equals(getComputedStyle(document.getElementById("target")).color, "rgb(100, 0, 100)"); +}); + +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-style.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-style.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates - patch updates style with plain text</title> +<link rel=help href="https://github.com/WICG/declarative-partial-updates"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<style id="placeholder" contentname="cn"></style> +<div id="target"></div> +<template contentmethod="replace"> + <style contentname="cn" id="placeholder"> + #target { color: rgba(100, 0, 100); } + #something:after { content: "<div id=dontparseme></div>" }; + </style> +</template> +<script> +test(() => { + assert_equals(document.querySelector("#placeholder").firstElementChild, null); + assert_equals(getComputedStyle(document.getElementById("target")).color, "rgb(100, 0, 100)"); +}); + +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-superseded-by-shadowrootmode.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-superseded-by-shadowrootmode.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates: shadowrootmode supercede contentmethod</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 id="container"> + <section id=outer contentname="d">Unchanged</section> + <template shadowrootmode="invalid" contentmethod="replace-children"> + <section id=inner contentname="d">Inside</section> + </template> +</div> + +<script> +test(() => { + const outer = document.querySelector("#outer"); + assert_equals(outer.textContent, "Inside"); + assert_equals(document.querySelector("#container").shadowRoot, null); +}); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-supersedes-invalid-shadowrootmode.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-supersedes-invalid-shadowrootmode.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>HTML partial updates: shadowrootmode supercede contentmethod</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 id="container"> + <section id=outer contentname="d">Unchanged</section> + <template shadowrootmode="open" contentmethod="append"> + <section id=inner contentname="d">Inside</section> + </template> +</div> + +<script> +test(() => { + const outer = document.querySelector("#outer"); + assert_equals(outer.textContent, "Unchanged"); + const inner = document.querySelector("#container").shadowRoot.querySelector("#inner"); + assert_not_equals(inner, null); + assert_equals(inner.textContent, "Inside"); +}); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-title.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-contentmethod-title.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title contentname="title">HTML partial updates - update title</title> +<link rel=help href="https://github.com/WICG/declarative-partial-updates"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<div id="target"></div> +<template contentmethod="replace"> + <title contentname="title">New title</title> +</template> +<script> +test(() => { + assert_equals(document.title, "New title"); +}); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patch-range.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patch-range.html @@ -1,53 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates: patchstartafter and patchendbefore</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 id="placeholder"> - <span id="first"></span> - <span id="last"></span> -</div> -<script> - const placeholder = document.querySelector("#placeholder"); - const original_placeholder_text = placeholder.innerHTML; - function reset_state() { - placeholder.innerHTML = original_placeholder_text; - } -</script> -<template patchfor="placeholder" patchstartafter="first" patchendbefore="last"> - <span id="inserted_element">content</span> -</template> -<script> -test(t => { - const inserted_element = document.querySelector("#inserted_element"); - assert_equals(inserted_element.parentElement.id, "placeholder"); - assert_equals(inserted_element.nextElementSibling.id, "last"); - assert_equals(inserted_element.previousElementSibling.id, "first"); -}, "<template patchstartafter=first patchendbefore=last> should insert the patch between two existing nodes"); - -promise_test(async t => { - reset_state(); - const writer = document.patchAll().getWriter(); - await writer.write("<span>garbage</span><template patchfor=placeholder patchendbefore=last><span id=content>abc</span></template>"); - await writer.close(); - const inserted_element = document.querySelector("#content"); - assert_true(!!inserted_element); - assert_equals(inserted_element.parentElement.id, "placeholder"); - assert_equals(inserted_element.nextElementSibling.id, "last"); - assert_equals(inserted_element.previousElementSibling, null); -}, "<template patchendbefore=last> should insert the patch before an existing node"); - -promise_test(async t => { - reset_state(); - const writer = document.patchAll().getWriter(); - await writer.write("<span>garbage</span><template patchfor=placeholder patchstartafter=first><span id=content>abc</span></template>"); - await writer.close(); - const inserted_element = document.querySelector("#content"); - assert_equals(inserted_element.parentElement.id, "placeholder"); - assert_equals(inserted_element.nextElementSibling, null); - assert_equals(inserted_element.previousElementSibling.id, "first"); -}, "<template patchstartafter=first> should insert the patch after an existing node"); - -</script> -\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-innerHTML-ambiguous.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-innerHTML-ambiguous.html @@ -1,24 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates: patching via innerHTML with ambiguous target</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 id="container"></div> -<div id="placeholder">Old content in light DOM</div> -<script> -// The ID "container" appears both after the container on which innerHTML is -// set, and in created fragment. Which element should be updated depends on the -// details of how this is spec'd. -test(() => { - const container = document.getElementById("container"); - const outerPlaceholder = document.getElementById("placeholder"); - container.innerHTML = `<div id="placeholder">Old content in innerHTML</div><template patchfor="placeholder">New content</template>`; - const innerPlaceholder = container.firstChild; - assert_equals(innerPlaceholder.id, "placeholder"); - // This is the surprising part, that the outer placeholder is updated even - // though it appears after the updated placeholder in the final tree order. - assert_equals(outerPlaceholder.textContent, "New content"); - assert_equals(innerPlaceholder.textContent, "Old content in innerHTML"); -}, "<template patchfor> in innerHTML patching inner element"); -</script> diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-innerHTML-outside.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-innerHTML-outside.html @@ -1,19 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates: patching via innerHTML</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 id="placeholder">Old content in light DOM</div> -<div id="container"></div> -<script> -test(() => { - const placeholder = document.getElementById("placeholder"); - const container = document.getElementById("container"); - assert_equals(placeholder.textContent, "Old content in light DOM"); - container.innerHTML = "<template patchfor=placeholder>New content</template>"; - assert_equals(placeholder.textContent, "New content"); - // The <template> element should not be inserted, so no child nodes. - assert_false(container.hasChildNodes(), "container has child nodes"); -}, "<template patchfor> in innerHTML patching outer element"); -</script> diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-innerHTML-within.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-innerHTML-within.html @@ -1,19 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates: patching via innerHTML</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 id="container"></div> -<script> -test(() => { - const container = document.getElementById("container"); - container.innerHTML = `<div id="placeholder">Old content in innerHTML</div><template patchfor="placeholder">New content</template>`; - // <template patchfor> doesn't work within an innerHTML fragment, so the - // placeholder should be intact and the <template> element remain in tree. - const placeholder = container.querySelector("div"); - assert_equals(placeholder.id, "placeholder"); - assert_equals(placeholder.textContent, "Old content in innerHTML"); - assert_not_equals(container.querySelector("template"), null); -}, "<template patchfor> in innerHTML patching inner element"); -</script> diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-reverse.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-reverse.html @@ -1,16 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates: patch should appear after its target</title> -<link rel=help href="https://github.com/WICG/declarative-partial-updates"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> - -<template patchfor="placeholder">New content</template> -<div id="placeholder">Old content</div> -<script> -test(() => { - assert_equals(document.querySelector("#placeholder").innerText, "Old content"); - assert_equals(document.querySelector("template[patchfor=placeholder]").content.textContent, "New content", - "<template patchfor> without a match should parse normally"); -}, "<template patchfor> should apply directly to its target"); -</script> -\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-script-eval.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-script-eval.html @@ -1,19 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates - patch updates script with plain text</title> -<link rel=help href="https://github.com/WICG/declarative-partial-updates"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> - -<script id="placeholder"> - window.state = "init"; -</script> -<template patchfor="placeholder">window.state = 'patched';</template> -<script> -test(() => { - assert_equals(document.querySelector("#placeholder").firstElementChild, null); - assert_equals(document.querySelector("#placeholder").textContent, "window.state = 'patched';"); - assert_equals(window.state, "init"); -}); - -</script> -\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-script-plaintext.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-script-plaintext.html @@ -1,16 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates - patch updates script with plain text</title> -<link rel=help href="https://github.com/WICG/declarative-partial-updates"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> - -<script id="placeholder"></script> -<template patchfor="placeholder">'<div id=dontparseme></div>'</template> -<script> -test(() => { - assert_equals(document.querySelector("#placeholder").firstElementChild, null); - assert_equals(document.querySelector("#placeholder").textContent, "'<div id=dontparseme></div>'"); -}, "<template patchfor> should apply directly to its target"); - -</script> -\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-scripting-nested.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-scripting-nested.html @@ -1,20 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates - a script inside a template inside a patch should not execute</title> -<link rel=help href="https://github.com/WICG/declarative-partial-updates"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> - -<section id="placeholder"> - <script> - window.state = "init"; - </script> -</section> -<template patchfor="placeholder"><template><script>window.state = 'patched';</script></template></template> -<script> -test(() => { - assert_not_equals(document.querySelector("#placeholder").firstElementChild, null); - assert_equals(window.state, "init"); -}); - -</script> -\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-scripting.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-scripting.html @@ -1,21 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates - a script inside a patch should execute</title> -<link rel=help href="https://github.com/WICG/declarative-partial-updates"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> - -<section id="placeholder"> - <script> - window.state = "init"; - </script> -</section> -<template patchfor="placeholder"><script>window.state = 'patched';</script></template> -<script> -test(() => { - assert_not_equals(document.querySelector("#placeholder").firstElementChild, null); - assert_equals(document.querySelector("#placeholder").firstElementChild.textContent, "window.state = 'patched';"); - assert_equals(window.state, "patched"); -}); - -</script> -\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-shadow-nested.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-shadow-nested.html @@ -1,25 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates: patching inside a declarative shadow tree</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 id="placeholder">Old content in light DOM</div> -<div id="container"> - <template shadowrootmode="open"> - <div id="placeholder">Old content in shadow DOM</div> - <div> - <template patchfor="placeholder">New content</template> - </div> - </template> -</div> -<script> -test(() => { - assert_equals(document.querySelector("#placeholder").innerText, "Old content in light DOM"); - const {shadowRoot} = document.querySelector("#container"); - assert_equals(shadowRoot.querySelector("#placeholder").innerText, "New content"); - assert_equals(shadowRoot.querySelector("template[patchfor=placeholder]"), null); -}, "<template patchfor> inside a <template shadowrootmode><div> should apply directly to its target"); - -</script> -\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-shadow.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-shadow.html @@ -1,23 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates: patching inside a declarative shadow tree</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 id="placeholder">Old content in light DOM</div> -<div id="container"> - <template shadowrootmode="open"> - <section id="placeholder">Old content in shadow DOM</section> - <template patchfor="placeholder">New content</template> - </template> -</div> -<script> -test(() => { - assert_equals(document.querySelector("#placeholder").innerText, "Old content in light DOM"); - const {shadowRoot} = document.querySelector("#container"); - assert_equals(shadowRoot.querySelector("#placeholder").innerText, "New content"); - assert_equals(shadowRoot.querySelector("template[patchfor=placeholder]"), null); -}, "<template patchfor> inside a <template shadowrootmode> should apply directly to its target"); - -</script> -\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-style-plaintext.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor-style-plaintext.html @@ -1,20 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates - patch updates style with plain text</title> -<link rel=help href="https://github.com/WICG/declarative-partial-updates"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> - -<style id="placeholder"></style> -<div id="dummy"></div> -<template patchfor="placeholder"> - #dummy { color: rgba(100, 0, 100); } - #something:after { content: "<div id=dontparseme></div>" }; -</template> -<script> -test(() => { - assert_equals(document.querySelector("#placeholder").firstElementChild, null); - assert_equals(getComputedStyle(document.getElementById("dummy")).color, "rgb(100, 0, 100)"); -}); - -</script> -\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/template-patchfor.html @@ -1,40 +0,0 @@ -<!DOCTYPE HTML> -<meta charset="utf-8" /> -<title>HTML partial updates</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 id="placeholder">Old content</div> -<template patchfor="placeholder">New content</template> -<script> -test(() => { - assert_equals(document.querySelector("#placeholder").innerText, "New content"); - assert_equals(document.querySelector("template[patchfor]"), null, "<template patchfor> with a match should not attach"); -}, "<template patchfor> should apply directly to its target"); - -test(() => { - const doc = document.implementation.createHTMLDocument(); - doc.write('<div id="placeholder">Old content</div>'); - assert_equals(doc.querySelector("#placeholder").innerText, "Old content"); - doc.write('<template patchfor="placeholder">'); - 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 patchfor> should work when chunked"); - -test(() => { - const doc = document.implementation.createHTMLDocument(); - doc.write('<div id="placeholder">Old content</div>'); - assert_equals(doc.querySelector("#placeholder").textContent, "Old content"); - doc.write('<template patchfor="placeholder">'); - doc.write('<div id=main>Hello '); - doc.write('main</div></template>'); - assert_equals(doc.querySelector("#placeholder #main").textContent, "Hello main"); -}, "<template patchfor> should work when elements are sliced in the middle"); - -</script> -\ No newline at end of file