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