Bug 258697 - outline with border-radius on wrapped span does not apply radius to all corners
Summary: outline with border-radius on wrapped span does not apply radius to all corners
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 16
Hardware: Mac (Apple Silicon) macOS 13
: P2 Normal
Assignee: zalan
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-06-29 15:43 PDT by Tom Hamming
Modified: 2023-07-30 18:40 PDT (History)
6 users (show)

See Also:


Attachments
Sample HTML file (536 bytes, text/html)
2023-06-29 15:43 PDT, Tom Hamming
no flags Details
Chrome screenshot (76.97 KB, image/png)
2023-06-29 15:44 PDT, Tom Hamming
no flags Details
Safari 16 screenshot (221.88 KB, image/png)
2023-06-29 15:46 PDT, Tom Hamming
no flags Details
Safari Technical Preview 173 screenshot (232.78 KB, image/png)
2023-06-29 15:46 PDT, Tom Hamming
no flags Details
Patch (11.25 KB, patch)
2023-07-04 14:54 PDT, zalan
no flags Details | Formatted Diff | Diff
sample HTML screenshot (with patch applied) (39.22 KB, image/png)
2023-07-04 14:56 PDT, zalan
no flags Details
Multiline screenshot (108.73 KB, image/png)
2023-07-04 14:56 PDT, zalan
no flags Details
Patch (11.20 KB, patch)
2023-07-04 15:18 PDT, zalan
ews-feeder: commit-queue-
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Tom Hamming 2023-06-29 15:43:35 PDT
Created attachment 466872 [details]
Sample HTML file

If I have a <span> element whose contents wrap across multiple lines and I apply outline and border-radius to it, the inner corners created by the wrapping aren't rounded. As of Chrome Version 114.0.5735.198 (WebKit 537.36 according to browserspy.com), it renders all corners as rounded.

I'm attaching a sample HTML file and screenshots of Chrome, Safari 16.5.1 on macOS 13.4.1, and Safari Technical Preview 173.
Comment 1 Tom Hamming 2023-06-29 15:44:44 PDT
Created attachment 466873 [details]
Chrome screenshot
Comment 2 Tom Hamming 2023-06-29 15:46:07 PDT
Created attachment 466874 [details]
Safari 16 screenshot
Comment 3 Tom Hamming 2023-06-29 15:46:44 PDT
Created attachment 466875 [details]
Safari Technical Preview 173 screenshot
Comment 4 Tom Hamming 2023-06-29 15:50:56 PDT
By browserspy.com in my first comment I meant https://browserspy.dk/googlechrome.php
Comment 5 zalan 2023-07-04 14:54:49 PDT
Created attachment 466922 [details]
Patch
Comment 6 zalan 2023-07-04 14:56:09 PDT
Created attachment 466923 [details]
sample HTML screenshot (with patch applied)
Comment 7 zalan 2023-07-04 14:56:30 PDT
Created attachment 466924 [details]
Multiline screenshot
Comment 8 zalan 2023-07-04 15:18:54 PDT
Created attachment 466926 [details]
Patch
Comment 9 Radar WebKit Bug Importer 2023-07-06 15:44:18 PDT
<rdar://problem/111874508>
Comment 10 Benoît Rouleau 2023-07-30 18:38:16 PDT
Interesting. I was actually going to report a bug that assumes the complete opposite, which is that an outline's "wrapped" corners should NOT follow the border radius by default (note that it does even before the above patch, but only when the second line is not long enough to "meet" the start of the `span` on the first line, e.g. if you remove the text "with long text" in the sample HTML file you'll see what I mean). My reasoning is that by default, `-webkit-box-decoration-break` is `slice` and so the border radius should only apply to the left side of the first line and the right side of the last line. However, I agree that when `-webkit-box-decoration-break` is `clone`, this bug is valid (`-webkit-box-decoration-break` currently has no effect whatsoever on the outline, it seems, despite having an effect on the border).
Comment 11 Benoît Rouleau 2023-07-30 18:40:20 PDT
Note that Firefox works exactly like I'd assume: `box-decoration-break` has an effect on the outline's radius. I think Chrome (and now Safari) are wrong here.