Cannot escape Id-value in SVG animation timing attributes

• Component: SVG
• Status: NEW ---

Created attachment 62381 [details]
Test case

The SVG spec states that <a href="http://www.w3.org/TR/SVG/animate.html#TimingAttributes">Id-values may be used as parts of certain kinds of timing values</a> on SVG animation elements (such as syncbase-values used for the begin and end attributes) and references the SMIL Animation spec for normativity.  The SMIL Animation spec states that, as XML IDs are permitted to have the dot (.) separator, <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#TimingAttrValGrammars">identifiers may be escaped with the backslash</a>.  Webkit currently does not support escaping dot characters in timing values, however.

The attached file provides a simple example in which a filled path should slowly change from black to red over 3 seconds.  A second animate element has been added to begin 3 seconds after the end of the first animation and should fade the fill back to black by referencing the first animation, whose ID has been properly escaped in the begin attribute.  Batik correctly performs both animations.  Webkit only performs the first.

This should be a pretty quick fix in SVGSMILElement.cpp (SVGSMILElement::parseCondition).

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.5 on macOS 12.4 and Technical Preview 146. It is also reproducible in Chrome Canary 104.

Only in Firefox Nightly 102, the black box animation have second loop to go back to black after three seconds.

Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/94260935>

[Ahmad Saleem]

Just for reference:

Webkit File - https://github.com/WebKit/WebKit/blob/main/Source/WebCore/svg/animation/SVGSMILElement.cpp#L377

In Firefox Source Code - how they are doing "escaping dot".

https://searchfox.org/mozilla-central/source/dom/smil/SMILParserUtils.cpp#251