Bug 269481

Summary: Animations do not work unless y1 / y2 are specified
Product: WebKit Reporter: Jamie Burchell <mail>
Component: SVGAssignee: Ahmad Saleem <ahmad.saleem792>
Status: RESOLVED FIXED    
Severity: Normal CC: ahmad.saleem792, graouts, karlcow, pdr, sabouhallawa, webkit-bug-importer, zimmermann
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 17   
Hardware: iPhone / iPad   
OS: iOS 17   
See Also: https://bugs.webkit.org/show_bug.cgi?id=88195
Attachments:
Description Flags
Local Build - Screen Recording - Working Test Case none

Jamie Burchell
Reported 2024-02-15 10:56:57 PST
The follow SVG should animate but will not unless y1="0" (the default) is added to the first linearGradient: <svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"> <linearGradient id="reuseme" gradientUnits="userSpaceOnUse" spreadMethod="reflect"> <stop offset="0" stop-color="red"/> <stop offset="1" stop-color="black"/> <animate attributeName="y1" dur="2s" repeatCount="indefinite" values="0%;150%;0%"/> </linearGradient> <linearGradient id="a" x1="22.677" x2="132.625" href="#reuseme"/> <rect fill="url(#a)" x="10" y="10" width="130" height="130"/> </svg>
Attachments
Local Build - Screen Recording - Working Test Case (4.49 MB, video/quicktime)
2024-02-16 00:02 PST, Ahmad Saleem
no flags
Jamie Burchell
Comment 1 2024-02-15 10:58:48 PST
Example SVGs and discovery of this bug here https://stackoverflow.com/a/78001315/4810214
Ahmad Saleem
Comment 2 2024-02-15 20:11:13 PST
It is reproducible on WebKit ToT (274787@main) and also in LBSE as well. Adding BrowserCompat since it is working fine in both Chrome Canary 123 and Firefox Nightly 124. Adding `Antoine` to get input, if it is something on Animation side and not SVG but as mentioned in StackOverflow and in Comment 0 - if added `y1="0"` then it works. So most probably could be an issue in SVG area.
Ahmad Saleem
Comment 3 2024-02-15 20:40:51 PST
Note - in commit: 257032@main, we fixed default values for linearGradient. Only thing I have tried so far is `LinearGradientAttributes.h`, I explicitly also updated this: struct LinearGradientAttributes : GradientAttributes { LinearGradientAttributes() : m_x1(SVGLengthMode::Width, "0%"_s) , m_y1(SVGLengthMode::Height, "0%"_s) , m_x2(SVGLengthMode::Width, "100%"_s) , m_y2(SVGLengthMode::Height, "0%"_s) , m_x1Set(false) , m_y1Set(false) , m_x2Set(false) , m_y2Set(false) { } but it didn't fix the test case.
Jamie Burchell
Comment 4 2024-02-15 23:14:07 PST
A simpler, minimally reproducible example SVG: <svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"> <linearGradient id="a"> <stop offset="0" stop-color="red"/> <stop offset="1" stop-color="black"/> <animate attributeName="y1" dur="2s" repeatCount="indefinite" values="0%;150%;0%"/> </linearGradient> <rect fill="url(#a)" x="10" y="10" width="130" height="130"/> </svg>
Ahmad Saleem
Comment 5 2024-02-16 00:00:55 PST
(In reply to Jamie Burchell from comment #4) > A simpler, minimally reproducible example SVG: > > <svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"> > <linearGradient id="a"> > <stop offset="0" stop-color="red"/> > <stop offset="1" stop-color="black"/> > <animate attributeName="y1" dur="2s" repeatCount="indefinite" > values="0%;150%;0%"/> > </linearGradient> > <rect fill="url(#a)" x="10" y="10" width="130" height="130"/> > </svg> Good news! I manage to fix this in local build and it is working but StackOverflow example is not working. Will do PR on weekend to get this over the line and get this sorted.
Ahmad Saleem
Comment 6 2024-02-16 00:02:56 PST
Created attachment 469917 [details] Local Build - Screen Recording - Working Test Case
Jamie Burchell
Comment 7 2024-02-16 01:00:54 PST
> Good news! I manage to fix this in local build and it is working but > StackOverflow example is not working. You should not expect the very first SVG example on that SO question to work on any platform as that was an error on my part. The other two examples should work.
Antoine Quint
Comment 8 2024-02-16 01:24:30 PST
Ahmad, as you worked out, this is most likely an SVG issue. Thanks for looking into this!
Ahmad Saleem
Comment 9 2024-02-17 04:58:33 PST
PR - https://github.com/WebKit/WebKit/pull/24683 Might need to mark few tests as failing expectations but in LBSE - it passes all of them, so big progress. All attached test in JSFiddle: https://jsfiddle.net/gz7keLdc/2/show
Radar WebKit Bug Importer
Comment 10 2024-02-22 10:57:31 PST
EWS
Comment 11 2026-03-30 14:54:58 PDT
Committed 310257@main (a6a8ca738974): <https://commits.webkit.org/310257@main> Reviewed commits have been landed. Closing PR #24683 and removing active labels.
Ahmad Saleem
Comment 12 2026-03-30 14:55:37 PDT
*** Bug 88195 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.