SMIL:CSS Animation
Contents
Current status
There's an existing smil_css patch in dholbert's smil-patches patch-queue. This patch applies on top of the other patches in the queue, and it makes use of a simple "getOverrideStyle
" implementation in order to set styles.
The smil_css patch is not complete yet -- it currently has these limitations:
- It can only animate CSS properties of type
nsCSSValue
. (notnsCSSValuePair
/nsCSSValueRect
/ etc) - It can only currently interpolate between fixed-length units. (inch, mm, pt, etc). (unit-conversion code needs a reference to the PresContext & font-metrics to interpolate/interconvert between fixed-length units / display pixels / em-units / ex-units.)
Overview of Proposed Strategy
Animating CSS Style
As suggested in the documentation on the "SMIL Sandwich Model" in the smil-animation spec, I'm proposing that we use an implementation backed by getOverrideStyle()
.
Here's an overview of the steps required to animate a specific CSS property on a specific element, using getOverrideStyle()
, during a SMIL animation sample:
- Call
getOverrideStyle()
on the element, and from this, clear any existing value for the CSS property in question. (This ensures thatgetComputedStyle()
won't reflect any animation effects, so it can be used as a 'base value' for animation in the next step) - Perform SMIL interpolation & compositing for the CSS property, using
getComputedStyle()
as the base value. - Store the final composited value of the property in
getOverrideStyle()
.
Implementing getOverrideStyle()
Note that Gecko doesn't currently implement getOverrideStyle()
. Here's a basic outline of how this function could be implemented (& is implemeted in the patch linked above):
- Add a new
nsRefPtr<nsDOMCSSDeclaration> mOverrideStyle
member variable on eachnsStyledElement
, to be used as a backing store for that element's override style. - I've based the implementation of this largely on the content style rule in SVG. (See
mContentStyleRule
in nsSVGElement.h and nsSVGElement.cpp ) - The override style is queryable (& editable) via a new method
nsIContent::GetOverrideStyle
. By default, this method has an empty implementation, butnsStyledElement
overrides this method to return itsmOverrideStyle
. - The override style rule is read (& applied) in HTMLCSSStyleSheetImpl::RulesMatching, right after we read the inline style rule.
- See patch for more details (it's fairly small)