| <!DOCTYPE html> |
| <script src="../../resources/ahem.js"></script> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <style> |
| @font-face { |
| font-family: 'testFont'; |
| src: url('../../resources/opensans/OpenSans-Regular.woff') format("woff"); |
| } |
| |
| body { |
| writing-mode: vertical-rl; |
| } |
| div { |
| width: 30px; |
| height: 150px; |
| font: 20px testFont; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: pre; |
| } |
| </style> |
| |
| <div id="markAllComposition">pppppppppppppppppp</div> |
| <div id="markStartComposition">pppppppppppppppppp</div> |
| <div id="markEndComposition">pppppppppppppppppp</div> |
| <br> |
| <div id="markAllSpelling">pppppppppppppppppp</div> |
| <div id="markStartSpelling">pppppppppppppppppp</div> |
| <div id="markEndSpelling">pppppppppppppppppp</div> |
| <br> |
| <div id="markAllTextMatch">pppppppppppppppppp</div> |
| <div id="markStartTextMatch">pppppppppppppppppp</div> |
| <div id="markEndTextMatch">pppppppppppppppppp</div> |
| |
| <script> |
| function addCompositionMarker(elem, start, end) { |
| const range = document.createRange(); |
| const textNode = elem.firstChild; |
| range.setStart(textNode, start); |
| range.setEnd(textNode, end); |
| if (typeof internals !== 'undefined') |
| internals.addCompositionMarker(range, 'orange', 'thin', 'lightBlue'); |
| }; |
| |
| function addSpellingMarker(elem, start, end) { |
| const range = document.createRange(); |
| const textNode = elem.firstChild; |
| range.setStart(textNode, start); |
| range.setEnd(textNode, end); |
| if (typeof internals !== 'undefined') |
| internals.setMarker(document, range, 'spelling'); |
| }; |
| |
| function addTextMatchMarker(elem, start, end) { |
| const range = document.createRange(); |
| const textNode = elem.firstChild; |
| range.setStart(textNode, start); |
| range.setEnd(textNode, end); |
| if (typeof internals !== 'undefined') { |
| internals.addTextMatchMarker(range, 'kActive'); |
| internals.setMarkedTextMatchesAreHighlighted(document, true); |
| } |
| }; |
| |
| onload = runAfterLayoutAndPaint(function() { |
| addCompositionMarker(markAllComposition, 0, 18); |
| addCompositionMarker(markStartComposition, 0, 9); |
| addCompositionMarker(markEndComposition, 7, 18); |
| |
| addSpellingMarker(markAllSpelling, 0, 15); |
| addSpellingMarker(markStartSpelling, 0, 9); |
| addSpellingMarker(markEndSpelling, 7, 15); |
| |
| addTextMatchMarker(markAllTextMatch, 0, 16); |
| addTextMatchMarker(markStartTextMatch, 0, 9); |
| addTextMatchMarker(markEndTextMatch, 7, 16); |
| }, true); |
| </script> |
