Bug 218694 - SVG rects with corner radii and extremely thick strokes are drawn weirdly
Summary: SVG rects with corner radii and extremely thick strokes are drawn weirdly
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-11-08 12:40 PST by Myles C. Maxfield
Modified: 2023-09-18 16:31 PDT (History)
5 users (show)

See Also:

Attachments
Repro (1.21 KB, image/svg+xml)
2020-11-08 12:40 PST, Myles C. Maxfield 		no flags Details
Reduced test case (286 bytes, text/html)
2020-11-17 13:38 PST, Said Abou-Hallawa 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Myles C. Maxfield 2020-11-08 12:40:06 PST 
Created attachment 413546 [details]
Repro

See https://jsfiddle.net/68kc4m5n/1/

Compare rendering of WebKit between Firefox and Chrome.
Comment 1 Myles C. Maxfield 2020-11-08 12:41:07 PST 
See also: https://twitter.com/iampiny/status/1325485150466150400
Comment 2 Radar WebKit Bug Importer 2020-11-15 12:41:45 PST 
<rdar://problem/71418473>
Comment 3 Said Abou-Hallawa 2020-11-17 13:38:03 PST 
Created attachment 414382 [details]
Reduced test case

I am attaching another test case which show two rectangles both have fill=none and stroke-width=200. The second one has rx="30" ry="30". In WebKit and in FireFox, the rx and the ry are applied from outside the rectangle and from inside it as well. So the second rectangle is rendered as a hollow circle. In Chrome the rx and the ry are applied from outside the rectangle only. So it appears as an opaque rectangle.
Comment 4 Ahmad Saleem 2023-09-18 16:31:30 PDT 
WebKit ToT matches with Chrome Canary 119 while Firefox Nightly 119 differ from both in both test cases.