Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 7 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/cssom/caretRangeFromPoint.tentative.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset="utf-8" />
<title>document.caretRangeFromPoint()</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
display: inline-block;
}
canvas {
display: block;
background: green;
};
</style>
<div id="div">abc</div>
<div id="shadow">
<template shadowrootmode="open">
<div>def</div>
</template>
</div>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
test(() => {
let range = document.caretRangeFromPoint();
assert_true(range instanceof Range);
assert_equals(range.startOffset, 0);
assert_equals(range.endOffset, 0);
}, "document.caretRangeFromPoint() (no supplied coordinates) returns Range with 0 0 values");
test(() => {
const doc = document.implementation.createHTMLDocument("");
let range = doc.caretRangeFromPoint(0, 0);
assert_equals(range, null);
}, "document.caretRangeFromPoint() should return null for a document with no viewport");
test(() => {
assert_equals(document.caretRangeFromPoint(-5, 5), null);
assert_equals(document.caretRangeFromPoint(5, -5), null);
assert_equals(
document.caretRangeFromPoint(document.documentElement.clientWidth * 2, 5),
null,
);
assert_equals(
document.caretRangeFromPoint(
5,
document.documentElement.clientHeight * 2,
),
null,
);
}, "document.caretRangeFromPoint() should return null if given coordinates outside of the viewport");
test(() => {
const rect = div.getBoundingClientRect();
const characterWidth = rect.width / div.textContent.length;
const characterIndex = 2;
const x = rect.left + characterWidth * characterIndex;
const y = rect.top + rect.height / 2;
const range = document.caretRangeFromPoint(x, y);
assert_true(range instanceof Range);
assert_equals(range.startContainer, div.childNodes[0]);
assert_equals(range.endContainer, div.childNodes[0]);
assert_equals(range.startOffset, characterIndex);
assert_equals(range.endOffset, characterIndex);
assert_true(range.collapsed);
range.setEnd(div.childNodes[0], characterIndex + 1);
assert_false(range.collapsed);
assert_equals(range.toString(), "c");
range.setStart(div.childNodes[0], characterIndex - 1);
assert_false(range.collapsed);
assert_equals(range.toString(), "bc");
range.setStart(div.childNodes[0], 0);
assert_false(range.collapsed);
assert_equals(range.toString(), "abc");
}, "document.caretRangeFromPoint() should return a Range at the specified location");
test(() => {
const rect = div.getBoundingClientRect();
const characterWidth = rect.width / div.textContent.length;
const characterIndex = 2;
const x = rect.left + characterWidth * characterIndex;
const y = rect.top + rect.height / 2;
const range = document.caretRangeFromPoint(x, y);
let rangeRect = range.getBoundingClientRect();
assert_approx_equals(rangeRect.x, x, 1);
assert_approx_equals(rangeRect.y, rect.height / 2, 3);
assert_approx_equals(rangeRect.height, rect.height, 1);
assert_approx_equals(rangeRect.width, 0, 0.02, "Caret range should be collapsed");
}, "document.caretRangeFromPoint() should return a client rect close to the given coords");
test(() => {
const shadowDiv = shadow.shadowRoot.querySelector("div");
const rect = shadow.getBoundingClientRect();
const characterWidth = rect.width / shadow.textContent.length;
const characterIndex = 2;
const x = rect.left + characterWidth * characterIndex;
const y = rect.top + rect.height / 2;
const range = document.caretRangeFromPoint(x, y);
const point = document.caretPositionFromPoint(x, y);
assert_true(range instanceof Range);
assert_equals(range.startContainer, point.offsetNode);
assert_equals(range.endContainer, point.offsetNode);
assert_equals(range.startOffset, characterIndex);
assert_equals(range.endOffset, characterIndex);
assert_true(range.collapsed);
}, "document.caretRangeFromPoint() on a shadow should return a Range pointing at the same node as caretPositionFromPoint");
test(() => {
const rect = canvas.getBoundingClientRect();
const x = rect.left + rect.width / 2;
const y = rect.top + rect.height / 2;
const range = document.caretRangeFromPoint(x, y);
assert_true(range instanceof Range);
assert_equals(range.startContainer, canvas);
assert_equals(range.endContainer, canvas);
assert_equals(range.startOffset, 0);
assert_equals(range.endOffset, 0);
assert_true(range.collapsed);
}, "document.caretRangeFromPoint() on a textarea should return a Range pointing at canvas");
</script>