Bug 258697

Summary: outline with border-radius on wrapped span does not apply radius to all corners
Product: WebKit Reporter: Tom Hamming <tom.hamming>
Component: Layout and RenderingAssignee: alan baradlay <zalan>
Status: NEW    
Severity: Normal CC: benoit.rouleau, bfulgham, simon.fraser, tom.hamming, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: Mac (Apple Silicon)   
OS: macOS 13   
See Also: https://bugs.webkit.org/show_bug.cgi?id=229078
Attachments:
Description Flags
Sample HTML file
none
Chrome screenshot
none
Safari 16 screenshot
none
Safari Technical Preview 173 screenshot
none
Patch
none
sample HTML screenshot (with patch applied)
none
Multiline screenshot
none
Patch ews-feeder: commit-queue-

Tom Hamming
Reported 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.
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, alan baradlay 		no flags
DetailsFormatted DiffDiff
sample HTML screenshot (with patch applied) (39.22 KB, image/png)
2023-07-04 14:56 PDT, alan baradlay 		no flags
Details
Multiline screenshot (108.73 KB, image/png)
2023-07-04 14:56 PDT, alan baradlay 		no flags
Details
Patch (11.20 KB, patch)
2023-07-04 15:18 PDT, alan baradlay 		ews-feeder: commit-queue-
DetailsFormatted DiffDiff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Tom Hamming
Comment 1 2023-06-29 15:44:44 PDT
Created attachment 466873 [details] Chrome screenshot
Tom Hamming
Comment 2 2023-06-29 15:46:07 PDT
Created attachment 466874 [details] Safari 16 screenshot
Tom Hamming
Comment 3 2023-06-29 15:46:44 PDT
Created attachment 466875 [details] Safari Technical Preview 173 screenshot
Tom Hamming
Comment 4 2023-06-29 15:50:56 PDT
By browserspy.com in my first comment I meant https://browserspy.dk/googlechrome.php
alan baradlay
Comment 5 2023-07-04 14:54:49 PDT
Created attachment 466922 [details] Patch
alan baradlay
Comment 6 2023-07-04 14:56:09 PDT
Created attachment 466923 [details] sample HTML screenshot (with patch applied)
alan baradlay
Comment 7 2023-07-04 14:56:30 PDT
Created attachment 466924 [details] Multiline screenshot
alan baradlay
Comment 8 2023-07-04 15:18:54 PDT
Created attachment 466926 [details] Patch
Radar WebKit Bug Importer
Comment 9 2023-07-06 15:44:18 PDT
<rdar://problem/111874508>
Benoît Rouleau
Comment 10 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).
Benoît Rouleau
Comment 11 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.
Note You need to log in before you can comment on or make changes to this bug.