wpt/css/css-highlight-api/HighlightRegistry-highlightsFromPoint.html at ea7a75eb92f43b69365a20c5b8a18e8e32b22e4f · web-platform-tests/wpt · GitHub

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>