gecko/dom/base/test/test_caretPositionFromPoint.html

<!doctype html>
<html>
<!--
  https://bugzilla.mozilla.org/show_bug.cgi?id=654352
-->
<head>
  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
  <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  <title>Test for Bug 654352</title>
  <style>
    @font-face {
      font-family: Ahem;
      src: url("Ahem.ttf");
    }

    #a {
      font-family: Ahem;
      padding: 10px;
      border: 8px solid black;
      width: 450px;
    }

    #test5 {
      height: 100px;
    }
  </style>
<script>
  function convertEmToPx(aEm) {
    // Assumes our base font size is 16px = 12pt = 1.0em.
    var pxPerEm = 16.0 / 1.0;
    return pxPerEm * aEm;
  }

  function checkOffsetsFromPoint(aX, aY, aExpected, aElementName='no-name') {
    var cp = document.caretPositionFromPoint(aX, aY);
    if (!cp) {
      ok(false, 'caretPositionFromPoint returned null for point: (' + aX + ', ' + aY + ')');
      return;
    }

    ok(aExpected == cp.offset, 'expected offset at (' + aX + ', ' + aY + ') [' + aElementName + ']: ' + aExpected + ', got: ' + cp.offset);
  }

  function doTesting() {
    var test1Element = document.getElementById("test1");
    var test1Rect = test1Element.getBoundingClientRect();

    // Check the first and last characters of the basic div.
    checkOffsetsFromPoint(Math.round(test1Rect.left + 1), Math.round(test1Rect.top + 1), 0, 'test1');
    checkOffsetsFromPoint(Math.round(test1Rect.left + test1Rect.width - 1), Math.round(test1Rect.top + 1), 13, 'test1');

    // Check a middle character in the second line of the div.
    // To do this, we calculate 7em in from the left of the bounding
    // box, and convert this to PX. (Hence the reason we need the AHEM
    // font).
    var pixelsLeft = convertEmToPx(7);
    var test2Element = document.getElementById("test2");
    var test2Rect = test2Element.getBoundingClientRect();
    checkOffsetsFromPoint(Math.round(test2Rect.left + pixelsLeft + 1), Math.round(test2Rect.top + 1), 7, 'test2');

    // Check the first and last characters of the textarea.
    var test3Element = document.getElementById('test3');
    var test3Rect = test3Element.getBoundingClientRect();
    checkOffsetsFromPoint(test3Rect.left + 5, test3Rect.top + 5, 0, 'test3');
    checkOffsetsFromPoint(Math.round(test3Rect.left + test3Rect.width - 15), Math.round(test3Rect.top + 5), 3, 'test3');

    // Check the first and last characters of the input.
    var test4Element = document.getElementById('test4');
    var test4Rect = test4Element.getBoundingClientRect();
    checkOffsetsFromPoint(test4Rect.left + 5, test4Rect.top + 5, 0, 'test4');
    checkOffsetsFromPoint(Math.round(test4Rect.left + test4Rect.width - 10), Math.round(test4Rect.top + 10), 6, 'test4');

    // Check to make sure that x or y outside the viewport returns null.
    var nullCp1 = document.caretPositionFromPoint(-10, 0);
    ok(!nullCp1, "caret position with negative x should be null");
    var nullCp2 = document.caretPositionFromPoint(0, -10);
    ok(!nullCp2, "caret position with negative y should be null");
    var nullCp3 = document.caretPositionFromPoint(9000, 0);
    ok(!nullCp3, "caret position with x > viewport width should be null");
    var nullCp4 = document.caretPositionFromPoint(0, 9000);
    ok(!nullCp4, "caret position with x > viewport height should be null");

    // Check a point within the bottom whitespace of the input.
    var test5Element = document.getElementById('test5');
    var test5Rect = test5Element.getBoundingClientRect();
    var test5x = test5Rect.left + 5;
    var test5y = test5Rect.bottom - 10;

    todo(false, "test5Rect: (" + test5Rect.top + ", " + test5Rect.left + ", " + test5Rect.width + ", " + test5Rect.height + ")");
    checkOffsetsFromPoint(test5x, test5y, 0, 'test5');

    SimpleTest.finish();
  }

  SimpleTest.waitForExplicitFinish();
</script>
</head>
<body onload="doTesting();">
<div id="a" contenteditable><span id="test1">abc, abc, abc</span><br>
<span id="test2" style="color: blue;">abc, abc, abc</span><br>
<textarea id="test3">abc</textarea><input id="test4" value="abcdef"><br><br>
<marquee>marquee</marquee>
</div>
<input id="test5" value="The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well. Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it." type="text">
</body>
</html>