Bug 180392

Summary: REGRESSION(r217236): CSS animation with SVG element does not use the correct transform-origin
Product: WebKit Reporter: Said Abou-Hallawa <sabouhallawa>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: RESOLVED INVALID    
Severity: Normal CC: simon.fraser, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
test case none

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.