Bug 210875 – Caret does not paint correctly in vertical SVG text

• Status: NEW
• Component: SVG

[Daniel Bates]

Consider the .svg page with the following markup:
[[
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g writing-mode="vertical-lr">
    <text id="text" font-size="50" x="50" y="50" style="-webkit-user-modify: read-write" tabindex="0">Hello</text>
</g>
<script>
window.getSelection().setBaseAndExtent(document.getElementById('text').firstChild, 0, document.getElementById('text').firstChild, 0);
</script>
</svg>
]]

Open the page. You should see a horizontal caret before the 'h'. On iOS I see a vertical caret to the left of the 'h' and on Mac I see a horizontal caret only on first load between 'l' and 'l'.

[Radar WebKit Bug Importer]

<rdar://problem/62212006>

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.5 on macOS 12.4 and Safari Technical Preview 148 (based on described of caret showing up on first load between "l" vertically.

I also changed the test case into following JSFiddle - https://jsfiddle.net/gcmr2s1p/show

On other browsers, Chrome Canary 105 does not show caret upon selection and just show selection border (also no weird horizontal block like Safari to shape like "L" of Tetris game) while Firefox Nightly 104 does not show selection border unless if I select all text. Thanks!