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 |
||
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'.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
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!