Deal with invalid `StaticRange`s 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
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
new file mode 100644
index 0000000..9ffe2cf
--- /dev/null
+++ 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>
