Bug 259646

Summary:

[svg] applying `rx` or `ry` through CSS exclusively has no effect

Product:

WebKit

Reporter:

kari.pihkala

Component:

SVG

Assignee:

Antoine Quint <graouts>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

dino, graouts, jbstrater, karlcow, sabouhallawa, webkit-bug-importer, zimmermann

Priority:

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

Description kari.pihkala 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.

Comment 1 Radar WebKit Bug Importer 2023-08-07 06:48:18 PDT

<rdar://problem/113500023>

Comment 2 Antoine Quint 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.

Comment 3 Antoine Quint 2023-12-12 07:04:13 PST

Pull request: https://github.com/WebKit/WebKit/pull/21679

Comment 4 Antoine Quint 2023-12-12 07:04:36 PST

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/43629

Comment 5 EWS 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.

Comment 6 Said Abou-Hallawa 2023-12-18 09:46:54 PST

*** Bug 266090 has been marked as a duplicate of this bug. ***