1615948 - svg fill css transition issue when in defs

Status: NEW

(Core :: SVG, defect, P3)

Description

[Karl Dubost💡 :karlcow]

Attachment: end result renderings

1. Go to https://jsfiddle.net/46pen5jb/4/
2. click on the circle

The main issue encountered here is that the fill transition on the circle isn't played in Firefox when it is in defs/use tag

starting point. Changing to 10s the transition so to be able to see an effect.

• top: firefox nightly
• middle: safari tech preview
• bottom: chrome canary

https://webcompat.com/uploads/2020/2/af04eff0-e093-41b1-a32b-2ec016677460.jpg

clicking on the disc

• top: firefox nightly applies it right away with no visible transition
• middle: safari tech preview doesn't do anything
• bottom: chrome canary switches to black and then applies a transition

So we have 3 different behaviors.
I'm not sure what the spec says in these circumstances.

Comment 1

[Cameron McCormack (:heycam)]

The expectation is that animations can apply to cloned elements in a use shadow tree, and so I think the correct behavior should be to flip the value from the gradient paint server reference to orange at half-way through the transition (i.e., at 0.25 s). Changing the transition duration to be longer (e.g. 2s) makes it more apparent that the transition does not apply.

The script in that test modifies the fill attribute on the circle. The way the SVG 2 spec currently talks about modifications to subtrees referenced by use is:

The user agent must ensure that all mutations to the referenced document subtree are reflected in the shadow tree. This includes changes to elements, attributes, and text and other nodes.

but this does not say how to apply those changes. In Gecko, we blow away the entire shadow tree and re-clone it when we detect a mutation. This is maybe not great for performance, but it's easy to do. That does have the effect though of destroying the element that would have the transition running on it, and recreating a new one in its place. If we applied each DOM mutation exactly to the shadow tree as it occurred, then I suspect the transition would work.

Chrome Canary switching to black before orange is probably a bug in their local URL handling, maybe not preserving https://drafts.csswg.org/css-values-4/#url-local-url-flag during the transition.