Fix CSS highlights not rendering on inserted text nodes.

jnjaeschke · moz-wptsync-bot · commit 27267cdfa2cb · 2026-05-06T00:35:09.000+01:00
Allow detached ranges through the document check in highlight selection population. Added two WPT reftests verifying highlights paint after inserting a text node and after inserting a subtree containing a highlighted range. Differential Revision: https://phabricator.services.mozilla.com/D297898 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=2035083 gecko-commit: 597b1c2d66fd9b47739d163a89bdcd0043104ff5 gecko-commit-git: 2ab73e6e95890d16b5e4d7d457faf5809873924c gecko-reviewers: layout-reviewers, emilio
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-insert-node-001-ref.html b/css/css-highlight-api/painting/custom-highlight-painting-insert-node-001-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<pre>Hello <span style="color: red;">world</span></pre>
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-insert-node-001.html b/css/css-highlight-api/painting/custom-highlight-painting-insert-node-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Highlight API Test: highlight renders on text node inserted after highlight registration</title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="match" href="custom-highlight-painting-insert-node-001-ref.html">
+<meta name="assert" content="Highlights on ranges of detached text nodes are painted after the text node is inserted into the document.">
+<script src="/common/reftest-wait.js"></script>
+<style>
+  ::highlight(example) {
+    color: red;
+  }
+</style>
+<body>
+<pre></pre>
+<script>
+  const pre = document.querySelector('pre');
+  const text = document.createTextNode('Hello world');
+  const range = new Range();
+  range.setStart(text, 6);
+  range.setEnd(text, 11);
+  CSS.highlights.set('example', new Highlight(range));
+  pre.append(text);
+  requestAnimationFrame(() => requestAnimationFrame(() => takeScreenshot()));
+</script>
+</html>
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-insert-node-002.html b/css/css-highlight-api/painting/custom-highlight-painting-insert-node-002.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Highlight API Test: highlight renders when subtree containing highlighted range is inserted</title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="match" href="custom-highlight-painting-insert-node-001-ref.html">
+<meta name="assert" content="Highlights on ranges inside a detached subtree are painted after the subtree root is inserted into the document.">
+<script src="/common/reftest-wait.js"></script>
+<style>
+  ::highlight(example) {
+    color: red;
+  }
+</style>
+<body>
+<script>
+  const pre = document.createElement('pre');
+  const text = document.createTextNode('Hello world');
+  pre.append(text);
+  const range = new Range();
+  range.setStart(text, 6);
+  range.setEnd(text, 11);
+  CSS.highlights.set('example', new Highlight(range));
+  document.body.append(pre);
+  requestAnimationFrame(() => requestAnimationFrame(() => takeScreenshot()));
+</script>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<meta charset="utf-8">`
	`3`	`+<pre>Hello <span style="color: red;">world</span></pre>`