HighlightRegistry-highlightsFromPoint.html (6231B)
1 <!doctype html> 2 <meta name="author" title="Fernando Fiori" href="mailto:ffiori@microsoft.com"> 3 <meta name="assert" content="HighlightRegistry.highlightsFromPoint returns the Highlights present at the coordinates provided as argument in the right order."> 4 <link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/highlight/HighlightsFromPointsExplainer.md"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 ::highlight(example-highlight) { 9 background-color: rgba(0, 255, 255, 0.5); 10 } 11 ::highlight(example-highlight-2) { 12 background-color: rgba(255, 255, 0, 0.5); 13 } 14 body { 15 font-family: monospace; 16 } 17 </style> 18 <span id="example-span">0123456789</span> 19 <script> 20 test(() => { 21 assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint("asdf", 10); }); 22 assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint(10); }); 23 assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint(); }); 24 assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint(10, 10, "asdf"); }); 25 }, 'CSS.highlights.highlightsFromPoint() should throw when called with incorrect parameters.'); 26 27 test(() => { 28 assert_equals(CSS.highlights.highlightsFromPoint(-1,-1).length, 0); 29 }, 'CSS.highlights.highlightsFromPoint() should return an empty array when called with a point outside the document.'); 30 31 test(() => { 32 // Set two Highlights in this way: 01[234[56789]] 33 const textNode = document.querySelector("#example-span"); 34 let range1 = new Range(); 35 range1.setStart(textNode.childNodes[0], 2); 36 range1.setEnd(textNode.childNodes[0], 10); 37 let range2 = new Range(); 38 range2.setStart(textNode.childNodes[0], 5); 39 range2.setEnd(textNode.childNodes[0], 10); 40 41 let highlight1 = new Highlight(range1); 42 CSS.highlights.set("example-highlight", highlight1); 43 let highlight2 = new Highlight(range2); 44 CSS.highlights.set("example-highlight-2", highlight2); 45 46 const rect = textNode.getBoundingClientRect(); 47 const characterWidth = rect.width / textNode.textContent.length; 48 49 // No Highlights outside of text contents. 50 let x = rect.left - 1; 51 let y = rect.top - 1; 52 let highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y); 53 assert_equals(highlight_hit_results.length, 0, 'CSS.highlights.highlightsFromPoint() returns an empty array when the coordinates provided are outside of the text contents'); 54 55 // Get x and y coordinates between '0' and '1'. 56 x = rect.left + characterWidth; 57 y = rect.top + rect.height / 2; 58 highlights = CSS.highlights.highlightsFromPoint(x, y); 59 assert_equals(highlight_hit_results.length, 0, 'CSS.highlights.highlightsFromPoint() returns an empty array when the coordinates provided point at no Highlights'); 60 61 // Get x and y coordinates between '2' and '3'. 62 x = rect.left + 3 * characterWidth; 63 highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y); 64 assert_equals(highlight_hit_results.length, 1, 'CSS.highlights.highlightsFromPoint() returns exactly one HighlightHitResult when the coordinates provided point at one Highlight'); 65 assert_equals(highlight_hit_results[0].highlight, highlight1, 'CSS.highlights.highlightsFromPoint() returns a HighlightHitResult with the Highlight present at the coordinates provided'); 66 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'); 67 68 // Get x and y coordinates between '6' and '7'. 69 // Same priority for the Highlights, break tie by order of registration. 70 x = rect.left + 7 * characterWidth; 71 highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y); 72 assert_equals(highlight_hit_results.length, 2, 'CSS.highlights.highlightsFromPoint() returns exactly two HighlightHitResults when the coordinates provided point at two overlapping Highlights'); 73 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'); 74 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'); 75 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'); 76 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'); 77 78 // Now highlight1 should be first because it's got higher priority. 79 highlight1.priority = 2; 80 highlight2.priority = 1; 81 highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y); 82 assert_equals(highlight_hit_results.length, 2, 'CSS.highlights.highlightsFromPoint() returns exactly two HighlightHitResults when the coordinates provided point at two overlapping Highlights'); 83 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'); 84 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'); 85 }, 'CSS.highlights.highlightsFromPoint() returns the Highlights with their corresponding ranges present at the given point in the right order.'); 86 </script>