Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-highlight-api/HighlightRegistry-highlightsFromPoint.html - WPT Dashboard Interop Dashboard
<!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 vector 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 highlights = CSS.highlights.highlightsFromPoint(x, y);
assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights 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(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the coordinates provided point at no Highlights');
// Get x and y coordinates between '2' and '3'.
x = rect.left + 3 * characterWidth;
highlights = CSS.highlights.highlightsFromPoint(x, y);
assert_equals(highlights.length, 1, 'CSS.highlights.highlightsFromPoint() returns exactly one Highlight when the coordinates provided point at one Highlight');
assert_equals(highlights[0], highlight1, 'CSS.highlights.highlightsFromPoint() returns 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;
highlights = CSS.highlights.highlightsFromPoint(x, y);
assert_equals(highlights.length, 2, 'CSS.highlights.highlightsFromPoint() returns exactly two Highlights when the coordinates provided point at two overlapping Highlights');
assert_equals(highlights[0], highlight2, 'CSS.highlights.highlightsFromPoint() returns first the Highlight registered last when both Highlights present at the point provided have the same priority');
assert_equals(highlights[1], highlight1, 'CSS.highlights.highlightsFromPoint() returns last the Highlight registered first when both Highlights present at the point provided have the same priority');
// Now highlight1 should be first because it's got higher priority.
highlight1.priority = 2;
highlight2.priority = 1;
highlights = CSS.highlights.highlightsFromPoint(x, y);
assert_equals(highlights.length, 2, 'CSS.highlights.highlightsFromPoint() returns exactly two Highlights when the coordinates provided point at two overlapping Highlights');
assert_equals(highlights[0], highlight1, 'CSS.highlights.highlightsFromPoint() returns first the Highlight with higher priority when there are two Highlights present at the point provided');
assert_equals(highlights[1], highlight2, 'CSS.highlights.highlightsFromPoint() returns last the Highlight with lower priority when there are two Highlights present at the point provided');
}, 'CSS.highlights.highlightsFromPoint() returns Highlights present at the given point in the right order.');
</script>