third_party/WebKit/LayoutTests/editing/input/caret-at-the-edge-of-contenteditable.html

   1 <!DOCTYPE html>
   2 <head>
   3 </head>
   4 <body>
   5 <div>When the caret reaches the edge of the input box or content editable div, on the next input if must jump to the center of the control.</div>
   6 <span style="position:absolute; visibility:hidden" id="single-digit">0</span>
   7 <div style="border:thin solid black; white-space:nowrap; overflow:hidden" contenteditable="true" id="input-contenteditable">012345678901234567890123456789</div>
   8 <script>
   9
  10 var contentEditable = document.getElementById("input-contenteditable");
  11 var singleDigitWidth = document.getElementById("single-digit").clientWidth;
  12 var contentEditableSize = 10;
  13 contentEditable.style.width = (singleDigitWidth * contentEditableSize) + "px";
  14 contentEditable.focus();
  15 // Move the caret to the beginning of the input.
  16 getSelection().collapse(contentEditable.firstChild, 0);
  17 var editableContent = contentEditable.textContent;
  18 if (window.eventSender) {
  19     for (var i = 0; i < contentEditableSize * 1.2; ++i)
  20         eventSender.keyDown(editableContent[i]);
  21 }
  22
  23 </script>
  24 </body>