83 lines
No EOL
5 KiB
HTML
83 lines
No EOL
5 KiB
HTML
<!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> |