| <html> |
| <head> |
| <style> |
| .testDiv { |
| width: 200px; |
| height: 20px; |
| border: 1px solid black; |
| white-space: nowrap; |
| overflow: hidden; |
| } |
| |
| .forcertl { |
| direction: rtl; |
| unicode-bidi: bidi-override; |
| } |
| |
| .ellipses { |
| text-overflow:ellipsis; |
| } |
| |
| </style> |
| |
| <script> |
| function moveCursorOverAllWords(divName, numWords) { |
| div = document.getElementById(divName); |
| div.focus(); |
| var selection = window.getSelection(); |
| // Move to start of text |
| selection.modify("move", "backward", "line"); |
| // Move cursor over all words so inline spellchecking is activated for all |
| for (var i = 0; i < 100; i++ ) { |
| selection.modify("move", "forward", "word"); |
| } |
| // Remove focus from the element, since the word under the cursor won't have a misspelling marker. |
| div.blur(); |
| } |
| |
| function startTest() { |
| moveCursorOverAllWords('testLTR'); |
| moveCursorOverAllWords('testRTL'); |
| moveCursorOverAllWords('testLTREllipses'); |
| moveCursorOverAllWords('testRTLEllipses'); |
| |
| } |
| </script> |
| </head> |
| <body onload="startTest()"> |
| <p id="explanation"> |
| This tests the correct placement of inline spelling and grammar markers in text.<br> |
| Spelling markers should line up exactly under misspelled words in all cases. |
| </p> |
| |
| LTR |
| <div id="testLTR" class="testDiv" contenteditable="true"> |
| the the adlj adaasj sdklj. there there |
| </div> |
| |
| RTL |
| <div id="testRTL" class="testDiv forcertl" contenteditable="true"> |
| the the adlj adaasj sdklj. there there |
| </div> |
| |
| |
| LTR (text-overflow:ellipses): |
| <div id="testLTREllipses" class="testDiv ellipses" contenteditable="true"> |
| the the adlj adaasj sdklj. there there |
| </div> |
| |
| RTL (text-overflow:ellipses): |
| <div id="testRTLEllipses" class="testDiv forcertl ellipses" contenteditable="true"> |
| the the adlj adaasj sdklj. there there |
| </div> |
| |
| </body> |
| </html> |
