RESOLVED INVALID 180392
REGRESSION(r217236): CSS animation with SVG element does not use the correct transform-origin 
https://bugs.webkit.org/show_bug.cgi?id=180392
Summary REGRESSION(r217236): CSS animation with SVG element does not use the correct ...
Said Abou-Hallawa
Reported 2017-12-04 19:32:07 PST
Created attachment 328427 [details] test case Open the attached test case in WebKit Result: It seems the green rectangle rotates around the center of the SVG. The "transform-origin: 50% 50%" seems to be translated as the center to the SVG itself. Expected: The transform-origin should be at the center of the rectangle. The green rectangle should be rotating inside the red circle.
Attachments
test case (581 bytes, image/svg+xml)
2017-12-04 19:32 PST, Said Abou-Hallawa 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Said Abou-Hallawa
Comment 1 2017-12-04 19:32:45 PST
<rdar://problem/33826188>
Said Abou-Hallawa
Comment 2 2017-12-05 11:39:04 PST
This is a regression from <http://trac.webkit.org/changeset/217236>. If the change from this patch in SVGGraphicsElement::animatedLocalTransform() is removed the bug is not reproducible.
Simon Fraser (smfr)
Comment 3 2017-12-05 11:42:46 PST
https://www.w3.org/TR/css-transforms-1/#transform-box says "For SVG elements without an associated CSS layout box, the used value for border-box is view-box." so you need to set transform-box: fill-box to get the desired effect.
Said Abou-Hallawa
Comment 4 2017-12-05 12:13:30 PST
The latest version of Chrome Canary and FireFox matches the WebKit behavior.
Note You need to log in before you can comment on or make changes to this bug.