Bug 210875

Summary:	Caret does not paint correctly in vertical SVG text
Product:	WebKit	Reporter:	Daniel Bates <dbates>
Component:	SVG	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	ahmad.saleem792, ap, bfulgham, megan_gardner, rniwa, sabouhallawa, webkit-bug-importer, wenson_hsieh, zimmermann
Priority:	P2	Keywords:	InRadar
Version:	WebKit Local Build
Hardware:	Unspecified
OS:	Unspecified
See Also:	https://bugs.webkit.org/show_bug.cgi?id=210877 https://bugs.webkit.org/show_bug.cgi?id=210885

Description Daniel Bates 2020-04-22 14:13:30 PDT

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'.

Comment 1 Radar WebKit Bug Importer 2020-04-22 14:47:31 PDT

<rdar://problem/62212006>

Comment 2 Ahmad Saleem 2022-07-10 11:48:16 PDT

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!