Demo: Add debug checkbox

test/index.css

@@ -1,13 +1,23 @@
-input[type="text"], textarea {
-  font-family: 'Times New Roman'; /* a proportional font makes it more difficult to calculate the position */
-  font-size: 14px;
-  line-height: 16px;
-  padding: 24px 32px 16px 8px;    /* different paddings so position computations don't accidentally return a "correct" result */
-  text-transform: uppercase;      /* this drastically changes character width on proportional fonts */
-  text-indent: 20px;
-  border: 16px lightblue dotted;  /* needs to be accounted for when returning the final position */
-  border-right-width: 24px;       /* discourage naive border arithmetic */
-  background: lightyellow;
-  tab-size: 20;
-  -moz-tab-size: 20;
-}
+input[type="text"], textarea {
+  font-family: 'Times New Roman'; /* a proportional font makes it more difficult to calculate the position */
+  font-size: 14px;
+  line-height: 16px;
+  padding: 24px 32px 16px 8px;    /* different paddings so position computations don't accidentally return a "correct" result */
+  text-transform: uppercase;      /* this drastically changes character width on proportional fonts */
+  text-indent: 20px;
+  border: 16px lightblue dotted;  /* needs to be accounted for when returning the final position */
+  border-right-width: 24px;       /* discourage naive border arithmetic */
+  background: lightyellow;
+  tab-size: 20;
+  -moz-tab-size: 20;
+}
+body {
+  width: 400px;
+  position: relative;
+}
+#input-textarea-caret-position-mirror-div {
+  background: #ddd;
+  position: fixed;
+  top: 150px;
+  left: 400px;
+}

test/index.html

@@ -12,6 +12,10 @@
 
     <input type="text" size="15" maxlength="240" placeholder="Enter text here">
 
+    <hr/>
+    <label>
+      <input type="checkbox" id="mirrorDivDisplay">Show mirror div
+    </label>
     <hr/>
 
     <textarea rows="25" cols="40">
@@ -57,7 +61,9 @@
 
         function update() {
           // change debug option to true for testing purposes only!
-          var coordinates = getCaretCoordinates(element, element.selectionEnd, { debug: !true });
+          var coordinates = getCaretCoordinates(element, element.selectionEnd, {
+            debug: document.getElementById('mirrorDivDisplay').checked
+          });
           console.log('(top, left) = (%s, %s)', coordinates.top, coordinates.left);
           rect.style.top = element.offsetTop
             - element.scrollTop