1717312 - SVG animate property locks attribute values on animation end

Status: RESOLVED FIXED

(Core :: SVG, defect, P3)

Description

[smigniot]

Attachment: Codepen_copy.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

Disclaimer: used safe mode, created a new profile, this issue is reproducible on latest Firefox on MacOS with absolute defaults.

The SVG "animate" child element allows animating an attribute XXX. After animation and after deleting the responsible "animate" element, the attribute XXX seems locked to the animated value.

Behavior reproducible : using https://codepen.io/hariseldon778/pen/vYxMOJz click on X=15 and X=35 : circle.cx is assigned properly. After clicking on Anim or DELAnim the circle.cx coordinate can't be assigned anymore by clicking on X=15 or X=35

Deduced : once an svg "circle" has an "animate" child element targeting attributeName "cx", then "cx" can't be assigned after animation.

Actual results:

Actual result : The circle didn't move - circle.cx is NOT assignable anymore after removing its SVG/SMIL animation

Expected results:

Expected result : The circle should have moved - circle.cx is thus expected assignable after removing its SVG/SMIL animation. (this seems actually implemented in Firefox for android, which produces the expected result)

Comment 1

[Robert Longson [:longsonr]]

This is correct. The SMIL value is now the value that the element has.

Comment 2

[smigniot]

With all due respect, does it mean I should open a bug in Firefox for Android ?
Firefox for android produces the result I expect - but an incorrect one as per your comment.

Comment 3

[Robert Longson [:longsonr]]

Sure, open a bug in Firefox in Android. Hopefully some deveoper with access to Android will look into it.

Comment 4

[smigniot]

Dear resolver. I stand by my analysis and would like you to please reconsider :

Both Firefox for Android and Chrome do the following :

1. During the animation layer validity, the presentation value, rendered in the document view has the computed value of the animation. In the attached example it means the circle scrolls because the animation asks it to. This does not affect the element.setAttribute("cx") or element.getAttribute("cx") which reflect the Document Object Model value
2. At the end of the animation validity, if the attribute "fill" is set to "freeze" then we could consider that the document is not ended and .. the animation is valid forever. In this case, in the provided example, the circle would not move because some other SMIL context would state "SMIL has not finished to have effects"
3. But at the end of the animation layer validity - and especially at the end of all animations when they all have the default fill="remove" the presentation value is released and becomes again equal to the DOM value (in the case of SMIL being applied to the host language SVG inside and HTML5 DOM)

The normative documentation is available here (archive.org link provided as w3.org is under maintenance at the time of this comment) :
https://web.archive.org/web/20210513024824/https://www.w3.org/TR/smil/smil-animation.html#animationNS-AnimationSandwichModel

In particular I draw your attention to : """ Although animation does not manipulate the OM values, the document display must reflect changes to the OM values """ and """ When the animations complete and the effect of each is no longer applied, the presentation value will be equal to the changed OM value. """

I'm just trying to stay rational and constructive : Of course feel free to point me to any contradictory part of the Norm (HTML5,SVG,SMIL) or to any Firefox for Desktop roadmap which point which parts of SMIL/which version is implemented.

I can't resolve myself to open a bug in Firefox for Android because I basically think they did it right and would honestly like Firefox for Desktop to do the same.

Respectfully

Comment 5

[Robert Longson [:longsonr]]

the animation doesn't complete though, you delete it. Feel free to raise an issue with w3c so they can clarify via https://github.com/w3c/svgwg/issues

Comment 6

[smigniot]

Done as https://github.com/w3c/svgwg/issues/859 - Thanks for your time and feedback.

In the provided example, the animation completes. The provided example allows reproducing both behaviors :

• Opening the codepen, click on Anim and wait 10s (the animation has completed), then clicking on X=15 button does not work
• Opening the codepen, click on Anim and on DELAnim before 8s (the animation gets deleted from the SVG DOM before being completed), which I understand does not seem to be specified (strictly speaking, the sentence should need to change e.g. from """When all non-additive animations complete and the effect of each is no longer applied""" to """When all non-additive animations (complete or have been destroyed) and the effect of each is no longer applied)"""

Comment 7

[Brian Birtles (:birtles)]

I see the same behavior in Firefox for Android. Perhaps there was a regression when the new hashmap types were introduced? Normally SMIL would set the animVal but the DOM getAttribute / setAttribute methods would work on the baseVal. However, when the animation is removed we should remove its contribution to the animVal. Perhaps we're failing to do that now (hence why calls to setAttribute appear to do nothing).

What version of Firefox for Android are you using?

Comment 8

[smigniot]

I see the same behavior in Firefox for Android

Not sure I understand. Firefox for Android works the expected way (after animation completes, the DOM value is used to position the SVG element on the screen, thus discarding the animated value)

What version of Firefox for Android are you using?

Firefox for Android 68.11.0 works the expected way
Firefox for Desktop 89.0.1 does not work - the DOM value is forever ignored once an animate element is added
Safari 13.1.1 works the expected way
Chrome 91.0.4472.106 works the expected way

Perhaps we're failing to do that now

Hope you're right - and that the bug is easy to spot

hence why calls to setAttribute appear to do nothing

Totally confirmed : they actually do something : they assign the DOM value. Getting/Setting the DOM value works : both the inspector show the last assigned value and getting the value after a setAttribute gives back the last assigned value. And yes, the value of the DOM is not used to position the element on the screen (in Firefox for Desktop, after the animation is either completed or removed from the SVG DOM)

Comment 9

[Robert Longson [:longsonr]]

I imagine that version of Firefox for Android is prior to the conversion of circle's cx/cy to styles rather than attributes. That's almost certainly why they are now different.

Comment 10

[smigniot]

Confirmed: Firefox "Nightly" for android has the same behavior (DOM properties are unused for presentation once animate is used)

Firefox Nightly tested : 91.0a1 (Build #2015817771)

Comment 11

[Robert Longson [:longsonr]]

https://treeherder.mozilla.org/jobs?repo=try&revision=4a1129bdd9d398a12c4fcfc27d77bb8b67f7421a

Comment 12

[Robert Longson [:longsonr]]

Attachment: Bug 1717312 - clear mapped values if we're not animating any more r=emilio

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8c1de03e7bef
clear mapped values if we're not animating any more r=emilio

Comment 14

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/8c1de03e7bef

Comment 15

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/42149 for changes under testing/web-platform/tests

Comment 16

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot