| OLD | NEW |
| (Empty) |
| 1 <!doctype html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style> | |
| 5 .testDiv { | |
| 6 width: 200px; | |
| 7 height: 20px; | |
| 8 border: 1px solid black; | |
| 9 white-space: nowrap; | |
| 10 overflow: hidden; | |
| 11 transform: translateZ(0); | |
| 12 } | |
| 13 | |
| 14 .forcertl { | |
| 15 direction: rtl; | |
| 16 unicode-bidi: bidi-override; | |
| 17 } | |
| 18 | |
| 19 .ellipses { | |
| 20 text-overflow:ellipsis; | |
| 21 } | |
| 22 | |
| 23 </style> | |
| 24 </head> | |
| 25 <body> | |
| 26 <div id="warning"> | |
| 27 This test requires window.internals. If you use content_shell, | |
| 28 "--expose-internals-for-testing" command flag enables it. | |
| 29 </div> | |
| 30 | |
| 31 LTR | |
| 32 <div id="testLTR" class="testDiv" contenteditable="true">the the adlj adaasj sdk
lj. there there</div> | |
| 33 | |
| 34 RTL | |
| 35 <div id="testRTL" class="testDiv forcertl" contenteditable="true">the the adlj a
daasj sdklj. there there</div> | |
| 36 | |
| 37 LTR (text-overflow:ellipses) | |
| 38 <div id="testLTREllipses" class="testDiv ellipses" contenteditable="true">the th
e adlj adaasj sdklj. there there</div> | |
| 39 | |
| 40 RTL (text-overflow:ellipses) | |
| 41 <div id="testRTLEllipses" class="testDiv forcertl ellipses" contenteditable="tru
e">the the adlj adaasj sdklj. there there</div> | |
| 42 | |
| 43 <script> | |
| 44 if (window.internals) | |
| 45 document.getElementById('warning').style.display = 'none'; | |
| 46 if (window.testRunner) { | |
| 47 testRunner.setBackingScaleFactor( | |
| 48 2, | |
| 49 () => setTimeout(() => testRunner.notifyDone(), 0)); | |
| 50 } | |
| 51 | |
| 52 // This tests the correct placement of inline spelling and grammar markers in | |
| 53 // text. Markers should line up exactly under misspelled words in all cases. | |
| 54 | |
| 55 // 'adlj', adaasj', 'sdklj'. | |
| 56 const spellingMarkerRanges = [[8, 4], [13, 6], [20, 5]]; | |
| 57 | |
| 58 // 'the', 'there'. | |
| 59 const grammarMarkerRanges = [[4, 3], [33, 5]]; | |
| 60 | |
| 61 ['testLTR', 'testRTL', 'testLTREllipses', 'testRTLEllipses'].forEach(id => { | |
| 62 const div = document.getElementById(id); | |
| 63 const text = div.firstChild; | |
| 64 | |
| 65 spellingMarkerRanges.forEach(markerRange => { | |
| 66 const range = document.createRange(); | |
| 67 range.setStart(text, markerRange[0]); | |
| 68 range.setEnd(text, markerRange[0] + markerRange[1]); | |
| 69 if (window.internals) | |
| 70 internals.setMarker(document, range, 'spelling'); | |
| 71 }); | |
| 72 | |
| 73 grammarMarkerRanges.forEach(markerRange => { | |
| 74 const range = document.createRange(); | |
| 75 range.setStart(text, markerRange[0]); | |
| 76 range.setEnd(text, markerRange[0] + markerRange[1]); | |
| 77 if (window.internals) | |
| 78 internals.setMarker(document, range, 'grammar'); | |
| 79 }); | |
| 80 }); | |
| 81 </script> | |
| 82 </body> | |
| 83 </html> | |
| OLD | NEW |