1395221 - SVG use instances do not inherit CSS-specified overrides of their source's attributes.

Status: RESOLVED INVALID

(Core :: SVG, defect, P2)

Description

[Thomas Wisniewski]

Attachment: testcase.html

In the attached testcase, the <symbol> has both the attribute fill="none" and the CSS fill:red. However, the red does not apply to <use> instances, when it should (all other browsers behave this way). As such the <use> instances end up with no fill, rather than a red fill, unlike in other browsers (Edge, Chrome, Safari).

The reason seems to be that since the CSS is applied specifically to the original symbol's path, it is not copied over to the instances as well. If I add in an old-school CSS hack (as in the comment in the attached test-case), then Firefox will also propagate the fill accordingly.

I'm unsure if this is an edge-case missed in bug 265894 or not, but I thought I'd mention it just in case.

Comment 1

[Robert Longson [:longsonr]]

I don't think this is valid per https://www.w3.org/TR/SVG2/struct.html#UseStyleInheritance and I don't think any other UA has implemented this part of SVG 2 yet either. Someone has to be first and this time it's us.

Comment 2

[Robert Longson [:longsonr]]

per https://www.w3.org/TR/SVG2/struct.html#UseStyleInheritance


If a CSS rule uses a complex selector to match an element based on its ancestors or siblings, and those ancestors or siblings are not cloned as part of the shadow tree, then that rule would no longer match the element instance.

Comment 3

[Thomas Wisniewski]

That's fine and good, but it's still an interop issue, given that every other major engine does this but Firefox. Should we simply ignore that?

Comment 4

[Robert Longson [:longsonr]]

You could always take it up with w3c (https://lists.w3.org/Archives/Public/www-svg/) they wrote the spec. We were much less interoperable before with our <use> implementation.