Deal with invalid StaticRanges and DOM mutations in Selection.

Ranges inside of a `Selection` are expected to be sorted by their start point by the painting algorithms. Also, `StaticRange`s, which previously were not part of `Selection`, need to be considered for painting based on their `IsValid()` status. This is now added by introducing a second array for invalid static ranges and an additional re-ordering method which needs to be called before paint that moves ranges in between. A potential change in range endpoints can be determined by observing the `Document`s generation and by adding a flag that's set to true in `Selection::NotifySelectionObservers()`. Differential Revision: https://phabricator.services.mozilla.com/D198943 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1872535 gecko-commit: 20e975d790c813957b823a4418e599107ec2a097 gecko-reviewers: smaug
web-platform-tests · Jan 23, 2024 · 0e09069 · 0e09069
1 parent 6e082fb
commit 0e09069
Showing 1 changed file with 28 additions and 0 deletions.
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-staticrange-005.html b/css/css-highlight-api/painting/custom-highlight-painting-staticrange-005.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: StaticRange is repainted correctly after deleting and re-adding it.</title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="match" href="custom-highlight-painting-001-ref.html">
+<meta name="assert" value="A StaticRange is repainted correctly after deleting and re-adding it.">
+<style>
+  ::highlight(example-highlight) {
+    background-color: yellow;
+    color: blue;
+  }
+</style>
+<body><span>One two three…</span>
+<script>
+  let h = new Highlight();
+  const range = new StaticRange({
+    startContainer: document.body.firstChild.childNodes[0],
+    startOffset: 0,
+    endContainer: document.body.firstChild.childNodes[0],
+    endOffset: 8
+  })
+  h.add(range);
+  CSS.highlights.set("example-highlight", h);
+  document.body.onload = () => {
+    h.delete(range);
+    h.add(range);
+  };
+</script>