[css-highlight-api] Make highlightsFromPoint return HighlightHitResults

ffiori · chromium-wpt-export-bot · commit 3429f53b3c6d · 2025-05-30T15:13:59.000-07:00
This CL changes the return type for CSS.highlights.highlightsFromPoint() to return a sequence<HighlightHitResult>. Internally this corresponds to returning a HeapVector<Member<HighlightHitResult>>. This implements what was resolved in a CSSWG meeting, see more details in this issue: w3c/csswg-drafts#12031 Other changes: - Introduce the HighlightHitResult type. - Fix unit tests and WPTs. - Add some new unit tests and WPTs to address the ranges being returned now as well. Bug: 365046212, 416254971 Change-Id: Ic2cf061ff921e4a1d7ad7f47609fb6f644374724 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6598200 Commit-Queue: Fernando Fiori <ffiori@microsoft.com> Reviewed-by: Dan Clark <daniec@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1467678}
diff --git a/css/css-highlight-api/HighlightRegistry-highlightsFromPoint-ranges.html b/css/css-highlight-api/HighlightRegistry-highlightsFromPoint-ranges.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<meta name="author" title="Fernando Fiori" href="mailto:ffiori@microsoft.com">
+<meta name="assert" content="HighlightRegistry.highlightsFromPoint returns the Highlights and their corresponding Ranges and StaticRanges present at the coordinates provided as argument in the right order in multi-line text.">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/highlight/HighlightsFromPointsExplainer.md">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+::highlight(example-highlight) {
+    background-color: rgba(0, 255, 255, 0.5);
+}
+body {
+    font-family: monospace;
+}
+</style>
+<span id="example-span-1">0123456789</span><br>
+<span id="example-span-2">0123456789</span>
+<script>
+    const textNode1 = document.querySelector("#example-span-1");
+    const textNode2 = document.querySelector("#example-span-2");
+
+    function test_ranges(ranges) {
+        assert_equals(ranges.length, 2, 'test_ranges() should be called with exactly two ranges.');
+        let big_range = ranges[0].startOffset < ranges[1].startOffset ? ranges[0] : ranges[1];
+
+        let highlight = new Highlight(...ranges);
+        CSS.highlights.set("example-highlight", highlight);
+
+        const rect = textNode1.getBoundingClientRect();
+        const characterWidth = rect.width / textNode1.textContent.length;
+        const characterHeight = rect.height;
+
+        // No Highlights outside of text contents.
+        let x = rect.left - 1;
+        let y = rect.top - 1;
+        let highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlight_hit_results.length, 0, 'CSS.highlights.highlightsFromPoint() returns an empty array when the coordinates provided are outside of the text contents');
+
+        // Get x and y coordinates between characters '0' and '1' on the first line (not highlighted).
+        x = rect.left + characterWidth;
+        y = rect.top + characterHeight / 2;
+        highlights = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlight_hit_results.length, 0, 'CSS.highlights.highlightsFromPoint() returns an empty array when the coordinates provided are outside of the highlighted ranges');
+
+        // Get x and y coordinates between characters '2' and '3' on the first line.
+        x = rect.left + 3 * characterWidth;
+        highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlight_hit_results.length, 1, 'CSS.highlights.highlightsFromPoint() returns exactly one HighlightHitResult when the coordinates provided point at one Highlight');
+        assert_equals(highlight_hit_results[0].highlight, highlight, 'CSS.highlights.highlightsFromPoint() returns a HighlightHitResult with the Highlight present at the coordinates provided');
+        assert_array_equals(highlight_hit_results[0].ranges, [big_range], 'CSS.highlights.highlightsFromPoint() returns a HighlightHitResult with the ranges of the Highlight present at the coordinates provided');
+
+        // Get x and y coordinates between characters '6' and '7' on the first line.
+        x = rect.left + 7 * characterWidth;
+        highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlight_hit_results.length, 1, 'CSS.highlights.highlightsFromPoint() returns exactly one HighlightHitResult when the coordinates provided point at one Highlight');
+        assert_equals(highlight_hit_results[0].highlight, highlight, 'CSS.highlights.highlightsFromPoint() returns a HighlightHitResult with the Highlight present at the coordinates provided');
+        assert_array_equals(highlight_hit_results[0].ranges, ranges, 'CSS.highlights.highlightsFromPoint() returns a HighlightHitResult with the ranges of the Highlight present at the coordinates provided in the right order');
+
+        // Get x and y coordinates to the right of the last character of the first line.
+        x = rect.left + 12 * characterWidth;
+        highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlight_hit_results.length, 0, 'CSS.highlights.highlightsFromPoint() returns an empty array when the coordinates provided are to the right of the text contents');
+
+        // Get x and y coordinates between characters '0' and '1' on the second line.
+        x = rect.left + characterWidth;
+        y = rect.top + 1.5 * characterHeight;
+        highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlight_hit_results.length, 1, 'CSS.highlights.highlightsFromPoint() returns exactly one HighlightHitResult when the coordinates provided point at one Highlight');
+        assert_equals(highlight_hit_results[0].highlight, highlight, 'CSS.highlights.highlightsFromPoint() returns a HighlightHitResult with the Highlight present at the coordinates provided');
+        assert_array_equals(highlight_hit_results[0].ranges, [big_range], 'CSS.highlights.highlightsFromPoint() returns a HighlightHitResult with the ranges of the Highlight present at the coordinates provided');
+
+        // Get x and y coordinates between characters '8' and '9' on the second line (not highlighted).
+        x = rect.left + 9 * characterWidth;
+        highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlight_hit_results.length, 0, 'CSS.highlights.highlightsFromPoint() returns an empty array when the coordinates provided are outside of the highlighted ranges');
+
+        // Get x and y coordinates to the right of the last character of the second line.
+        x = rect.left + 12 * characterWidth;
+        highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlight_hit_results.length, 0, 'CSS.highlights.highlightsFromPoint() returns an empty array when the coordinates provided are to the right of the text contents');
+
+        // Get x and y coordinates below the second line.
+        x = rect.left + 5 * characterWidth;
+        y = rect.top + 3 * characterHeight;
+        highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlight_hit_results.length, 0, 'CSS.highlights.highlightsFromPoint() returns an empty array when the coordinates provided are below the text contents');
+    }
+
+    test(() => {
+        // Set a Highlight with two nested ranges in this way:
+        // 01[234(56789)
+        // 01234567]89
+        let range1 = new Range();
+        range1.setStart(textNode1.childNodes[0], 5);
+        range1.setEnd(textNode1.childNodes[0], 10);
+        let range2 = new Range();
+        range2.setStart(textNode1.childNodes[0], 2);
+        range2.setEnd(textNode2.childNodes[0], 8);
+
+        let static_range1 = new StaticRange({startContainer: textNode1.childNodes[0], startOffset: 5, endContainer: textNode1.childNodes[0], endOffset: 10})
+        let static_range2 = new StaticRange({startContainer: textNode1.childNodes[0], startOffset: 2, endContainer: textNode2.childNodes[0], endOffset: 8})
+
+        test_ranges([range1, range2]);
+        test_ranges([range2, range1]);
+        test_ranges([static_range1, static_range2]);
+        test_ranges([static_range2, static_range1]);
+        test_ranges([static_range1, range2]);
+        test_ranges([range1, static_range2]);
+    }, 'CSS.highlights.highlightsFromPoint() returns HighlightHitResults with the Highlights and their corresponding Ranges and StaticRanges present at the given point in the right order on multi-line text.');
+</script>
diff --git a/css/css-highlight-api/HighlightRegistry-highlightsFromPoint.html b/css/css-highlight-api/HighlightRegistry-highlightsFromPoint.html
@@ -26,7 +26,7 @@
 
     test(() => {
         assert_equals(CSS.highlights.highlightsFromPoint(-1,-1).length, 0);
-    }, 'CSS.highlights.highlightsFromPoint() should return an empty vector when called with a point outside the document.');
+    }, 'CSS.highlights.highlightsFromPoint() should return an empty array when called with a point outside the document.');
 
     test(() => {
         // Set two Highlights in this way: 01[234[56789]]
@@ -49,35 +49,38 @@
         // No Highlights outside of text contents.
         let x = rect.left - 1;
         let y = rect.top - 1;
-        let highlights = CSS.highlights.highlightsFromPoint(x, y);
-        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the coordinates provided are outside of the text contents');
+        let highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlight_hit_results.length, 0, 'CSS.highlights.highlightsFromPoint() returns an empty array when the coordinates provided are outside of the text contents');
 
         // Get x and y coordinates between '0' and '1'.
         x = rect.left + characterWidth;
         y = rect.top + rect.height / 2;
         highlights = CSS.highlights.highlightsFromPoint(x, y);
-        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the coordinates provided point at no Highlights');
+        assert_equals(highlight_hit_results.length, 0, 'CSS.highlights.highlightsFromPoint() returns an empty array when the coordinates provided point at no Highlights');
 
         // Get x and y coordinates between '2' and '3'.
         x = rect.left + 3 * characterWidth;
-        highlights = CSS.highlights.highlightsFromPoint(x, y);
-        assert_equals(highlights.length, 1, 'CSS.highlights.highlightsFromPoint() returns exactly one Highlight when the coordinates provided point at one Highlight');
-        assert_equals(highlights[0], highlight1, 'CSS.highlights.highlightsFromPoint() returns the Highlight present at the coordinates provided');
+        highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlight_hit_results.length, 1, 'CSS.highlights.highlightsFromPoint() returns exactly one HighlightHitResult when the coordinates provided point at one Highlight');
+        assert_equals(highlight_hit_results[0].highlight, highlight1, 'CSS.highlights.highlightsFromPoint() returns a HighlightHitResult with the Highlight present at the coordinates provided');
+        assert_array_equals(highlight_hit_results[0].ranges, [range1], 'CSS.highlights.highlightsFromPoint() returns a HighlightHitResult with the ranges of the Highlight present at the coordinates provided');
 
         // Get x and y coordinates between '6' and '7'.
         // Same priority for the Highlights, break tie by order of registration.
         x = rect.left + 7 * characterWidth;
