Bug 180392 - REGRESSION(r217236): CSS animation with SVG element does not use the correct transform-origin
Summary: REGRESSION(r217236): CSS animation with SVG element does not use the correct ...
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-12-04 19:32 PST by Said Abou-Hallawa
Modified: 2017-12-05 12:13 PST (History)
3 users (show)

See Also:

Attachments
test case (581 bytes, image/svg+xml)
2017-12-04 19:32 PST, Said Abou-Hallawa 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Said Abou-Hallawa 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.
Comment 1 Said Abou-Hallawa 2017-12-04 19:32:45 PST 
<rdar://problem/33826188>
Comment 2 Said Abou-Hallawa 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.
Comment 3 Simon Fraser (smfr) 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.
Comment 4 Said Abou-Hallawa 2017-12-05 12:13:30 PST 
The latest version of Chrome Canary and FireFox matches the WebKit behavior.