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