-        highlights = CSS.highlights.highlightsFromPoint(x, y);
-        assert_equals(highlights.length, 2, 'CSS.highlights.highlightsFromPoint() returns exactly two Highlights when the coordinates provided point at two overlapping Highlights');
-        assert_equals(highlights[0], highlight2, 'CSS.highlights.highlightsFromPoint() returns first the Highlight registered last when both Highlights present at the point provided have the same priority');
-        assert_equals(highlights[1], highlight1, 'CSS.highlights.highlightsFromPoint() returns last the Highlight registered first when both Highlights present at the point provided have the same priority');
+        highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlight_hit_results.length, 2, 'CSS.highlights.highlightsFromPoint() returns exactly two HighlightHitResults when the coordinates provided point at two overlapping Highlights');
+        assert_equals(highlight_hit_results[0].highlight, highlight2, 'CSS.highlights.highlightsFromPoint() returns first a HighlightHitResult with the Highlight registered last when both Highlights present at the point provided have the same priority');
+        assert_equals(highlight_hit_results[1].highlight, highlight1, 'CSS.highlights.highlightsFromPoint() returns last  a HighlightHitResult with the Highlight registered first when both Highlights present at the point provided have the same priority');
+        assert_array_equals(highlight_hit_results[0].ranges, [range2], 'CSS.highlights.highlightsFromPoint() returns first a HighlightHitResult with the ranges of the Highlight present on top at the coordinates provided');
+        assert_array_equals(highlight_hit_results[1].ranges, [range1], 'CSS.highlights.highlightsFromPoint() returns last a HighlightHitResult with the ranges of the Highlight present at the bottom at the coordinates provided');
 
         // Now highlight1 should be first because it's got higher priority.
         highlight1.priority = 2;
         highlight2.priority = 1;
