217286 2020-10-03 17:39:31 -0700 CSS transform doesn't override transform attribute on SVG element 2022-09-03 11:20:12 -0700 1 1 1 Unclassified WebKit SVG WebKit Nightly Build All All NEW InRadar P2 Normal --- 1 leewhite128 webkit-unassigned ahmad.saleem792 bfulgham dino graouts krit simon.fraser webkit-bug-importer zalan zimmermann oldest_to_newest 1694482 0 leewhite128 2020-10-03 17:39:31 -0700 User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:81.0) Gecko/20100101 Firefox/81.0 Steps to reproduce: Have SVG element with transform attribute and CSS transform set. Example: <svg> <style> circle {transform: none;} </style> <circle r="50" transform="scale(2)"/> </svg> Originally posted here: https://stackoverflow.com/questions/25926007/override-svg-transform-attributes-with-css Equivalent chromium issue: https://bugs.chromium.org/p/chromium/issues/detail?id=415950 Actual results: Transform didn't get set to none. Expected results: Transform should have been set to none, that way can easily set transform on multiple SVG elements at once if prefers-reduced-motion is on. 1694575 1 webkit-bug-importer 2020-10-04 14:25:15 -0700 <rdar://problem/69934881> 1699264 2 graouts 2020-10-19 08:55:12 -0700 I bet this is due to this in SVGGraphicsElement::animatedLocalTransform(): bool hasSpecifiedTransform = style && style->hasTransform(); I don't think this can tell whether the transform property was set explicitly on the element, it only checks whether there are operations in the StyleTransformData. We need a different call that determines whether the transform property was explicitly set on this element. 1699266 3 411749 graouts 2020-10-19 08:59:41 -0700 Created attachment 411749 Testcase 1699267 4 graouts 2020-10-19 09:00:14 -0700 The attached test only has the behavior expected by the originator in Chrome. In Firefox and Safari setting `transform: none` in CSS does not affect the element. 1699335 5 graouts 2020-10-19 11:34:30 -0700 Actually, if I understand the spec correctly, presentation attributes should be considered during style resolution, per https://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity: "The participation in the CSS cascade is determined by the specificity of presentation attributes in the SVG specification. According to SVG, user agents conceptually insert a new author style sheet for presentation attributes, which is the first in the author style sheet collection." So I think we should always be using what is set in the RenderStyle, assuming the RenderStyle accounts for presentation attributes :) 1896048 6 ahmad.saleem792 2022-09-03 11:19:59 -0700 I am not sure on web-spec but Safari 15.6.1, Safari Technology Preview 152 and Firefox Nightly 106 are matching each other in test case and showing circle 'bigger / larger' in size compared to Chrome Canary 107. Just wanted to share updated testing results. Thanks! 411749 2020-10-19 08:59:41 -0700 2020-10-19 08:59:41 -0700 Testcase css-transform-none-override-presentation-attribute.svg image/svg+xml 145 graouts PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8c3R5bGU+CmNpcmNsZSB7 IHRyYW5zZm9ybTogbm9uZSB9Cjwvc3R5bGU+CjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjUw IiB0cmFuc2Zvcm09InNjYWxlKDIpIi8+Cjwvc3ZnPg==