Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-ui/caret-eol-004.tentative.html - WPT Dashboard Interop Dashboard
<!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>