commit 740725b3a9b7aaa18baf9fc3cd17091bac8e89ac
parent 6098a15d791e38047d87dbd0d3cde9fddc30e2a1
Author: Noam Rosenthal <nrosenthal@chromium.org>
Date: Fri, 19 Dec 2025 09:17:50 +0000
Bug 2006620 [wpt PR 56809] - Make sure the new streaming parser invalidates CSS correctly, a=testonly
Automatic update from web-platform-tests
Make sure the new streaming parser invalidates CSS correctly
Some side effects of removing elements, such as the :has selectors, are
handled differently with regards to cache invalidation based on whether
the elements were inserted by the parser or by API.
Some of the assumptions around the "parser" mode here are that the
parser only works once on each element.
With streamHTML* and <template contentmethod>, this might no longer be
the case, as a new parser can be created for an already parsed element.
This has result in racy scenarios of invalidation around CSS :has
(potentially around other invalidations as well, but they are difficult
to spot).
The fix is to treat the "remove all children" invoked by patch templates
as a regular RemoveChildren. Note that in all cases but scripts, this
distinction is not web observable, and ParserRemoveChildren had no other
callers.
Bug: 431374376
Change-Id: I45704d6a014b7c5c6103043cc9e6719c89527f0b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7246719
Commit-Queue: Noam Rosenthal <nrosenthal@google.com>
Reviewed-by: Philip Jägenstedt <foolip@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1559886}
--
wpt-commits: f8b889b0ed910cdfe268c48940b4ae0b57e1ea79
wpt-pr: 56809
Diffstat:
1 file changed, 49 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/html/dom/partial-updates/tentative/stream-append-has-invalidation.html b/testing/web-platform/tests/html/dom/partial-updates/tentative/stream-append-has-invalidation.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>HTML partial updates - :has invalidation with streaming</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>
+ .container {
+ width: 200px;
+ height: 100px;
+ background: green;
+ }
+
+ .container:has(.red) {
+ background: red;
+ }
+
+ .container:has(.blue) {
+ background: blue;
+ }
+</style>
+<div class="container">
+ <div contentname="content"><span class="red">Has red</span></div>
+</div>
+
+<script>
+ const container = document.querySelector(".container");
+ async function update(html) {
+ const writer = container.streamAppendHTMLUnsafe().getWriter();
+ await writer.write(`
+ <template contentmethod="replace-children">
+ <div contentname="content">${html}</div>
+ </template>`);
+ await writer.close();
+ }
+ promise_test(async () => {
+ for (let i = 0; i < 20; ++i) {
+ await update('<span class="blue">Has blue</span>');
+ await new Promise((resolve) => requestAnimationFrame(resolve));
+ await update("Green (no span)");
+ await new Promise((resolve) => requestAnimationFrame(resolve));
+ assert_equals(container.textContent.trim(), "Green (no span)");
+ assert_equals(
+ getComputedStyle(container).backgroundColor,
+ "rgb(0, 128, 0)"
+ );
+ }
+ }, "");
+</script>
