<!DOCTYPE html>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<meta name="color-scheme" content="dark">
<!-- Tests various permutations of composition underlines in LTR and RTL text using
CSS color scheme dark.
These are normally used by foreign language IME (Input Method Extension). -->
<div dir="rtl" style="float: right; color-scheme: dark;">
<p>RTL</p>
<div id="markRtlAll" dir="rtl" style="color-scheme: dark;">abcdef</div>
<div id="markRtlAllThick" style="color-scheme: dark;">abcdef</div>
<div id="markRtlAllDotted" style="color-scheme: dark;">abcdef</div>
<div id="markRtlAllDashed" style="color-scheme: dark;">abcdef</div>
<div id="markRtlAllSquiggled" style="color-scheme: dark;">abcdef</div>
<div id="markRtlNone" style="color-scheme: dark;">abcdef</div>
</div>
<div style="float: left; color-scheme: dark;">
<p>LTR</p>
<div id="markAll" style="color-scheme: dark;">abcdef</div>
<div id="markAllThick" style="color-scheme: dark;">abcdef</div>
<div id="markAllDotted" style="color-scheme: dark;">abcdef</div>
<div id="markAllDashed" style="color-scheme: dark;">abcdef</div>
<div id="markAllSquiggled" style="color-scheme: dark;">abcdef</div>
<div id="markAllNone" style="color-scheme: dark;">abcdef</div>
</div>
<script>
function highlightRange(elem, start, end, underlineColor, thick, underlineStyle, 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, underlineStyle, 'transparent', backgroundColor);
};
function highlightRangeSimple(elem, start, end) {
highlightRange(elem, start, end, 'orange', 'thin', 'solid', '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', 'solid', 'transparent', 'lightBlue');
};
onload = runAfterLayoutAndPaint(function() {
highlightRangeSimple(markAll, 0, 6);
highlightRange(markAllThick, 0, 6, 'orange', 'thick', 'solid', 'lightBlue');
highlightRange(markAllDotted, 0, 6, 'orange', 'thick', 'dot', 'lightBlue');
highlightRange(markAllDashed, 0, 6, 'orange', 'thick', 'dash', 'lightBlue');
highlightRange(markAllSquiggled, 0, 6, 'orange', 'thick', 'squiggle', 'lightBlue');
highlightRange(markAllNone, 0, 6, 'orange', 'thick', 'none', 'lightBlue');
highlightRangeSimple(markRtlAll, 0, 6);
highlightRange(markRtlAllThick, 0, 6, 'orange', 'thick', 'solid', 'lightBlue');
highlightRange(markRtlAllDotted, 0, 6, 'orange', 'thick', 'dot', 'lightBlue');
highlightRange(markRtlAllDashed, 0, 6, 'orange', 'thick', 'dash', 'lightBlue');
highlightRange(markRtlAllSquiggled, 0, 6, 'orange', 'thick', 'squiggle', 'lightBlue');
highlightRange(markRtlNone, 0, 6, 'orange', 'thick', 'none', 'lightBlue');
}, true);
</script>
Codebase Browser
chromium