Bug 259646

Summary: [svg] applying `rx` or `ry` through CSS exclusively has no effect
Product: WebKit Reporter: kari.pihkala
Component: SVGAssignee: Antoine Quint <graouts>
Status: RESOLVED FIXED    
Severity: Normal CC: dino, graouts, jbstrater, karlcow, sabouhallawa, webkit-bug-importer, zimmermann
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=266090
https://github.com/web-platform-tests/wpt/pull/43629
Attachments:
Description Flags
rect-rx-animation.svg none

kari.pihkala
Reported 2023-07-31 06:47:52 PDT
Created attachment 467161 [details] rect-rx-animation.svg CSS animating the SVG <rect> element rx and ry radius properties has no effect. See the attached rect-rx-animation.svg or this fiddle: https://jsfiddle.net/861prg29/ The blue rectangle doesn't animate its radius as expected. The green rectangle does animate its radius, because it has its rx attribute set to a non-zero value. But, setting the attribute to a non-zero value shouldn't be necessary. The expected result is that both rectangles are animated. Note that animating the ry property has the same bug as the rx property. Tested on Safari 16.5.2 (18615.2.9.11.10) and Safari Tech Preview Release 174 (Safari 17.0, WebKit 18616.1.22.1). Firefox 115 and Chrome 115 animate both rectangles as expected.
Attachments
rect-rx-animation.svg (567 bytes, image/svg+xml)
2023-07-31 06:47 PDT, kari.pihkala 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2023-08-07 06:48:18 PDT
<rdar://problem/113500023>
Antoine Quint
Comment 2 2023-12-12 06:26:49 PST
Querying the computed style I can see that the animations is indeed applied through our style system. However, the rendering does not account for it. My guess is that we have a quick check for `rx` and `ry` being set on an element and not accounting for the RenderStyle. In fact this seems unrelated to animations and strictly a CSS integration with SVG problem since: … <rect width="50" height="50" rx="1" style="rx: 10px" /> will yield a rectangle with rounded corners while this: <rect width="50" height="50" style="rx: 10px" /> … will not. Clearly having the `rx` attribute is important for rendering of the `rx` value set through CSS.
Antoine Quint
Comment 3 2023-12-12 07:04:13 PST
Pull request: https://github.com/WebKit/WebKit/pull/21679
Antoine Quint
Comment 4 2023-12-12 07:04:36 PST
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/43629
EWS
Comment 5 2023-12-12 23:10:46 PST
Committed 271970@main (0eba4b6cab17): <https://commits.webkit.org/271970@main> Reviewed commits have been landed. Closing PR #21679 and removing active labels.
Said Abou-Hallawa
Comment 6 2023-12-18 09:46:54 PST
*** Bug 266090 has been marked as a duplicate of this bug. ***
Note You need to log in before you can comment on or make changes to this bug.