| OLD | NEW |
| 1 <!doctype html> |
| 1 <html> | 2 <html> |
| 2 <head> | 3 <head> |
| 3 <script src="../../resources/js-test.js"></script> | |
| 4 <script src="../../editing/editing.js"></script> | |
| 5 <style> | 4 <style> |
| 6 body { overflow:hidden; } | 5 body { overflow:hidden; } |
| 7 | 6 |
| 8 .testDiv { | 7 .testDiv { |
| 9 width: 200px; | 8 width: 200px; |
| 10 height: 20px; | 9 height: 20px; |
| 11 border: 1px solid black; | 10 border: 1px solid black; |
| 12 white-space: nowrap; | 11 white-space: nowrap; |
| 13 overflow: hidden; | 12 overflow: hidden; |
| 14 } | 13 } |
| 15 | 14 |
| 16 .forcertl { | 15 .forcertl { |
| 17 direction: rtl; | 16 direction: rtl; |
| 18 unicode-bidi: bidi-override; | 17 unicode-bidi: bidi-override; |
| 19 } | 18 } |
| 20 | 19 |
| 21 .ellipses { | 20 .ellipses { |
| 22 text-overflow:ellipsis; | 21 text-overflow:ellipsis; |
| 23 } | 22 } |
| 24 | 23 |
| 25 </style> | 24 </style> |
| 26 | |
| 27 </head> | 25 </head> |
| 28 <body> | 26 <body> |
| 29 <script> | 27 <div id="warning"> |
| 30 description("This tests the correct placement of inline spelling and grammar " | 28 This test requires window.internals. If you use content_shell, |
| 31 + "markers in text. Spelling markers should line up exactly under misspelled
" | 29 "--expose-internals-for-testing" command flag enables it. |
| 32 + "words in all cases."); | 30 </div> |
| 33 | |
| 34 jsTestIsAsync = true; | |
| 35 | |
| 36 if (window.testRunner) { | |
| 37 testRunner.dumpAsTextWithPixelResults(); | |
| 38 testRunner.setMockSpellCheckerEnabled(true); | |
| 39 } | |
| 40 </script> | |
| 41 | 31 |
| 42 LTR | 32 LTR |
| 43 <div id="testLTR" class="testDiv" contenteditable="true">the the adlj adaasj sdk
lj. there there</div> | 33 <div id="testLTR" class="testDiv" contenteditable="true">the the adlj adaasj sdk
lj. there there</div> |
| 44 | 34 |
| 45 RTL | 35 RTL |
| 46 <div id="testRTL" class="testDiv forcertl" contenteditable="true">the the adlj a
daasj sdklj. there there</div> | 36 <div id="testRTL" class="testDiv forcertl" contenteditable="true">the the adlj a
daasj sdklj. there there</div> |
| 47 | 37 |
| 48 LTR (text-overflow:ellipses): | 38 LTR (text-overflow:ellipses): |
| 49 <div id="testLTREllipses" class="testDiv ellipses" contenteditable="true">the th
e adlj adaasj sdklj. there there</div> | 39 <div id="testLTREllipses" class="testDiv ellipses" contenteditable="true">the th
e adlj adaasj sdklj. there there</div> |
| 50 | 40 |
| 51 RTL (text-overflow:ellipses): | 41 RTL (text-overflow:ellipses): |
| 52 <div id="testRTLEllipses" class="testDiv forcertl ellipses" contenteditable="tru
e">the the adlj adaasj sdklj. there there</div> | 42 <div id="testRTLEllipses" class="testDiv forcertl ellipses" contenteditable="tru
e">the the adlj adaasj sdklj. there there</div> |
| 53 | 43 |
| 54 <script> | 44 <script> |
| 55 function moveCursorOverAllWords(id) | 45 if (window.internals) |
| 56 { | 46 document.getElementById('warning').style.display = 'none'; |
| 57 div = document.getElementById(id); | |
| 58 div.focus(); | |
| 59 | 47 |
| 60 debug(id + ":"); | 48 // This tests the correct placement of inline spelling and grammar markers in |
| 61 // Move cursor over all words so inline spellchecking is activated for all. | 49 // text. Markers should line up exactly under misspelled words in all cases. |
| 62 for (var i = 0; i < div.innerHTML.length; i++) | |
| 63 moveSelectionForwardByWordCommand(); | |
| 64 | 50 |
| 65 verifyMarkers(); | 51 // 'adlj', adaasj', 'sdklj'. |
| 66 } | 52 const spellingMarkerRanges = [[8, 4], [13, 6], [20, 5]]; |
| 67 | 53 |
| 68 function verifyMarkers() | 54 // 'the', 'there'. |
| 69 { | 55 const grammarMarkerRanges = [[4, 3], [33, 5]]; |
| 70 if (!window.internals) | |
| 71 return done(); | |
| 72 | 56 |
| 73 // Take care of spelling markers first. | 57 ['testLTR', 'testRTL', 'testLTREllipses', 'testRTLEllipses'].forEach(id => { |
| 74 shouldBecomeEqual('internals.hasSpellingMarker(document, 8, 4)', 'true', fun
ction() { // Verifies 'adlj'. | 58 const div = document.getElementById(id); |
| 75 shouldBecomeEqual('internals.hasSpellingMarker(document, 13, 6)', 'true'
, function() { // Verifies 'adaasj'. | 59 const text = div.firstChild; |
| 76 shouldBecomeEqual('internals.hasSpellingMarker(document, 20, 5)', 't
rue', verifyGrammarMarkers) // Verifies 'sdklj'. | |
| 77 }) | |
| 78 }); | |
| 79 | 60 |
| 80 function verifyGrammarMarkers() { | 61 spellingMarkerRanges.forEach(markerRange => { |
| 81 shouldBecomeEqual('internals.hasGrammarMarker(document, 4, 3)', 'true',
function() { // Verifies second 'the'. | 62 const range = document.createRange(); |
| 82 shouldBecomeEqual('internals.hasGrammarMarker(document, 33, 5)', 'tr
ue', function() { // Verifies second 'there'. | 63 range.setStart(text, markerRange[0]); |
| 83 // Markers of next element can not be found after modification s
election without blur event. | 64 range.setEnd(text, markerRange[0] + markerRange[1]); |
| 84 div.blur(); | 65 if (window.internals) |
| 85 done(); | 66 internals.setMarker(document, range, 'spelling'); |
| 86 }) | 67 }); |
| 87 }); | |
| 88 } | |
| 89 } | |
| 90 | 68 |
| 91 var tests = [ function() { moveCursorOverAllWords('testLTR'); }, | 69 grammarMarkerRanges.forEach(markerRange => { |
| 92 function() { moveCursorOverAllWords('testRTL'); }, | 70 const range = document.createRange(); |
| 93 function() { moveCursorOverAllWords('testLTREllipses'); }, | 71 range.setStart(text, markerRange[0]); |
| 94 function() { moveCursorOverAllWords('testRTLEllipses'); } ]; | 72 range.setEnd(text, markerRange[0] + markerRange[1]); |
| 95 | 73 if (window.internals) |
| 96 function done() | 74 internals.setMarker(document, range, 'grammar'); |
| 97 { | 75 }); |
| 98 var next = tests.shift(); | 76 }); |
| 99 if (next) | |
| 100 return window.setTimeout(next, 0); | |
| 101 | |
| 102 finishJSTest(); | |
| 103 } | |
| 104 done(); | |
| 105 </script> | 77 </script> |
| 106 </body> | 78 </body> |
| 107 </html> | 79 </html> |
| OLD | NEW |