| <!doctype html> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <!-- Tests various permutations of active suggestion underlines in LTR and RTL |
| text. --> |
| <div dir="rtl" style="float: right;"> |
| <p>RTL</p> |
| <div contenteditable id="markRtlAll" dir="rtl">markRtlAll</div> |
| <div contenteditable id="markRtlAllThick">markRtlAllThick</div> |
| <div contenteditable id="markRtlBeginning">markRtlBeginning</div> |
| <div contenteditable id="markRtlAllExceptFirstAndLast">markRtlAllExceptFirstAndLast</div> |
| <div contenteditable id="markRtlEnd">markRtlEnd</div> |
| <div contenteditable id="markRtlAcrossNodes"><div>mark<span>Rtl</span></div><div>AcrossNodes</div></div> |
| </div> |
| |
| <div style="float: left;"> |
| <p>LTR</p> |
| <div contenteditable id="markAll">markAll</div> |
| <div contenteditable id="markAllThick">markAllThick</div> |
| <div contenteditable id="markAllDifferentColors">markAllDifferentColors</div> |
| <div contenteditable id="markBeginning">markBeginning</div> |
| <div contenteditable id="markAllExceptFirstAndLast">markAllExceptFirstAndLast</div> |
| <div contenteditable id="markEnd">markEnd</div> |
| <div contenteditable id="markNothingZero">markNothingZero</div> |
| <div contenteditable id="markNothingEnd">markNothingEnd</div> |
| <div contenteditable id="markAcrossNodes"><div>mark<span>Across</span></div><div>Nodes</div></div> |
| <div contenteditable id="overridingSpellingMarkerAtBeginning">overridingSpellingMarkerAtBeginning</div> |
| <div contenteditable id="overridingSpellingMarkerAtEnd">overridingSpellingMarkerAtEnd</div> |
| <div contenteditable id="overridingSpellingMarkerIntersectingBeginning">overridingSpellingMarkerIntersectingBeginning</div> |
| <div contenteditable id="overridingSpellingMarkerIntersectingEnd">overridingSpellingMarkerIntersectingEnd</div> |
| <div contenteditable id="notOverridingSpellingMarkersTouching">notOverridingSpellingMarkersTouching</div> |
| <div contenteditable id="overridingCompositionMarkerAtBeginning">overridingCompositionMarkerAtBeginning</div> |
| <div contenteditable id="overridingCompositionMarkerAtEnd">overridingCompositionMarkerAtEnd</div> |
| <div contenteditable id="overridingCompositionMarkerIntersectingBeginning">overridingCompositionMarkerIntersectingBeginning</div> |
| <div contenteditable id="overridingCompositionMarkerIntersectingEnd">overridingCompositionMarkerIntersectingEnd</div> |
| <div contenteditable id="notOverridingCompositionMarkersTouching">notOverridingCompositionMarkersTouching</div> |
| </div> |
| |
| <script> |
| function addSuggestionMarker(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.addSuggestionMarker(range, [], 'white', underlineColor, thick, backgroundColor); |
| }; |
| |
| function addCompositionMarker(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 addSpellingMarker(elem, start, end) { |
| var range = document.createRange(); |
| var textNode = elem.firstChild; |
| range.setStart(textNode, start); |
| range.setEnd(textNode, end); |
| if (typeof internals !== 'undefined') |
| internals.setMarker(document, range, 'spelling'); |
| } |
| |
| function addSuggestionMarkerSimple(elem, start, end) { |
| addSuggestionMarker(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.addSuggestionMarker(range, [], 'white', 'orange', 'thin', 'lightBlue'); |
| }; |
| |
| onload = runAfterLayoutAndPaint(function() { |
| addSuggestionMarkerSimple(markAll, 0, 7); |
| addSuggestionMarker(markAllThick, 0, 12, 'orange', 'thick', 'lightBlue'); |
| addSuggestionMarker(markAllDifferentColors, 0, 21, 'purple', 'thick', 'lightYellow'); |
| addSuggestionMarkerSimple(markBeginning, 0, 3); |
| addSuggestionMarkerSimple(markAllExceptFirstAndLast, 1, 24); |
| addSuggestionMarkerSimple(markEnd, 4, 7); |
| addSuggestionMarkerSimple(markNothingZero, 0, 0); |
| addSuggestionMarkerSimple(markNothingEnd, 6, 6); |
| |
| addSuggestionMarkerSimple(markRtlAll, 0, 10); |
| addSuggestionMarker(markRtlAllThick, 0, 15, 'orange', 'thick', 'lightBlue'); |
| addSuggestionMarkerSimple(markRtlBeginning, 0, 3); |
| addSuggestionMarkerSimple(markRtlAllExceptFirstAndLast, 1, 27); |
| addSuggestionMarkerSimple(markRtlEnd, 7, 10); |
| |
| highlightAcrossNodes(markAcrossNodes.childNodes[0].firstChild, 3, |
| markAcrossNodes.childNodes[1].firstChild, 3); |
| highlightAcrossNodes(markRtlAcrossNodes.childNodes[0].firstChild, 3, |
| markRtlAcrossNodes.childNodes[1].firstChild, 3); |
| |
| addSuggestionMarkerSimple(overridingSpellingMarkerAtBeginning, 0, 6); |
| addSpellingMarker(overridingSpellingMarkerAtBeginning, 0, 1); |
| |
| addSuggestionMarkerSimple(overridingSpellingMarkerAtEnd, 0, 6); |
| addSpellingMarker(overridingSpellingMarkerAtEnd, 5, 6); |
| |
| addSuggestionMarkerSimple(overridingSpellingMarkerIntersectingBeginning, 1, 5); |
| addSpellingMarker(overridingSpellingMarkerIntersectingBeginning, 0, 2); |
| |
| addSuggestionMarkerSimple(overridingSpellingMarkerIntersectingEnd, 1, 5); |
| addSpellingMarker(overridingSpellingMarkerIntersectingEnd, 4, 6); |
| |
| addSuggestionMarkerSimple(notOverridingSpellingMarkersTouching, 1, 5); |
| addSpellingMarker(notOverridingSpellingMarkersTouching, 0, 1); |
| addSpellingMarker(notOverridingSpellingMarkersTouching, 5, 6); |
| |
| addSuggestionMarkerSimple(overridingCompositionMarkerAtBeginning, 0, 6); |
| addCompositionMarker(overridingCompositionMarkerAtBeginning, 0, 1, 'purple', 'thick', 'lightYellow'); |
| |
| addSuggestionMarkerSimple(overridingCompositionMarkerAtEnd, 0, 6); |
| addCompositionMarker(overridingCompositionMarkerAtEnd, 5, 6, 'purple', 'thick', 'lightYellow'); |
| |
| addSuggestionMarkerSimple(overridingCompositionMarkerIntersectingBeginning, 1, 5); |
| addCompositionMarker(overridingCompositionMarkerIntersectingBeginning, 0, 2, 'purple', 'thick', 'lightYellow'); |
| |
| addSuggestionMarkerSimple(overridingCompositionMarkerIntersectingEnd, 1, 5); |
| addCompositionMarker(overridingCompositionMarkerIntersectingEnd, 4, 6, 'purple', 'thick', 'lightYellow'); |
| |
| addSuggestionMarkerSimple(notOverridingCompositionMarkersTouching, 1, 5); |
| addCompositionMarker(notOverridingCompositionMarkersTouching, 0, 1, 'purple', 'thick', 'lightYellow'); |
| addCompositionMarker(notOverridingCompositionMarkersTouching, 5, 6, 'purple', 'thick', 'lightYellow'); |
| }, true); |
| </script> |
