caretPositionFromPoint.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom/caretPositionFromPoint.html - WPT Dashboard Interop Dashboard

<!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>