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.
<rdar://problem/69934881>
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.
Created attachment 411749 [details] Testcase
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.
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 :)
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!