HighlightRegistry-highlightsFromPoint-ranges.html (7528B)
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 and their corresponding Ranges and StaticRanges present at the coordinates provided as argument in the right order in multi-line text."> 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 body { 12 font-family: monospace; 13 } 14 </style> 15 <span id="example-span-1">0123456789</span><br> 16 <span id="example-span-2">0123456789</span> 17 <script> 18 const textNode1 = document.querySelector("#example-span-1"); 19 const textNode2 = document.querySelector("#example-span-2"); 20 21 function test_ranges(ranges) { 22 assert_equals(ranges.length, 2, 'test_ranges() should be called with exactly two ranges.'); 23 let big_range = ranges[0].startOffset < ranges[1].startOffset ? ranges[0] : ranges[1]; 24 25 let highlight = new Highlight(...ranges); 26 CSS.highlights.set("example-highlight", highlight); 27 28 const rect = textNode1.getBoundingClientRect(); 29 const characterWidth = rect.width / textNode1.textContent.length; 30 const characterHeight = rect.height; 31 32 // No Highlights outside of text contents. 33 let x = rect.left - 1; 34 let y = rect.top - 1; 35 let highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y); 36 assert_equals(highlight_hit_results.length, 0, 'CSS.highlights.highlightsFromPoint() returns an empty array when the coordinates provided are outside of the text contents'); 37 38 // Get x and y coordinates between characters '0' and '1' on the first line (not highlighted). 39 x = rect.left + characterWidth; 40 y = rect.top + characterHeight / 2; 41 highlights = CSS.highlights.highlightsFromPoint(x, y); 42 assert_equals(highlight_hit_results.length, 0, 'CSS.highlights.highlightsFromPoint() returns an empty array when the coordinates provided are outside of the highlighted ranges'); 43 44 // Get x and y coordinates between characters '2' and '3' on the first line. 45 x = rect.left + 3 * characterWidth; 46 highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y); 47 assert_equals(highlight_hit_results.length, 1, 'CSS.highlights.highlightsFromPoint() returns exactly one HighlightHitResult when the coordinates provided point at one Highlight'); 48 assert_equals(highlight_hit_results[0].highlight, highlight, 'CSS.highlights.highlightsFromPoint() returns a HighlightHitResult with the Highlight present at the coordinates provided'); 49 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'); 50 51 // Get x and y coordinates between characters '6' and '7' on the first line. 52 x = rect.left + 7 * characterWidth; 53 highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y); 54 assert_equals(highlight_hit_results.length, 1, 'CSS.highlights.highlightsFromPoint() returns exactly one HighlightHitResult when the coordinates provided point at one Highlight'); 55 assert_equals(highlight_hit_results[0].highlight, highlight, 'CSS.highlights.highlightsFromPoint() returns a HighlightHitResult with the Highlight present at the coordinates provided'); 56 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'); 57 58 // Get x and y coordinates to the right of the last character of the first line. 59 x = rect.left + 12 * characterWidth; 60 highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y); 61 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'); 62 63 // Get x and y coordinates between characters '0' and '1' on the second line. 64 x = rect.left + characterWidth; 65 y = rect.top + 1.5 * characterHeight; 66 highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y); 67 assert_equals(highlight_hit_results.length, 1, 'CSS.highlights.highlightsFromPoint() returns exactly one HighlightHitResult when the coordinates provided point at one Highlight'); 68 assert_equals(highlight_hit_results[0].highlight, highlight, 'CSS.highlights.highlightsFromPoint() returns a HighlightHitResult with the Highlight present at the coordinates provided'); 69 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'); 70 71 // Get x and y coordinates between characters '8' and '9' on the second line (not highlighted). 72 x = rect.left + 9 * characterWidth; 73 highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y); 74 assert_equals(highlight_hit_results.length, 0, 'CSS.highlights.highlightsFromPoint() returns an empty array when the coordinates provided are outside of the highlighted ranges'); 75 76 // Get x and y coordinates to the right of the last character of the second line. 77 x = rect.left + 12 * characterWidth; 78 highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y); 79 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'); 80 81 // Get x and y coordinates below the second line. 82 x = rect.left + 5 * characterWidth; 83 y = rect.top + 3 * characterHeight; 84 highlight_hit_results = CSS.highlights.highlightsFromPoint(x, y); 85 assert_equals(highlight_hit_results.length, 0, 'CSS.highlights.highlightsFromPoint() returns an empty array when the coordinates provided are below the text contents'); 86 } 87 88 test(() => { 89 // Set a Highlight with two nested ranges in this way: 90 // 01[234(56789) 91 // 01234567]89 92 let range1 = new Range(); 93 range1.setStart(textNode1.childNodes[0], 5); 94 range1.setEnd(textNode1.childNodes[0], 10); 95 let range2 = new Range(); 96 range2.setStart(textNode1.childNodes[0], 2); 97 range2.setEnd(textNode2.childNodes[0], 8); 98 99 let static_range1 = new StaticRange({startContainer: textNode1.childNodes[0], startOffset: 5, endContainer: textNode1.childNodes[0], endOffset: 10}) 100 let static_range2 = new StaticRange({startContainer: textNode1.childNodes[0], startOffset: 2, endContainer: textNode2.childNodes[0], endOffset: 8}) 101 102 test_ranges([range1, range2]); 103 test_ranges([range2, range1]); 104 test_ranges([static_range1, static_range2]); 105 test_ranges([static_range2, static_range1]); 106 test_ranges([static_range1, range2]); 107 test_ranges([range1, static_range2]); 108 }, '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.'); 109 </script>