Bug 217286 – CSS transform doesn't override transform attribute on SVG element

• Component: SVG
• Status: NEW

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.

[Radar WebKit Bug Importer]

<rdar://problem/69934881>

[Antoine Quint]

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.

[Antoine Quint]

Created attachment 411749 [details]
Testcase

[Antoine Quint]

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.

[Antoine Quint]

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 :)

[Ahmad Saleem]

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!