caret-eol-004.tentative.html (1190B)
1 <!DOCTYPE html> 2 <html lang=en class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Basic User Interface Test: end-of-line carets should be visible</title> 5 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> 6 <link rel="help" href="http://www.w3.org/TR/css4-ui/#caret-shape"> 7 <link rel="mismatch" href=reference/caret-eol-001.html> 8 <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."> 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 div { 12 font-size: 40px; 13 font-family: monospace; 14 width: 5ch; 15 caret-color: orange; 16 caret-shape: block; 17 caret-animation: manual; 18 outline: none; 19 overflow: hidden; 20 white-space: pre; 21 } 22 </style> 23 24 <p>Test passes if you see a orange text insertion caret at the end of the line below. 25 26 <div id=test contenteditable spellcheck="false">abcdefghijkl</div> 27 28 <script> 29 const t = document.querySelector("#test"); 30 window.getSelection().selectAllChildren(t); 31 window.getSelection().collapseToEnd(); 32 takeScreenshot(); 33 </script>