1513920 - Regression: SVG symbol element content can't be animated with CSS

Status: VERIFIED FIXED

(Core :: SVG, defect)

Description

[KariP]

Attachment: test case: symbol-css-animate.svg

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

Steps to reproduce:

1. Open the attached test case symbol-css-animate.svg or go to CodePen: https://codepen.io/anon/pen/roxxyg?editors=1100
2. Observe the SVG document, all three rectangles should be rotating.



Actual results:

Only the green rectangle is rotating. The red rectangles are not rotating.


Expected results:

All three rectangles should be rotating, including the red rectangles. The red rectangles are inside SVG <symbol>. It seems that CSS animations can't anymore animate the contents of the symbol element.

This used to work in Firefox 62.0. This doesn't work anymore in Firefox 63.0.

Google Chrome shows all three rectangles rotating.

Comment 1

[Gingerbread Man]

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0
20181213094243

https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=38e729d91ed2873b708bd4800b01b8433ffceabd&tochange=453d0a08f00c125ff6cc3905265e76efe641524e

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Ah, I see what happens. Thanks for the report... We clearly don't have enough tests for <svg:use>...

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1513920 - Make <use> shadow trees lookup keyframe rules in the containing tree.

The same thing we do for rule matching.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1b1eaa3248a7
Make <use> shadow trees lookup keyframe rules in the containing tree. r=heycam

Comment 5

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

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

Comment 6

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

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Comment 7

[Arthur Iakab [arthur_iakab]]

https://hg.mozilla.org/mozilla-central/rev/1b1eaa3248a7

Comment 8

[Arthur Iakab [arthur_iakab]]

https://hg.mozilla.org/mozilla-central/rev/1b1eaa3248a7

Comment 9

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

Upstream PR merged

Comment 10

[Ryan VanderMeulen [:RyanVM]]

Please nominate this for Beta approval when you get a chance.

Comment 11

[Emilio Cobos Álvarez [:emilio]]

Comment on attachment 9031407 [details]
Bug 1513920 - Make <use> shadow trees lookup keyframe rules in the containing tree.

[Beta/Release Uplift Approval Request]

Feature/Bug causing the regression: Bug 1450250

User impact if declined: Some animations in SVG may not be honored.

Is this code covered by automated tests?: Yes

Has the fix been verified in Nightly?: Yes

Needs manual test from QE?: Yes

If yes, steps to reproduce: See the test-case.

List of other uplifts needed: none

Risk to taking this patch: Low

Why is the change risky/not risky? (and alternatives if risky): Trivial fix contained to <svg:use>.

String changes made/needed: none

Comment 12

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9031407 [details]
Bug 1513920 - Make <use> shadow trees lookup keyframe rules in the containing tree.

[Triage Comment]
Fixes a regression causing some animated SVGs to not be animated. Approved for 65.0b6.

Comment 13

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/b3837d6171d2

Comment 14

[Emil Ghitta, QA [:emilghitta]]

I have managed to reproduce the issue described in comment 0 using Firefox 65.0b5.

This issue is verified fixed using Firefox 66.0a1 (BuildId:20181219220049) and Firefox 65.0b6 (provided in comment 13) on Windows 10 64bit, macOS 10.9 and Ubuntu 16.04 64bit.