third_party/WebKit/LayoutTests/editing/input/editable-container-with-word-wrap-normal.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title> Testcase for bug https://bugs.webkit.org/show_bug.cgi?id=89649 </title>
   5 <script src="../../resources/ahem.js"></script>
   6 <style>
   7 .editableDiv {
   8     overflow:auto;
   9     height:50px;
  10     width:500px;
  11     word-wrap:normal;
  12     font-family: 'Ahem';
  13 }
  14 </style>
  15 <script src="../../resources/js-test.js"></script>
  16 <script>
  17 function runTest() {
  18     description('Testcase for bug <a href="http://www.webkit.org/b/89649">http://www.webkit.org/b/89649</a>. \
  19 The test case checks if caret is drawn properly (especially scrolls properly) inside a editable container having word-wrap:normal.');
  20
  21     editableContainer = document.getElementById('test');
  22     editableContainer.focus();
  23     if (window.internals)
  24         startCaretRect = internals.absoluteCaretBounds();
  25
  26     window.getSelection().collapse(editableContainer,0);
  27     if (window.testRunner)
  28         testRunner.execCommand('MoveToEndOfLine');
  29
  30     finalCaretRect = {right:-1,left:-1};
  31     if (window.internals)
  32         finalCaretRect = internals.absoluteCaretBounds();
  33
  34     caretWidth = finalCaretRect.right - finalCaretRect.left;
  35
  36     debug('To manually test, move the caret to the end of the line. \nThe content must scroll for the caret to reach the end of the editable text.');
  37     shouldBeTrue("editableContainer.scrollLeft > 0");
  38
  39     debug('<br>Final caret rect is calculated by following constraints');
  40     debug('1) ScrollWidth = text content width + caret width');
  41     debug('2) Caret rect is always within container bounding box (thus subtracting the scroll left)');
  42     shouldBe("startCaretRect.left + editableContainer.scrollWidth - editableContainer.scrollLeft", "finalCaretRect.right");
  43
  44     document.body.removeChild(editableContainer);
  45     isSuccessfullyParsed();
  46  }
  47 </script>
  48 </head>
  49 <body onload="runTest();">
  50  <div id="test" contenteditable="true" class="editableDiv" >
  51   SOMEFILLERTEXTSOMEFILLERTEXTSOMEFILLERFILLERSFILLERSFILLERSFILLERSFILLERS
  52  </div>
  53  <div id="description"></div>
  54  <div id="console"></div>
  55 </body>
  56 </html>