OLD | NEW |
(Empty) | |
| 1 <!doctype html> |
| 2 <script src="../resources/run-after-layout-and-paint.js"></script> |
| 3 <!-- Tests various permutations of active suggestion underlines in LTR and RTL |
| 4 text. --> |
| 5 <div dir="rtl" style="float: right;"> |
| 6 <p>RTL</p> |
| 7 <div id="markRtlAll" dir="rtl">abcdef</div> |
| 8 <div id="markRtlAllThick">abcdef</div> |
| 9 <div id="markRtlBeginning">abcdef</div> |
| 10 <div id="markRtlAllExceptFirstAndLast">abcdef</div> |
| 11 <div id="markRtlEnd">abcdef</div> |
| 12 <div id="markRtlAcrossNodes"><div>abcdef<span>ghijkl</span></div><div>mnopqr
</div></div> |
| 13 </div> |
| 14 |
| 15 <div style="float: left;"> |
| 16 <p>LTR</p> |
| 17 <div id="markAll">abcdef</div> |
| 18 <div id="markAllThick">abcdef</div> |
| 19 <div id="markAllDifferentColors">abcdef</div> |
| 20 <div id="markBeginning">abcdef</div> |
| 21 <div id="markAllExceptFirstAndLast">abcdef</div> |
| 22 <div id="markEnd">abcdef</div> |
| 23 <div id="markNothingZero">abcdef</div> |
| 24 <div id="markNothingEnd">abcdef</div> |
| 25 <div id="markAcrossNodes"><div>abcdef<span>ghijkl</span></div><div>mnopqr</d
iv></div> |
| 26 </div> |
| 27 |
| 28 <script> |
| 29 function highlightRange(elem, start, end, underlineColor, thick, backgroundColor
) { |
| 30 var range = document.createRange(); |
| 31 var textNode = elem.firstChild; |
| 32 range.setStart(textNode, start); |
| 33 range.setEnd(textNode, end); |
| 34 if (typeof internals !== 'undefined') |
| 35 internals.addActiveSuggestionMarker(range, underlineColor, thick, backgr
oundColor); |
| 36 }; |
| 37 |
| 38 function highlightRangeSimple(elem, start, end) { |
| 39 highlightRange(elem, start, end, 'orange', 'thin', 'lightBlue'); |
| 40 }; |
| 41 |
| 42 function highlightAcrossNodes(startNode, start, endNode, end) { |
| 43 var range = document.createRange(); |
| 44 range.setStart(startNode, start); |
| 45 range.setEnd(endNode, end); |
| 46 if (typeof internals !== 'undefined') |
| 47 internals.addActiveSuggestionMarker(range, 'orange', 'thin', 'lightBlue'
); |
| 48 }; |
| 49 |
| 50 onload = runAfterLayoutAndPaint(function() { |
| 51 highlightRangeSimple(markAll, 0, 6); |
| 52 highlightRange(markAllThick, 0, 6, 'orange', 'thick', 'lightBlue'); |
| 53 highlightRange(markAllDifferentColors, 0, 6, 'purple', 'thick', 'lightYellow
'); |
| 54 highlightRangeSimple(markBeginning, 0, 3); |
| 55 highlightRangeSimple(markAllExceptFirstAndLast, 1, 5); |
| 56 highlightRangeSimple(markEnd, 3, 6); |
| 57 highlightRangeSimple(markNothingZero, 0, 0); |
| 58 highlightRangeSimple(markNothingEnd, 6, 6); |
| 59 |
| 60 highlightRangeSimple(markRtlAll, 0, 6); |
| 61 highlightRange(markRtlAllThick, 0, 6, 'orange', 'thick', 'lightBlue'); |
| 62 highlightRangeSimple(markRtlBeginning, 0, 3); |
| 63 highlightRangeSimple(markRtlAllExceptFirstAndLast, 1, 5); |
| 64 highlightRangeSimple(markRtlEnd, 3, 6); |
| 65 |
| 66 highlightAcrossNodes(markAcrossNodes.childNodes[0].firstChild, 3, |
| 67 markAcrossNodes.childNodes[1].firstChild, 3); |
| 68 highlightAcrossNodes(markRtlAcrossNodes.childNodes[0].firstChild, 3, |
| 69 markRtlAcrossNodes.childNodes[1].firstChild, 3); |
| 70 }, true); |
| 71 </script> |
OLD | NEW |