1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
<!doctype html>
<meta name="author" title="Fernando Fiori" href="mailto:ffiori@microsoft.com">
<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>
|
