Index: third_party/WebKit/LayoutTests/editing/composition-marker-basic.html |
diff --git a/third_party/WebKit/LayoutTests/editing/composition-marker-basic.html b/third_party/WebKit/LayoutTests/editing/composition-marker-basic.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..ec202974265265c65856a004e9da3581984c2445 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/editing/composition-marker-basic.html |
@@ -0,0 +1,71 @@ |
+<!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', false, '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', false, 'lightBlue'); |
+}; |
+ |
+onload = runAfterLayoutAndPaint(function() { |
+ highlightRangeSimple(markAll, 0, 6); |
+ highlightRange(markAllThick, 0, 6, 'orange', true, 'lightBlue'); |
+ highlightRange(markAllDifferentColors, 0, 6, 'purple', true, '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', true, '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> |