<!doctype html>
<meta charset="utf-8">
<title>document.caretPositionFromPoint()</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view-1/#dom-document-caretpositionfrompoint">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#textDiv {
display: inline-block;
}
</style>
<div id="textDiv">aaa</div>
<script>
test(() => {
assert_throws_js(TypeError, () => { document.caretPositionFromPoint(); });
assert_throws_js(TypeError, () => { document.caretPositionFromPoint(5); });
assert_throws_js(TypeError, () => { document.caretPositionFromPoint("foo", 5); });
}, "document.caretPositionFromPoint() throws when called without the correct parameters");
test(() => {
const doc = document.implementation.createHTMLDocument("");
assert_equals(doc.caretPositionFromPoint(0, 0), null);
}, "document.caretPositionFromPoint() should return null for a document with no viewport");
test(() => {
assert_equals(document.caretPositionFromPoint(-5, 5), null);
assert_equals(document.caretPositionFromPoint(5, -5), null);
assert_equals(document.caretPositionFromPoint(document.documentElement.clientWidth * 2, 5), null);
assert_equals(document.caretPositionFromPoint(5, document.documentElement.clientHeight * 2), null);
}, "document.caretPositionFromPoint() should return null if given coordinates outside of the viewport");
test(() => {
const textDiv = document.getElementById("textDiv");
const rect = textDiv.getBoundingClientRect();
const characterWidth = rect.width / textDiv.textContent.length;
const characterIndex = 2
const x = rect.left + characterWidth * characterIndex;
const y = rect.top + rect.height / 2;
const caretPosition = document.caretPositionFromPoint(x, y);
assert_true(caretPosition instanceof CaretPosition);
assert_true(caretPosition.offsetNode instanceof Text);
assert_equals(typeof(caretPosition.offset), "number");
assert_equals(caretPosition.offsetNode, textDiv.firstChild);
assert_equals(caretPosition.offset, characterIndex);
}, "document.caretPositionFromPoint() should return a CaretPosition at the specified location");
test(() => {
const textDiv = document.getElementById("textDiv");
const rect = textDiv.getBoundingClientRect();
const characterWidth = rect.width / textDiv.textContent.length;
const characterIndex = 2
const x = rect.left + characterWidth * characterIndex;
const y = rect.top + rect.height / 2;
const caretPosition = document.caretPositionFromPoint(x, y);
const caretRangeExpected = new Range();
caretRangeExpected.setStart(textDiv.firstChild, characterIndex);
caretRectExpected = caretRangeExpected.getBoundingClientRect();
assert_true(caretPosition.getClientRect instanceof Function);
const caretRectActual = caretPosition.getClientRect();
assert_true(caretRectActual instanceof DOMRect);
assert_not_equals(caretRectActual, caretPosition.getClientRect(), "CaretPosition.getClientRect() should return a new DOMRect every time");
assert_equals(caretRectActual.x, caretRectExpected.x);
assert_equals(caretRectActual.y, caretRectExpected.y);
assert_equals(caretRectActual.width, 0, "Caret range should be collapsed");
assert_equals(caretRectActual.height, caretRectExpected.height);
}, "CaretRange.getClientRect() should return a DOMRect that matches one obtained from a manually constructed Range");
</script>
Codebase Browser
chromium