31 lines
1.1 KiB
HTML
31 lines
1.1 KiB
HTML
<!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="help" href="http://www.w3.org/TR/css4-ui/#caret-shape">
|
|
<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>
|