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