| <!doctype html> |
| <script src="../resources/run-after-layout-and-paint.js"></script> |
| <!-- Tests various permutations of composition underlines in LTR and RTL text. |
| These are normally used by foreign language IME (Input Method Extension). --> |
| <div dir="rtl" style="float: right;"> |
| <p>RTL</p> |
| <div id="markRtlAll" dir="rtl">abcdef</div> |
| <div id="markRtlAllThick">abcdef</div> |
| <div id="markRtlBeginning">abcdef</div> |
| <div id="markRtlAllExceptFirstAndLast">abcdef</div> |
| <div id="markRtlEnd">abcdef</div> |
| <div id="markRtlAcrossNodes"><div>abcdef<span>ghijkl</span></div><div>mnopqr</div></div> |
| </div> |
| |
| <div style="float: left;"> |
| <p>LTR</p> |
| <div id="markAll">abcdef</div> |
| <div id="markAllThick">abcdef</div> |
| <div id="markAllDifferentColors">abcdef</div> |
| <div id="markBeginning">abcdef</div> |
| <div id="markAllExceptFirstAndLast">abcdef</div> |
| <div id="markEnd">abcdef</div> |
| <div id="markNothingZero">abcdef</div> |
| <div id="markNothingEnd">abcdef</div> |
| <div id="markAcrossNodes"><div>abcdef<span>ghijkl</span></div><div>mnopqr</div></div> |
| </div> |
| |
| <script> |
| function highlightRange(elem, start, end, underlineColor, thick, backgroundColor) { |
| var range = document.createRange(); |
| var textNode = elem.firstChild; |
| range.setStart(textNode, start); |
| range.setEnd(textNode, end); |
| if (typeof internals !== 'undefined') |
| internals.addCompositionMarker(range, underlineColor, thick, backgroundColor); |
| }; |
| |
| function highlightRangeSimple(elem, start, end) { |
| highlightRange(elem, start, end, 'orange', 'thin', 'lightBlue'); |
| }; |
| |
| function highlightAcrossNodes(startNode, start, endNode, end) { |
| var range = document.createRange(); |
| range.setStart(startNode, start); |
| range.setEnd(endNode, end); |
| if (typeof internals !== 'undefined') |
| internals.addCompositionMarker(range, 'orange', 'thin', 'lightBlue'); |
| }; |
| |
| onload = runAfterLayoutAndPaint(function() { |
| highlightRangeSimple(markAll, 0, 6); |
| highlightRange(markAllThick, 0, 6, 'orange', 'thick', 'lightBlue'); |
| highlightRange(markAllDifferentColors, 0, 6, 'purple', 'thick', 'lightYellow'); |
| highlightRangeSimple(markBeginning, 0, 3); |
| highlightRangeSimple(markAllExceptFirstAndLast, 1, 5); |
| highlightRangeSimple(markEnd, 3, 6); |
| highlightRangeSimple(markNothingZero, 0, 0); |
| highlightRangeSimple(markNothingEnd, 6, 6); |
| |
| highlightRangeSimple(markRtlAll, 0, 6); |
| highlightRange(markRtlAllThick, 0, 6, 'orange', 'thick', 'lightBlue'); |
| highlightRangeSimple(markRtlBeginning, 0, 3); |
| highlightRangeSimple(markRtlAllExceptFirstAndLast, 1, 5); |
| highlightRangeSimple(markRtlEnd, 3, 6); |
| |
| highlightAcrossNodes(markAcrossNodes.childNodes[0].firstChild, 3, |
| markAcrossNodes.childNodes[1].firstChild, 3); |
| highlightAcrossNodes(markRtlAcrossNodes.childNodes[0].firstChild, 3, |
| markRtlAcrossNodes.childNodes[1].firstChild, 3); |
| }, true); |
| </script> |
