Last Comment Bug 536540 - support animation of CSS gradient values in nsStyleAnimation
: support animation of CSS gradient values in nsStyleAnimation
Status: NEW
: dev-doc-needed
Product: Core
Classification: Components
Component: CSS Parsing and Computation (show other bugs)
: Trunk
: All All
: -- normal with 18 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
: Jet Villegas (:jet)
Mentors:
Depends on:
Blocks: 537142 589920 594151
  Show dependency treegraph
 
Reported: 2009-12-23 04:56 PST by David Baron :dbaron: ⌚️UTC-10
Modified: 2016-07-23 13:03 PDT (History)
26 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
Test-case.html (1.01 KB, text/html)
2016-05-23 00:58 PDT, percyley
no flags Details
IE10.gif (217.40 KB, image/gif)
2016-05-23 00:59 PDT, percyley
no flags Details
Chrome&Safari.gif (1.55 MB, image/gif)
2016-05-23 01:00 PDT, percyley
no flags Details

Description David Baron :dbaron: ⌚️UTC-10 2009-12-23 04:56:42 PST
We should support animation of CSS gradient values (i.e., -moz-linear-gradient, -moz-radial-gradient) in nsStyleAnimation.

There's still some open debate on how animation of gradients should work.

(I don't have work in progress on this, but I'm trying to get bugs filed on animation/transition work that should happen for 3.7.)
Comment 1 David Baron :dbaron: ⌚️UTC-10 2009-12-23 04:58:08 PST
See also bug 536541 on SVG gradients.
Comment 2 Lea Verou 2011-03-21 05:16:00 PDT
Gradient interpolation is now defined by the spec: http://www.w3.org/TR/css3-images/#interpolating-gradients
Comment 3 Christian Fischer 2012-01-07 13:56:18 PST
/me want to help.

But i do not know where to start.

I need to animate the -moz-radial-gradient.
Comment 4 percyley 2016-05-23 00:58:33 PDT
Created attachment 8755319 [details]
Test-case.html
Comment 5 percyley 2016-05-23 00:59:25 PDT
Created attachment 8755320 [details]
IE10.gif
Comment 6 percyley 2016-05-23 01:00:13 PDT
Created attachment 8755321 [details]
Chrome&Safari.gif
Comment 7 percyley 2016-05-23 01:08:53 PDT
In this test case[1]:

* IE10 has supported gradient animation.
* Chrome and Safari has supported image animation(Like cross-fade()[1]).
* Firefox at least should do a simple transition(direct display of different images), rather than nothing.

Related animation how to calculate the spec here[2], The current spec is already CR.

[1] https://bugzilla.mozilla.org/attachment.cgi?id=8755319
[2] https://drafts.csswg.org/css-images/#cross-fade-function
[3] https://drafts.csswg.org/css-images/#interpolation

Note You need to log in before you can comment on or make changes to this bug.