| <!doctype html> |
| <meta name="author" title="Fernando Fiori" href="mailto:[email protected]"> |
| <meta name="assert" content="HighlightRegistry.highlightsFromPoint returns the Highlights present at the coordinates provided as argument in the right order."> |
| <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); |
| } |
| ::highlight(example-highlight-2) { |
| background-color: rgba(255, 255, 0, 0.5); |
| } |
| body { |
| font-family: monospace; |
| } |
| </style> |
| <span id="example-span">0123456789</span> |
| <script> |
| test(() => { |
| assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint("asdf", 10); }); |
| assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint(10); }); |
| assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint(); }); |
| assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint(10, 10, "asdf"); }); |
| }, 'CSS.highlights.highlightsFromPoint() should throw when called with incorrect parameters.'); |
| |
| test(() => { |
| assert_equals(CSS.highlights.highlightsFromPoint(-1,-1).length, 0); |
| }, '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]] |
| const textNode = document.querySelector("#example-span"); |
| let range1 = new Range(); |
| range1.setStart(textNode.childNodes[0], 2); |
| range1.setEnd(textNode.childNodes[0], 10); |
| let range2 = new Range(); |
| range2.setStart(textNode.childNodes[0], 5); |
| range2.setEnd(textNode.childNodes[0], 10); |
| |
| let highlight1 = new Highlight(range1); |
| CSS.highlights.set("example-highlight", highlight1); |
| let highlight2 = new Highlight(range2); |
| CSS.highlights.set("example-highlight-2", highlight2); |
| |
| const rect = textNode.getBoundingClientRect(); |
| const characterWidth = rect.width / textNode.textContent.length; |
| |
| // 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 '0' and '1'. |
| x = rect.left + characterWidth; |
| y = rect.top + rect.height / 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 point at no Highlights'); |
| |
| // Get x and y coordinates between '2' and '3'. |
| 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, 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; |
| 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; |
| 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> |
