tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

caretPositionFromPoint.html (5179B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>document.caretPositionFromPoint()</title>
      4 <link rel="help" href="https://drafts.csswg.org/cssom-view-1/#dom-document-caretpositionfrompoint">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <style>
      8  #textDiv {
      9    display: inline-block;
     10  }
     11 
     12  .user-select-none {
     13    -webkit-user-select: none;
     14    user-select: none;
     15  }
     16 </style>
     17 <div id="container"></div>
     18 <script>
     19  test(() => {
     20    container.setHTMLUnsafe(`<div id="textDiv">aaa</div>`);
     21    assert_throws_js(TypeError, () => { document.caretPositionFromPoint(); });
     22    assert_throws_js(TypeError, () => { document.caretPositionFromPoint(5); });
     23    assert_throws_js(TypeError, () => { document.caretPositionFromPoint("foo", 5); });
     24  }, "document.caretPositionFromPoint() throws when called without the correct parameters");
     25 
     26  test(() => {
     27    container.setHTMLUnsafe(`<div id="textDiv">aaa</div>`);
     28    const doc = document.implementation.createHTMLDocument("");
     29    assert_equals(doc.caretPositionFromPoint(0, 0), null);
     30  }, "document.caretPositionFromPoint() should return null for a document with no viewport");
     31 
     32  test(() => {
     33    container.setHTMLUnsafe(`<div id="textDiv">aaa</div>`);
     34    assert_equals(document.caretPositionFromPoint(-5, 5), null);
     35    assert_equals(document.caretPositionFromPoint(5, -5), null);
     36    assert_equals(document.caretPositionFromPoint(document.documentElement.clientWidth * 2, 5), null);
     37    assert_equals(document.caretPositionFromPoint(5, document.documentElement.clientHeight * 2), null);
     38  }, "document.caretPositionFromPoint() should return null if given coordinates outside of the viewport");
     39 
     40  test(() => {
     41    container.setHTMLUnsafe(`<div id="textDiv">aaa</div>`);
     42    const textDiv = document.getElementById("textDiv");
     43    const rect = textDiv.getBoundingClientRect();
     44    const characterWidth = rect.width / textDiv.textContent.length;
     45    const characterIndex = 2
     46    const x = rect.left + characterWidth * characterIndex;
     47    const y = rect.top + rect.height / 2;
     48    const caretPosition = document.caretPositionFromPoint(x, y);
     49    assert_true(caretPosition instanceof CaretPosition);
     50    assert_true(caretPosition.offsetNode instanceof Text);
     51    assert_equals(typeof(caretPosition.offset), "number");
     52    assert_equals(caretPosition.offsetNode, textDiv.firstChild);
     53    assert_equals(caretPosition.offset, characterIndex);
     54  }, "document.caretPositionFromPoint() should return a CaretPosition at the specified location");
     55 
     56  test(() => {
     57    container.setHTMLUnsafe(`<div id="textDiv" class="user-select-none">aaa</div>`);
     58    const textDiv = document.getElementById("textDiv");
     59    const rect = textDiv.getBoundingClientRect();
     60    const characterWidth = rect.width / textDiv.textContent.length;
     61    const characterIndex = 2
     62    const x = rect.left + characterWidth * characterIndex;
     63    const y = rect.top + rect.height / 2;
     64    const caretPosition = document.caretPositionFromPoint(x, y);
     65    assert_true(caretPosition instanceof CaretPosition);
     66    assert_true(caretPosition.offsetNode instanceof Text);
     67    assert_equals(typeof(caretPosition.offset), "number");
     68    assert_equals(caretPosition.offsetNode, textDiv.firstChild);
     69    assert_equals(caretPosition.offset, characterIndex);
     70  }, "document.caretPositionFromPoint() should return a CaretPosition over elements with `user-select: none`");
     71 
     72  test(() => {
     73    container.setHTMLUnsafe(`<svg width=100 height=100><circle cx=50 cy=50 r=50 /></svg>`);
     74    const circle = document.querySelector("circle");
     75    const caretPosition = document.caretPositionFromPoint(50, 50);
     76    assert_equals(caretPosition.offsetNode, circle);
     77    assert_equals(caretPosition.offset, 0);
     78  }, "document.caretPositionFromPoint() should return a CaretPosition over SVG elements");
     79 
     80  test(() => {
     81    container.setHTMLUnsafe(`<div id="textDiv">aaa</div>`);
     82    const textDiv = document.getElementById("textDiv");
     83    const rect = textDiv.getBoundingClientRect();
     84    const characterWidth = rect.width / textDiv.textContent.length;
     85    const characterIndex = 2
     86    const x = rect.left + characterWidth * characterIndex;
     87    const y = rect.top + rect.height / 2;
     88    const caretPosition = document.caretPositionFromPoint(x, y);
     89    const caretRangeExpected = new Range();
     90    caretRangeExpected.setStart(textDiv.firstChild, characterIndex);
     91    caretRectExpected = caretRangeExpected.getBoundingClientRect();
     92    assert_true(caretPosition.getClientRect instanceof Function);
     93    const caretRectActual = caretPosition.getClientRect();
     94    assert_true(caretRectActual instanceof DOMRect);
     95    assert_not_equals(caretRectActual, caretPosition.getClientRect(), "CaretPosition.getClientRect() should return a new DOMRect every time");
     96    assert_equals(caretRectActual.x, caretRectExpected.x);
     97    assert_equals(caretRectActual.y, caretRectExpected.y);
     98    assert_equals(caretRectActual.width, 0, "Caret range should be collapsed");
     99    assert_equals(caretRectActual.height, caretRectExpected.height);
    100  }, "CaretRange.getClientRect() should return a DOMRect that matches one obtained from a manually constructed Range");
    101 </script>