-        highlights = CSS.highlights.highlightsFromPoint(x, y);
-        assert_equals(highlights.length, 2, 'CSS.highlights.highlightsFromPoint() returns exactly two Highlights when the coordinates provided point at two overlapping Highlights');
-        assert_equals(highlights[0], highlight1, 'CSS.highlights.highlightsFromPoint() returns first the Highlight with higher priority when there are two Highlights present at the point provided');
-        assert_equals(highlights[1], highlight2, 'CSS.highlights.highlightsFromPoint() returns last the Highlight with lower priority when there are two Highlights present at the point provided');
-    }, 'CSS.highlights.highlightsFromPoint() returns Highlights present at the given point in the right order.');
+        highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlight_hit_results.length, 2, 'CSS.highlights.highlightsFromPoint() returns exactly two HighlightHitResults when the coordinates provided point at two overlapping Highlights');
+        assert_equals(highlight_hit_results[0].highlight, highlight1, 'CSS.highlights.highlightsFromPoint() returns first a HighlightHitResult with the Highlight with higher priority when there are two Highlights present at the point provided');
+        assert_equals(highlight_hit_results[1].highlight, highlight2, 'CSS.highlights.highlightsFromPoint() returns last a HighlightHitResult with the Highlight with lower priority when there are two Highlights present at the point provided');
+    }, 'CSS.highlights.highlightsFromPoint() returns the Highlights with their corresponding ranges present at the given point in the right order.');
 </script>
diff --git a/shadow-dom/HighlightRegistry-highlightsFromPoint.html b/shadow-dom/HighlightRegistry-highlightsFromPoint.html
