Manual quasi-self-testing framework confirming #24

README.md

@@ -43,8 +43,8 @@ or the [test.html](http://rawgit.com/component/textarea-caret-position/master/te
 var getCaretCoordinates = require('textarea-caret');
 
 document.querySelector('textarea').addEventListener('input', function () {
-  var coordinates = getCaretCoordinates(this, this.selectionEnd);
-  console.log('(top, left, height) = (%s, %s, %s)', coordinates.top, coordinates.left, coordinates.height);
+  var caret = getCaretCoordinates(this, this.selectionEnd);
+  console.log('(top, left, height) = (%s, %s, %s)', caret.top, caret.left, caret.height);
 })
 ```
 
@@ -64,8 +64,11 @@ The function returns a caret coordinates object of the form `{top: , left: , hei
 
 ## Known issues
 
+* Edge cases with spaces at the end of lines in `<textarea>`s ([#24](https://github.com/component/textarea-caret-position/issues/24))
+* Edge case with selecting from right to left strings longer than the `<input>` ([#40](https://github.com/component/textarea-caret-position/issues/40))
 * Tab characters in `<textarea>`s aren't supported in IE9 ([issue #14](https://github.com/component/textarea-caret-position/issues/14))
 
+
 ## Dependencies
 
 None.
@@ -75,7 +78,7 @@ None.
 
 * Add tests.
 * Consider adding [IE-specific](http://geekswithblogs.net/svanvliet/archive/2005/03/24/textarea-cursor-position-with-javascript.aspx) [code](http://stackoverflow.com/questions/16212871/get-the-offset-position-of-the-caret-in-a-textarea-in-pixels) if it avoids the necessity of creating the mirror div and might fix [#14](https://github.com/component/textarea-caret-position/issues/14).
-* ~~Test IE8 support with `currentStyle~~.
+* ~~Test IE8 support with `currentStyle`~~.
 
 
 ## Implementation notes

test/index.css

@@ -15,3 +15,11 @@ input[type="text"], textarea {
 input[type="text"] {
   height: 3em;  /* force a height different from line-height */
 }
+
+.side-by-side {
+  display: flex;
+}
+
+.col {
+  margin-right: 2em;
+}

test/index.html

@@ -23,23 +23,35 @@ <h2>Manual testing ground</h2>
     </p>
 
     <h2><code>&lt;input type="text"></code></h2>
-    <input type="text" size="15" maxlength="240" placeholder="Enter text here">
+    <div class="side-by-side">
+      <div class="col">
+        <input type="text" size="15" maxlength="240" placeholder="Enter text here">
+      </div>
+
+      <div class="col">
+        <h3><code>&lt;input></code> manual tests</h3>
+        <ol>
+          <li>Type text longer than the input, select with the mouse from right to left to cause scrolling left, then click in the input.</li>
+        </ol>
+      </div>
+    </div>
 
     <hr/>
 
     <h2><code>&lt;textarea></code></h2>
-    <textarea rows="25" cols="40">
-      I threw a wish in the well,
-      Don't ask me, I'll never tell
-      PlaceTheCursorUnderTheFirstLettersOfThisLineAndMakeSureItDoesntTrailOnThePreviousLine
-      I looked to you as it fell,
+    <div class="side-by-side">
+      <textarea rows="25" cols="40" class="col">
+      1. Place cursor before "T" below
+      Then press arrow dow'n
+      2.PressHomeOnThisLineThenLeftArrow
+      Firefox fails, #sorrow
       And now you're in my way
 		And	tabs	are	handled	just	fine
       Except in IE9.
 
-      I'd trade my soul for a wish,
-      Pennies and dimes for a kiss
-      I wasn't looking for this,
+      3. I'd trade my soul for averylongwordthatgetswrappedaway,
+      Press End on line 3
+      All browsers are faili'n,
       But now you're in my way
 
       Your stare was holdin',
@@ -51,7 +63,16 @@ <h2><code>&lt;textarea></code></h2>
       And this is crazy,
       But here's my number,
       So call me, maybe!
-    </textarea>
+      </textarea>
+      <div class="col">
+        <h3><code>&lt;textarea></code> manual tests</h3>
+        <ol>
+          <li>Place the cursor before the "T" in "Then" then press arrow down. Fails in Chrome 58, Firefox 53.</li>
+          <li>Place the cursor before "2." and press left arrow. Fails in Firefox 53, works in Chrome.</li>
+          <li>Place the cursor at the beginning of line "3." then press End. Fails in Chrome 58, Firefox 53.</li>
+        </ol>
+      </div>
+    </div>
 
     <script>
       ['input[type="text"]', 'textarea'].forEach(function (selector) {