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