Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE html>
<html lang=en>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: end-of-line carets should be visible</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel=match href=reference/caret-eol-001.html>
<meta name="assert" content="Checks that carets positioned at the end of the line are shown even if they overflow. If the box has hidden overflow extending past the scrollport, the caret is display at the end of the visible line.">
<style>
div {
font-size: 40px;
font-family: monospace;
width: 5ch;
caret-color: orange;
caret-shape: block;
caret-animation: manual;
outline: none;
overflow: hidden;
white-space: pre;
}
</style>
<p>Test passes if you see a orange text insertion caret at the end of the line below.
<div id=test contenteditable spellcheck="false">abcdefghijkl</div>
<script>
const t = document.querySelector("#test");
window.getSelection().selectAllChildren(t);
window.getSelection().collapseToEnd();
</script>