From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001
From: "Matt A. Tobin" <mattatobin@localhost.localdomain>
Date: Fri, 2 Feb 2018 04:16:08 -0500
Subject: Add m-esr52 at 52.6.0

---
 .../smil/style/anim-css-color-1-by-ident-hex.svg   |  17 +++
 .../style/anim-css-color-1-from-by-hex-hex.svg     |  18 +++
 .../style/anim-css-color-1-from-by-ident-hex.svg   |  18 +++
 .../style/anim-css-color-1-from-to-hex-hex.svg     |  18 +++
 .../style/anim-css-color-1-from-to-ident-ident.svg |  18 +++
 .../smil/style/anim-css-color-1-to-ident-hex.svg   |  17 +++
 .../smil/style/anim-css-color-1-to-ident-ident.svg |  17 +++
 .../svg/smil/style/anim-css-color-2-paced-rgb.svg  |  20 +++
 .../smil/style/anim-css-color-3-by-ident-ident.svg |  19 +++
 .../style/anim-css-color-3-from-by-ident-ident.svg |  20 +++
 .../style/anim-css-color-3-from-by-rgb-ident.svg   |  20 +++
 .../smil/style/anim-css-fill-1-by-ident-curcol.svg |  17 +++
 .../smil/style/anim-css-fill-1-by-ident-hex.svg    |  17 +++
 .../style/anim-css-fill-1-from-by-curcol-hex.svg   |  18 +++
 .../style/anim-css-fill-1-from-by-hex-curcol.svg   |  18 +++
 .../smil/style/anim-css-fill-1-from-by-hex-hex.svg |  18 +++
 .../style/anim-css-fill-1-from-by-ident-hex.svg    |  18 +++
 .../style/anim-css-fill-1-from-to-curcol-hex.svg   |  18 +++
 .../style/anim-css-fill-1-from-to-hex-curcol.svg   |  18 +++
 .../smil/style/anim-css-fill-1-from-to-hex-hex.svg |  18 +++
 .../style/anim-css-fill-1-from-to-ident-ident.svg  |  18 +++
 .../svg/smil/style/anim-css-fill-1-ref.svg         |  32 +++++
 .../smil/style/anim-css-fill-1-to-ident-curcol.svg |  17 +++
 .../smil/style/anim-css-fill-1-to-ident-hex.svg    |  17 +++
 .../smil/style/anim-css-fill-1-to-ident-ident.svg  |  17 +++
 .../svg/smil/style/anim-css-fill-2-paced-rgb.svg   |  20 +++
 .../svg/smil/style/anim-css-fill-2-ref.svg         |  32 +++++
 .../smil/style/anim-css-fill-3-by-ident-ident.svg  |  19 +++
 .../style/anim-css-fill-3-from-by-ident-ident.svg  |  20 +++
 .../style/anim-css-fill-3-from-by-rgb-ident.svg    |  20 +++
 .../svg/smil/style/anim-css-fill-3-ref.svg         |  32 +++++
 .../svg/smil/style/anim-css-fill-overflow-1-by.svg |  20 +++
 .../style/anim-css-fill-overflow-1-from-by.svg     |  21 +++
 .../smil/style/anim-css-fill-overflow-1-ref.svg    |  32 +++++
 .../svg/smil/style/anim-css-fillopacity-1-by.svg   |  17 +++
 .../smil/style/anim-css-fillopacity-1-from-by.svg  |  18 +++
 .../smil/style/anim-css-fillopacity-1-from-to.svg  |  18 +++
 .../svg/smil/style/anim-css-fillopacity-1-ref.svg  |  32 +++++
 .../svg/smil/style/anim-css-fillopacity-1-to.svg   |  17 +++
 .../smil/style/anim-css-fillopacity-2-paced.svg    |  18 +++
 .../svg/smil/style/anim-css-fillopacity-2-ref.svg  |  32 +++++
 .../style/anim-css-fillopacity-3-clamp-big.svg     |  27 ++++
 .../style/anim-css-fillopacity-3-clamp-small.svg   |  27 ++++
 .../svg/smil/style/anim-css-fillopacity-3-ref.svg  |  32 +++++
 .../svg/smil/style/anim-css-font-1-ref.svg         |  76 ++++++++++
 layout/reftests/svg/smil/style/anim-css-font-1.svg | 139 ++++++++++++++++++
 .../style/anim-css-fontsize-1-from-by-pct-pct.svg  |  16 +++
 .../style/anim-css-fontsize-1-from-by-pct-px.svg   |  16 +++
 .../style/anim-css-fontsize-1-from-by-px-pct.svg   |  16 +++
 .../style/anim-css-fontsize-1-from-by-px-px.svg    |  16 +++
 .../style/anim-css-fontsize-1-from-to-no-no.svg    |  17 +++
 .../style/anim-css-fontsize-1-from-to-no-px.svg    |  17 +++
 .../style/anim-css-fontsize-1-from-to-pct-pct.svg  |  16 +++
 .../style/anim-css-fontsize-1-from-to-pct-px.svg   |  16 +++
 .../style/anim-css-fontsize-1-from-to-px-no.svg    |  17 +++
 .../style/anim-css-fontsize-1-from-to-px-pct.svg   |  16 +++
 .../style/anim-css-fontsize-1-from-to-px-px.svg    |  16 +++
 .../svg/smil/style/anim-css-fontsize-1-ref.svg     |  20 +++
 .../style/anim-css-fontsize-2-from-by-em-em.svg    |  16 +++
 .../style/anim-css-fontsize-2-from-by-px-em.svg    |  16 +++
 .../style/anim-css-fontsize-2-from-by-px-px.svg    |  16 +++
 .../svg/smil/style/anim-css-fontsize-2-ref.svg     |  20 +++
 .../smil/style/anim-css-strokedasharray-1-ref.svg  |  32 +++++
 .../svg/smil/style/anim-css-strokedasharray-1.svg  |  18 +++
 .../smil/style/anim-css-strokewidth-1-by-em-em.svg |  18 +++
 .../smil/style/anim-css-strokewidth-1-by-em-px.svg |  18 +++
 .../smil/style/anim-css-strokewidth-1-by-no-no.svg |  17 +++
 .../style/anim-css-strokewidth-1-by-pct-pct.svg    |  18 +++
 .../style/anim-css-strokewidth-1-by-pct-px.svg     |  18 +++
 .../smil/style/anim-css-strokewidth-1-by-px-em.svg |  18 +++
 .../style/anim-css-strokewidth-1-by-px-pct.svg     |  18 +++
 .../smil/style/anim-css-strokewidth-1-by-px-px.svg |  17 +++
 .../style/anim-css-strokewidth-1-from-by-em-em.svg |  19 +++
 .../style/anim-css-strokewidth-1-from-by-em-px.svg |  19 +++
 .../style/anim-css-strokewidth-1-from-by-no-no.svg |  18 +++
 .../anim-css-strokewidth-1-from-by-pct-pct.svg     |  19 +++
 .../anim-css-strokewidth-1-from-by-pct-px.svg      |  19 +++
 .../style/anim-css-strokewidth-1-from-by-px-em.svg |  19 +++
 .../anim-css-strokewidth-1-from-by-px-pct.svg      |  19 +++
 .../style/anim-css-strokewidth-1-from-by-px-px.svg |  18 +++
 .../style/anim-css-strokewidth-1-from-to-em-em.svg |  19 +++
 .../style/anim-css-strokewidth-1-from-to-em-px.svg |  19 +++
 .../style/anim-css-strokewidth-1-from-to-no-no.svg |  18 +++
 .../anim-css-strokewidth-1-from-to-pct-pct.svg     |  19 +++
 .../anim-css-strokewidth-1-from-to-pct-px.svg      |  19 +++
 .../style/anim-css-strokewidth-1-from-to-px-em.svg |  19 +++
 .../anim-css-strokewidth-1-from-to-px-pct.svg      |  19 +++
 .../style/anim-css-strokewidth-1-from-to-px-px.svg |  18 +++
 .../svg/smil/style/anim-css-strokewidth-1-ref.svg  |  29 ++++
 .../smil/style/anim-css-strokewidth-1-to-em-em.svg |  18 +++
 .../smil/style/anim-css-strokewidth-1-to-em-px.svg |  18 +++
 .../smil/style/anim-css-strokewidth-1-to-no-no.svg |  17 +++
 .../style/anim-css-strokewidth-1-to-pct-pct.svg    |  18 +++
 .../style/anim-css-strokewidth-1-to-pct-px.svg     |  18 +++
 .../smil/style/anim-css-strokewidth-1-to-px-em.svg |  18 +++
 .../style/anim-css-strokewidth-1-to-px-pct.svg     |  18 +++
 .../smil/style/anim-css-strokewidth-1-to-px-px.svg |  17 +++
 .../svg/smil/style/anim-css-strokewidth-2-ref.svg  |  29 ++++
 .../style/anim-css-strokewidth-2-values-em-em.svg  |  18 +++
 .../style/anim-css-strokewidth-2-values-em-px.svg  |  18 +++
 .../style/anim-css-strokewidth-2-values-px-em.svg  |  18 +++
 .../style/anim-css-strokewidth-2-values-px-px.svg  |  17 +++
 .../smil/style/anim-css-strokewidth-3-paced.svg    |  18 +++
 .../svg/smil/style/anim-css-strokewidth-3-ref.svg  |  29 ++++
 .../style/anim-css-strokewidth-4-from-by-em-em.svg |  19 +++
 .../style/anim-css-strokewidth-4-from-by-no-no.svg |  18 +++
 .../style/anim-css-strokewidth-4-from-by-px-em.svg |  19 +++
 .../style/anim-css-strokewidth-4-from-by-px-px.svg |  18 +++
 .../svg/smil/style/anim-css-strokewidth-4-ref.svg  |  29 ++++
 .../style/anim-mapped-fontsize-1-from-to-no-no.svg |  17 +++
 .../style/anim-mapped-fontsize-1-from-to-no-px.svg |  17 +++
 .../style/anim-mapped-fontsize-1-from-to-px-no.svg |  17 +++
 .../reftests/svg/smil/style/anim-standard-ref.svg  |   3 +
 layout/reftests/svg/smil/style/important-set-1.svg |   8 ++
 layout/reftests/svg/smil/style/important-set-2.svg |  11 ++
 layout/reftests/svg/smil/style/reftest-stylo.list  | 159 +++++++++++++++++++++
 layout/reftests/svg/smil/style/reftest.list        | 157 ++++++++++++++++++++
 117 files changed, 2701 insertions(+)
 create mode 100644 layout/reftests/svg/smil/style/anim-css-color-1-by-ident-hex.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-color-1-from-by-hex-hex.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-color-1-from-by-ident-hex.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-color-1-from-to-hex-hex.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-color-1-from-to-ident-ident.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-color-1-to-ident-hex.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-color-1-to-ident-ident.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-color-2-paced-rgb.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-color-3-by-ident-ident.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-color-3-from-by-ident-ident.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-color-3-from-by-rgb-ident.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-curcol.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-hex.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-1-from-by-curcol-hex.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-curcol.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-hex.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-1-from-by-ident-hex.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-1-from-to-curcol-hex.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-curcol.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-hex.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-1-from-to-ident-ident.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-1-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-curcol.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-hex.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-ident.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-2-paced-rgb.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-2-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-3-by-ident-ident.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-3-from-by-ident-ident.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-3-from-by-rgb-ident.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-3-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-overflow-1-by.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-overflow-1-from-by.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fill-overflow-1-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fillopacity-1-by.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-by.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-to.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fillopacity-1-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fillopacity-1-to.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fillopacity-2-paced.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fillopacity-2-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-big.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-small.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fillopacity-3-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-font-1-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-font-1.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-pct.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-pct.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-no.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-pct.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-no.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-pct.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-1-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-em-em.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-em.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-fontsize-2-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokedasharray-1-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokedasharray-1.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-em.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-no-no.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-pct.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-em.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-pct.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-em.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-no-no.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-pct.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-em.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-pct.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-em.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-no-no.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-pct.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-em.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-pct.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-em.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-no-no.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-pct.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-em.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-pct.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-2-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-em.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-em.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-3-paced.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-3-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-em-em.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-no-no.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-em.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-css-strokewidth-4-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-no.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-px.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-px-no.svg
 create mode 100644 layout/reftests/svg/smil/style/anim-standard-ref.svg
 create mode 100644 layout/reftests/svg/smil/style/important-set-1.svg
 create mode 100644 layout/reftests/svg/smil/style/important-set-2.svg
 create mode 100644 layout/reftests/svg/smil/style/reftest-stylo.list
 create mode 100644 layout/reftests/svg/smil/style/reftest.list

(limited to 'layout/reftests/svg/smil/style')

diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-by-ident-hex.svg
new file mode 100644
index 000000000..acda8e0c5
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-1-by-ident-hex.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { color: indigo; fill: currentColor; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "color",
+                           "by"            : "#AAF573" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-by-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-hex-hex.svg
new file mode 100644
index 000000000..42f4b65b6
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-hex-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { color: indigo; fill: currentColor; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "color",
+                           "from"          : "#4B0082",
+                           "by"            : "#AAF573" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-ident-hex.svg
new file mode 100644
index 000000000..8b480cd86
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-ident-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { color: indigo; fill: currentColor; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "color",
+                           "from"          : "indigo",
+                           "by"            : "#AAF573" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-to-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-hex-hex.svg
new file mode 100644
index 000000000..f15b4a3c2
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-hex-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { color: indigo; fill: currentColor; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "color",
+                           "from"          : "#4B0082",
+                           "to"            : "#F5F5F5" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-ident-ident.svg
new file mode 100644
index 000000000..553b95f12
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-ident-ident.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { color: indigo; fill: currentColor; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "color",
+                           "from"          : "indigo",
+                           "to"            : "whitesmoke" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-hex.svg
new file mode 100644
index 000000000..727107841
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-hex.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { color: indigo; fill: currentColor; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "color",
+                           "to"            : "#F5F5F5" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-ident.svg
new file mode 100644
index 000000000..970237093
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-ident.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { color: indigo; fill: currentColor; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "color",
+                           "to"            : "whitesmoke" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-2-paced-rgb.svg b/layout/reftests/svg/smil/style/anim-css-color-2-paced-rgb.svg
new file mode 100644
index 000000000..c44f16b7c
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-2-paced-rgb.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { color: yellow; fill: currentColor; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "color",
+                           "calcMode"      : "paced",
+                           "values" : "rgb(0, 10, 20); " +
+                                      "rgb(20, 50, 80); " +
+                                      "rgb(140, 130, 120)" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-3-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-3-by-ident-ident.svg
new file mode 100644
index 000000000..1c6d06895
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-3-by-ident-ident.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) -->
+  <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)).   -->
+  <style>
+    rect { color: DarkOliveGreen; fill: currentColor; stroke: Black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "color",
+                           "by"            : "DarkSlateGray" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-3-from-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-ident-ident.svg
new file mode 100644
index 000000000..cd34fc58d
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-ident-ident.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) -->
+  <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)).   -->
+  <style>
+    rect { color: DarkOliveGreen; fill: currentColor; stroke: Black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "color",
+                           "from"          : "DarkOliveGreen",
+                           "by"            : "DarkSlateGray" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-3-from-by-rgb-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-rgb-ident.svg
new file mode 100644
index 000000000..163c392e0
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-rgb-ident.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) -->
+  <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)).   -->
+  <style>
+    rect { color: DarkOliveGreen; fill: currentColor; stroke: Black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "color",
+                           "from"          : "rgb(85, 107, 47)",
+                           "by"            : "DarkSlateGray" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-curcol.svg
new file mode 100644
index 000000000..b30fa4963
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-curcol.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: Indigo; stroke: black; color: #AAF573}
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "by"            : "currentColor" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-hex.svg
new file mode 100644
index 000000000..cdd1dd1d5
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-hex.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: Indigo; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "by"            : "#AAF573" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-curcol-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-curcol-hex.svg
new file mode 100644
index 000000000..e2832b174
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-curcol-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: Indigo; stroke: black; color: Indigo }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "from"          : "currentColor",
+                           "by"            : "#AAF573" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-curcol.svg
new file mode 100644
index 000000000..fca9cc1d7
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-curcol.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: Indigo; stroke: black; color: #AAF573 }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "from"          : "#4B0082",
+                           "by"            : "currentColor" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-hex.svg
new file mode 100644
index 000000000..61dc61da0
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: Indigo; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "from"          : "#4B0082",
+                           "by"            : "#AAF573" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-ident-hex.svg
new file mode 100644
index 000000000..a6fe27433
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-ident-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: Indigo; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "from"          : "indigo",
+                           "by"            : "#AAF573" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-curcol-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-curcol-hex.svg
new file mode 100644
index 000000000..86cc1fedd
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-curcol-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: Indigo; stroke: black; color: Indigo; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "from"          : "currentColor",
+                           "to"            : "#F5F5F5" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-curcol.svg
new file mode 100644
index 000000000..6cb3da74f
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-curcol.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: Indigo; stroke: black; color: Whitesmoke; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "from"          : "#4B0082",
+                           "to"            : "currentColor" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-hex.svg
new file mode 100644
index 000000000..f5f8114da
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: Indigo; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "from"          : "#4B0082",
+                           "to"            : "#F5F5F5" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-ident-ident.svg
new file mode 100644
index 000000000..e1b968d35
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-ident-ident.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: Indigo; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "from"          : "indigo",
+                           "to"            : "whitesmoke" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-ref.svg
new file mode 100644
index 000000000..767407048
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <style>
+    rect { stroke: black; }
+  </style>
+  <rect x="20px" y="20px" width="15px" height="15px"
+        style="fill: #4B0082">
+  </rect>
+  <rect x="70px" y="20px" width="15px" height="15px"
+        style="fill: #4B0082">
+  </rect>
+  <rect x="120px" y="20px" width="15px" height="15px"
+        style="fill: #652593">
+  </rect>
+  <rect x="20px" y="70px" width="15px" height="15px"
+        style="fill: #8B5CAD">
+  </rect>
+  <rect x="70px" y="70px" width="15px" height="15px"
+        style="fill: #9F79BB">
+  </rect>
+  <rect x="120px" y="70px" width="15px" height="15px"
+        style="fill: #CBB8D8">
+  </rect>
+  <rect x="20px" y="120px" width="15px" height="15px"
+        style="fill: #D3C4DE">
+  </rect>
+  <rect x="70px" y="120px" width="15px" height="15px"
+        style="fill: #F5F5F5">
+  </rect>
+  <rect x="120px" y="120px" width="15px" height="15px"
+        style="fill: #F5F5F5">
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-curcol.svg
new file mode 100644
index 000000000..65a681269
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-curcol.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: Indigo; stroke: black; color: Whitesmoke; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "to"            : "currentColor" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-hex.svg
new file mode 100644
index 000000000..73540fcc4
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-hex.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: Indigo; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "to"            : "#F5F5F5" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-ident.svg
new file mode 100644
index 000000000..9b1010426
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-ident.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: Indigo; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "to"            : "whitesmoke" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-2-paced-rgb.svg b/layout/reftests/svg/smil/style/anim-css-fill-2-paced-rgb.svg
new file mode 100644
index 000000000..4c1e16c53
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-2-paced-rgb.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: yellow; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "calcMode"      : "paced",
+                           "values" : "rgb(0, 10, 20); " +
+                                      "rgb(20, 50, 80); " +
+                                      "rgb(140, 130, 120)" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-2-ref.svg
new file mode 100644
index 000000000..1058125a6
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-2-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <style>
+    rect { stroke: black; }
+  </style>
+  <rect x="20px" y="20px" width="15px" height="15px"
+        style="fill: yellow">
+  </rect>
+  <rect x="70px" y="20px" width="15px" height="15px"
+        style="fill: rgb(0, 10, 20)">
+  </rect>
+  <rect x="120px" y="20px" width="15px" height="15px"
+        style="fill: rgb(9, 28, 47)">
+  </rect>
+  <rect x="20px" y="70px" width="15px" height="15px"
+        style="fill: rgb(28, 55, 83)">
+  </rect>
+  <rect x="70px" y="70px" width="15px" height="15px"
+        style="fill: rgb(49, 69, 90)">
+  </rect>
+  <rect x="120px" y="70px" width="15px" height="15px"
+        style="fill: rgb(95, 100, 105)">
+  </rect>
+  <rect x="20px" y="120px" width="15px" height="15px"
+        style="fill: rgb(104, 106, 108)">
+  </rect>
+  <rect x="70px" y="120px" width="15px" height="15px"
+        style="fill: rgb(140, 130, 120)">
+  </rect>
+  <rect x="120px" y="120px" width="15px" height="15px"
+        style="fill: rgb(140, 130, 120)">
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-by-ident-ident.svg
new file mode 100644
index 000000000..16fbbc062
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-3-by-ident-ident.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) -->
+  <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)).   -->
+  <style>
+    rect { fill: DarkOliveGreen; stroke: Black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "by"            : "DarkSlateGray" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-ident-ident.svg
new file mode 100644
index 000000000..a2bdf8e8f
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-ident-ident.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) -->
+  <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)).   -->
+  <style>
+    rect { fill: DarkOliveGreen; stroke: Black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "from"          : "DarkOliveGreen",
+                           "by"            : "DarkSlateGray" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-rgb-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-rgb-ident.svg
new file mode 100644
index 000000000..b2b8b689e
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-rgb-ident.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) -->
+  <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)).   -->
+  <style>
+    rect { fill: DarkOliveGreen; stroke: Black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "from"          : "rgb(85, 107, 47)",
+                           "by"            : "DarkSlateGray" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-ref.svg
new file mode 100644
index 000000000..8a14da61e
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-3-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <style>
+    rect { stroke: black; }
+  </style>
+  <rect x="20px" y="20px" width="15px" height="15px"
+        style="fill: rgb(85, 107, 47)">
+  </rect>
+  <rect x="70px" y="20px" width="15px" height="15px"
+        style="fill: rgb(85, 107, 47)">
+  </rect>
+  <rect x="120px" y="20px" width="15px" height="15px"
+        style="fill: rgb(92, 119, 59)">
+  </rect>
+  <rect x="20px" y="70px" width="15px" height="15px"
+        style="fill: rgb(103, 137, 77)">
+  </rect>
+  <rect x="70px" y="70px" width="15px" height="15px"
+        style="fill: rgb(108, 146, 86)">
+  </rect>
+  <rect x="120px" y="70px" width="15px" height="15px"
+        style="fill: rgb(120, 166, 106)">
+  </rect>
+  <rect x="20px" y="120px" width="15px" height="15px"
+        style="fill: rgb(123, 170, 110)">
+  </rect>
+  <rect x="70px" y="120px" width="15px" height="15px"
+        style="fill: rgb(132, 186, 126)">
+  </rect>
+  <rect x="120px" y="120px" width="15px" height="15px"
+        style="fill: rgb(132, 186, 126)">
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-by.svg b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-by.svg
new file mode 100644
index 000000000..d65f963b3
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-by.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <!-- This is a series of snapshots of a color animation, starting at  -->
+  <!-- YellowGreen (#9ACD32 == rgb(154,205,50)) and increasing each     -->
+  <!-- channel beyond its maximum. (which should clamp it to 255)       -->
+  <style>
+    rect { fill: yellowgreen; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "by"            : "rgb(200, 100, 250)" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-from-by.svg b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-from-by.svg
new file mode 100644
index 000000000..df06aea2d
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-from-by.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <!-- This is a series of snapshots of a color animation, starting at  -->
+  <!-- YellowGreen (#9ACD32 == rgb(154,205,50)) and increasing each     -->
+  <!-- channel beyond its maximum. (which should clamp it to 255)       -->
+  <style>
+    rect { fill: yellowgreen; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill",
+                           "from"          : "yellowgreen",
+                           "by"            : "rgb(200, 100, 250)" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-ref.svg
new file mode 100644
index 000000000..917bfef9f
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <style>
+    rect { stroke: black; }
+  </style>
+  <rect x="20px" y="20px" width="15px" height="15px"
+        style="fill: yellowgreen">
+  </rect>
+  <rect x="70px" y="20px" width="15px" height="15px"
+        style="fill: yellowgreen">
+  </rect>
+  <rect x="120px" y="20px" width="15px" height="15px"
+        style="fill: rgb(184, 220, 88)">
+  </rect>
+  <rect x="20px" y="70px" width="15px" height="15px"
+        style="fill: rgb(229, 243, 144)">
+  </rect>
+  <rect x="70px" y="70px" width="15px" height="15px"
+        style="fill: rgb(253, 255, 174)">
+  </rect>
+  <rect x="120px" y="70px" width="15px" height="15px"
+        style="fill: rgb(255, 255, 238)">
+  </rect>
+  <rect x="20px" y="120px" width="15px" height="15px"
+        style="fill: rgb(255, 255, 250)">
+  </rect>
+  <rect x="70px" y="120px" width="15px" height="15px"
+        style="fill: rgb(255, 255, 255)">
+  </rect>
+  <rect x="120px" y="120px" width="15px" height="15px"
+        style="fill: rgb(255, 255, 255)">
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-by.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-by.svg
new file mode 100644
index 000000000..fc3f4b042
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-by.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: blue; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill-opacity",
+                           "by"            : "-1" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-by.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-by.svg
new file mode 100644
index 000000000..39e03b8db
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-by.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: blue; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill-opacity",
+                           "from"          : "1",
+                           "by"            : "-1" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-to.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-to.svg
new file mode 100644
index 000000000..2ec29db9b
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-to.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: blue; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill-opacity",
+                           "from"          : "1",
+                           "to"            : "0" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-ref.svg
new file mode 100644
index 000000000..f35de241c
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <style>
+    rect { fill: blue; stroke: black; }
+  </style>
+  <rect x="20px" y="20px" width="15px" height="15px"
+        style="fill-opacity: 1">
+  </rect>
+  <rect x="70px" y="20px" width="15px" height="15px"
+        style="fill-opacity: 1">
+  </rect>
+  <rect x="120px" y="20px" width="15px" height="15px"
+        style="fill-opacity: 0.85">
+  </rect>
+  <rect x="20px" y="70px" width="15px" height="15px"
+        style="fill-opacity: 0.625">
+  </rect>
+  <rect x="70px" y="70px" width="15px" height="15px"
+        style="fill-opacity: 0.505">
+  </rect>
+  <rect x="120px" y="70px" width="15px" height="15px"
+        style="fill-opacity: 0.25">
+  </rect>
+  <rect x="20px" y="120px" width="15px" height="15px"
+        style="fill-opacity: 0.2">
+  </rect>
+  <rect x="70px" y="120px" width="15px" height="15px"
+        style="fill-opacity: 0.0">
+  </rect>
+  <rect x="120px" y="120px" width="15px" height="15px"
+        style="fill-opacity: 0.0">
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-to.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-to.svg
new file mode 100644
index 000000000..110cbd6d8
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-to.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: blue; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill-opacity",
+                           "to"            : "0" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-2-paced.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-paced.svg
new file mode 100644
index 000000000..61ac49a8d
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-paced.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: blue; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "fill-opacity",
+                           "calcMode"      : "paced",
+                           "values"        : "0.6;0.1;0.95;0.3" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-ref.svg
new file mode 100644
index 000000000..c30942bcf
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <style>
+    rect { fill: blue; stroke: black; }
+  </style>
+  <rect x="20px" y="20px" width="15px" height="15px"
+        style="fill-opacity: 1">
+  </rect>
+  <rect x="70px" y="20px" width="15px" height="15px"
+        style="fill-opacity: 0.6">
+  </rect>
+  <rect x="120px" y="20px" width="15px" height="15px"
+        style="fill-opacity: 0.3">
+  </rect>
+  <rect x="20px" y="70px" width="15px" height="15px"
+        style="fill-opacity: 0.35">
+  </rect>
+  <rect x="70px" y="70px" width="15px" height="15px"
+        style="fill-opacity: 0.59">
+  </rect>
+  <rect x="120px" y="70px" width="15px" height="15px"
+        style="fill-opacity: 0.8">
+  </rect>
+  <rect x="20px" y="120px" width="15px" height="15px"
+        style="fill-opacity: 0.7">
+  </rect>
+  <rect x="70px" y="120px" width="15px" height="15px"
+        style="fill-opacity: 0.3">
+  </rect>
+  <rect x="120px" y="120px" width="15px" height="15px"
+        style="fill-opacity: 0.3">
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-big.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-big.svg
new file mode 100644
index 000000000..0faec1156
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-big.svg
@@ -0,0 +1,27 @@
+<!--
+   This testcase checks that we don't clamp negative opacity values to their
+   valid range [0,1] until *after* we've done animation & interpolation.
+   If we clamped intermediate results too early (e.g. after parsing, during
+   interpolation, or right after we add the first animation's interpolated
+   value), we'd end up with the wrong intermediate opacity values here.
+ -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: blue; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHashA = { "attributeName" : "fill-opacity",
+                            "from"          : "-0.4",
+                            "by"            : "1.2" };
+      var animAttrHashB = { "attributeName" : "fill-opacity",
+                            "by"            : "0.2" };
+      testAnimatedRectGrid("animate", [animAttrHashA, animAttrHashB]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-small.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-small.svg
new file mode 100644
index 000000000..d7ff87e20
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-small.svg
@@ -0,0 +1,27 @@
+<!--
+   This testcase checks that we don't clamp negative opacity values to their
+   valid range [0,1] until *after* we've done animation & interpolation.
+   If we clamped intermediate results too early (e.g. after parsing, during
+   interpolation, or right after we add the first animation's interpolated
+   value), we'd end up with the wrong intermediate opacity values here.
+ -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { fill: blue; stroke: black; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHashA = { "attributeName" : "fill-opacity",
+                            "from"          : "-0.4",
+                            "by"            : "0.6" };
+      var animAttrHashB = { "attributeName" : "fill-opacity",
+                            "by"            : "0.4" };
+      testAnimatedRectGrid("animate", [animAttrHashA, animAttrHashB]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-3-ref.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-ref.svg
new file mode 100644
index 000000000..bc089e43c
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <style>
+    rect { fill: blue; stroke: black; }
+  </style>
+  <rect x="20px" y="20px" width="15px" height="15px"
+        style="fill-opacity: 1">
+  </rect>
+  <rect x="70px" y="20px" width="15px" height="15px"
+        style="fill-opacity: 0">
+  </rect>
+  <rect x="120px" y="20px" width="15px" height="15px"
+        style="fill-opacity: 0">
+  </rect>
+  <rect x="20px" y="70px" width="15px" height="15px"
+        style="fill-opacity: 0">
+  </rect>
+  <rect x="70px" y="70px" width="15px" height="15px"
+        style="fill-opacity: 0.095">
+  </rect>
+  <rect x="120px" y="70px" width="15px" height="15px"
+        style="fill-opacity: 0.35">
+  </rect>
+  <rect x="20px" y="120px" width="15px" height="15px"
+        style="fill-opacity: 0.4">
+  </rect>
+  <rect x="70px" y="120px" width="15px" height="15px"
+        style="fill-opacity: 0.6">
+  </rect>
+  <rect x="120px" y="120px" width="15px" height="15px"
+        style="fill-opacity: 0.6">
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-font-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-font-1-ref.svg
new file mode 100644
index 000000000..de028ec6b
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-font-1-ref.svg
@@ -0,0 +1,76 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="300px" height="400px">
+
+  <!-- 'inherit' to 'caption' -->
+  <text x="0px"   y="50px" style="font: inherit">abc
+  </text>
+  <text x="50px"  y="50px" style="font: inherit">abc
+  </text>
+  <text x="100px" y="50px" style="font: inherit">abc
+  </text>
+  <text x="150px" y="50px" style="font: caption">abc
+  </text>
+  <text x="200px" y="50px" style="font: caption">abc
+  </text>
+
+  <!-- 'caption' to 'inherit' -->
+  <text x="0px"   y="100px" style="font: inherit">abc
+  </text>
+  <text x="50px"  y="100px" style="font: caption">abc
+  </text>
+  <text x="100px" y="100px" style="font: caption">abc
+  </text>
+  <text x="150px" y="100px" style="font: inherit">abc
+  </text>
+  <text x="200px" y="100px" style="font: inherit">abc
+  </text>
+
+  <!-- 'caption' to 'icon' -->
+  <text x="0px"   y="150px" style="font: inherit">abc
+  </text>
+  <text x="50px"  y="150px" style="font: caption">abc
+  </text>
+  <text x="100px" y="150px" style="font: caption">abc
+  </text>
+  <text x="150px" y="150px" style="font: icon">abc
+  </text>
+  <text x="200px" y="150px" style="font: icon">abc
+  </text>
+
+  <!-- 'caption' to 'menu' -->
+  <text x="0px"   y="200px" style="font: inherit">abc
+  </text>
+  <text x="50px"  y="200px" style="font: caption">abc
+  </text>
+  <text x="100px" y="200px" style="font: caption">abc
+  </text>
+  <text x="150px" y="200px" style="font: menu">abc
+  </text>
+  <text x="200px" y="200px" style="font: menu">abc
+  </text>
+
+  <!-- 'caption' to 'message-box' -->
+  <text x="0px"   y="250px" style="font: inherit">abc
+  </text>
+  <text x="50px"  y="250px" style="font: caption">abc
+  </text>
+  <text x="100px" y="250px" style="font: caption">abc
+  </text>
+  <text x="150px" y="250px" style="font: message-box">abc
+  </text>
+  <text x="200px" y="250px" style="font: message-box">abc
+  </text>
+
+  <!-- 'caption' to 'small-caption' -->
+  <text x="0px"   y="300px" style="font: inherit">abc
+  </text>
+  <text x="50px"  y="300px" style="font: caption">abc
+  </text>
+  <text x="100px" y="300px" style="font: caption">abc
+  </text>
+  <text x="150px" y="300px" style="font: small-caption">abc
+  </text>
+  <text x="200px" y="300px" style="font: small-caption">abc
+  </text>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-font-1.svg b/layout/reftests/svg/smil/style/anim-css-font-1.svg
new file mode 100644
index 000000000..d4aa76f34
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-font-1.svg
@@ -0,0 +1,139 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="300px" height="400px"
+     class="reftest-wait"
+     onload="setTimeAndSnapshot(3.0, true)">
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+
+  <!-- 'inherit' to 'caption' -->
+  <text x="0px"   y="50px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="inherit" to="caption" begin="4.0s" dur="2s"/>
+  </text>
+  <text x="50px"  y="50px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="inherit" to="caption" begin="3.0s" dur="2s"/>
+  </text>
+  <text x="100px" y="50px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="inherit" to="caption" begin="2.01s" dur="2s"/>
+  </text>
+  <text x="150px" y="50px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="inherit" to="caption" begin="2.0s" dur="2s"/>
+  </text>
+  <text x="200px" y="50px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="inherit" to="caption" begin="1.0s" dur="2s"/>
+  </text>
+
+  <!-- 'caption' to 'inherit' -->
+  <text x="0px"   y="100px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="inherit" begin="4.0s" dur="2s"/>
+  </text>
+  <text x="50px"  y="100px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="inherit" begin="3.0s" dur="2s"/>
+  </text>
+  <text x="100px" y="100px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="inherit" begin="2.01s" dur="2s"/>
+  </text>
+  <text x="150px" y="100px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="inherit" begin="2.0s" dur="2s"/>
+  </text>
+  <text x="200px" y="100px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="inherit" begin="1.0s" dur="2s"/>
+  </text>
+
+  <!-- 'caption' to 'icon' -->
+  <text x="0px"   y="150px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="icon" begin="4.0s" dur="2s"/>
+  </text>
+  <text x="50px"  y="150px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="icon" begin="3.0s" dur="2s"/>
+  </text>
+  <text x="100px" y="150px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="icon" begin="2.01s" dur="2s"/>
+  </text>
+  <text x="150px" y="150px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="icon" begin="2.0s" dur="2s"/>
+  </text>
+  <text x="200px" y="150px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="icon" begin="1.0s" dur="2s"/>
+  </text>
+
+  <!-- 'caption' to 'menu' -->
+  <text x="0px"   y="200px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="menu" begin="4.0s" dur="2s"/>
+  </text>
+  <text x="50px"  y="200px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="menu" begin="3.0s" dur="2s"/>
+  </text>
+  <text x="100px" y="200px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="menu" begin="2.01s" dur="2s"/>
+  </text>
+  <text x="150px" y="200px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="menu" begin="2.0s" dur="2s"/>
+  </text>
+  <text x="200px" y="200px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="menu" begin="1.0s" dur="2s"/>
+  </text>
+
+  <!-- 'caption' to 'message-box' -->
+  <text x="0px"   y="250px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="message-box" begin="4.0s" dur="2s"/>
+  </text>
+  <text x="50px"  y="250px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="message-box" begin="3.0s" dur="2s"/>
+  </text>
+  <text x="100px" y="250px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="message-box" begin="2.01s" dur="2s"/>
+  </text>
+  <text x="150px" y="250px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="message-box" begin="2.0s" dur="2s"/>
+  </text>
+  <text x="200px" y="250px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="message-box" begin="1.0s" dur="2s"/>
+  </text>
+
+  <!-- 'caption' to 'small-caption' -->
+  <text x="0px"   y="300px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="small-caption" begin="4.0s" dur="2s"/>
+  </text>
+  <text x="50px"  y="300px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="small-caption" begin="3.0s" dur="2s"/>
+  </text>
+  <text x="100px" y="300px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="small-caption" begin="2.01s" dur="2s"/>
+  </text>
+  <text x="150px" y="300px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="small-caption" begin="2.0s" dur="2s"/>
+  </text>
+  <text x="200px" y="300px">abc
+    <animate attributeName="font" attributeType="CSS" fill="freeze"
+             from="caption" to="small-caption" begin="1.0s" dur="2s"/>
+  </text>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-pct.svg
new file mode 100644
index 000000000..38afe61f0
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-pct.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "from"          : "500%",
+                           "by"            : "1000%" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-px.svg
new file mode 100644
index 000000000..ea4d7c3e8
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-px.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "from"          : "500%",
+                           "by"            : "20px" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-pct.svg
new file mode 100644
index 000000000..8e4b6d586
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-pct.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "from"          : "10px",
+                           "by"            : "1000%" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-px.svg
new file mode 100644
index 000000000..637c49e31
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-px.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "from"          : "10px",
+                           "by"            : "20px" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-no.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-no.svg
new file mode 100644
index 000000000..2b4e18030
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-no.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "attributeType" : "CSS",
+                           "from"          : "10",
+                           "to"            : "30" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-px.svg
new file mode 100644
index 000000000..7ced25e9a
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-px.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "attributeType" : "CSS",
+                           "from"          : "10",
+                           "to"            : "30px" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-pct.svg
new file mode 100644
index 000000000..0cf6c0cf3
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-pct.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "from"          : "500%",
+                           "to"            : "1500%" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-px.svg
new file mode 100644
index 000000000..fc4ff3afd
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-px.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "from"          : "500%",
+                           "to"            : "30px" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-no.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-no.svg
new file mode 100644
index 000000000..56e51eeab
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-no.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "attributeType" : "CSS",
+                           "from"          : "10px",
+                           "to"            : "30" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-pct.svg
new file mode 100644
index 000000000..94c195c2f
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-pct.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "from"          : "10px",
+                           "to"            : "1500%" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-px.svg
new file mode 100644
index 000000000..7158f6464
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-px.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "from"          : "10px",
+                           "to"            : "30px" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-ref.svg
new file mode 100644
index 000000000..4747c2824
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-ref.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <text x="20px" y="20px" style="font-size: 2px">abc
+  </text>
+  <text x="70px" y="20px" style="font-size: 10px">abc
+  </text>
+  <text x="120px" y="20px" style="font-size: 13px">abc
+  </text>
+  <text x="20px" y="70px" style="font-size: 17.5px">abc
+  </text>
+  <text x="70px" y="70px" style="font-size: 19.9px">abc
+  </text>
+  <text x="120px" y="70px" style="font-size: 25px">abc
+  </text>
+  <text x="20px" y="120px" style="font-size: 26px">abc
+  </text>
+  <text x="70px" y="120px" style="font-size: 30px">abc
+  </text>
+  <text x="120px" y="120px" style="font-size: 30px">abc
+  </text>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-em-em.svg
new file mode 100644
index 000000000..3fe3ae0ce
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-em-em.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "from"          : "15em",
+                           "by"            : "-10em" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-em.svg
new file mode 100644
index 000000000..44b407e18
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-em.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "from"          : "30px",
+                           "by"            : "-10em" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-px.svg
new file mode 100644
index 000000000..70199be78
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-px.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "from"          : "30px",
+                           "by"            : "-20px" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-ref.svg
new file mode 100644
index 000000000..6edb8deff
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-ref.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <text x="20px" y="20px" style="font-size: 2px">abc
+  </text>
+  <text x="70px" y="20px" style="font-size: 30px">abc
+  </text>
+  <text x="120px" y="20px" style="font-size: 27px">abc
+  </text>
+  <text x="20px" y="70px" style="font-size: 22.5px">abc
+  </text>
+  <text x="70px" y="70px" style="font-size: 20.1px">abc
+  </text>
+  <text x="120px" y="70px" style="font-size: 15px">abc
+  </text>
+  <text x="20px" y="120px" style="font-size: 14px">abc
+  </text>
+  <text x="70px" y="120px" style="font-size: 10px">abc
+  </text>
+  <text x="120px" y="120px" style="font-size: 10px">abc
+  </text>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokedasharray-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1-ref.svg
new file mode 100644
index 000000000..d2cfe9b4b
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <style>
+    rect { stroke: blue; stroke-width: 5px; }
+  </style>
+  <rect x="20px" y="20px" width="15px" height="15px"
+        style="stroke-dasharray: 20px, 5px">
+  </rect>
+  <rect x="70px" y="20px" width="15px" height="15px"
+        style="stroke-dasharray: 20px, 5px">
+  </rect>
+  <rect x="120px" y="20px" width="15px" height="15px"
+        style="stroke-dasharray: 18.5px, 6.5px">
+  </rect>
+  <rect x="20px" y="70px" width="15px" height="15px"
+        style="stroke-dasharray: 16.25px, 8.75px">
+  </rect>
+  <rect x="70px" y="70px" width="15px" height="15px"
+        style="stroke-dasharray: 15.05px, 9.95px">
+  </rect>
+  <rect x="120px" y="70px" width="15px" height="15px"
+        style="stroke-dasharray: 12.5px, 12.5px">
+  </rect>
+  <rect x="20px" y="120px" width="15px" height="15px"
+        style="stroke-dasharray: 12px, 13px">
+  </rect>
+  <rect x="70px" y="120px" width="15px" height="15px"
+        style="stroke-dasharray: 10px, 15px">
+  </rect>
+  <rect x="120px" y="120px" width="15px" height="15px"
+        style="stroke-dasharray: 10px, 15px">
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokedasharray-1.svg b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1.svg
new file mode 100644
index 000000000..9488f6546
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 5px; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-dasharray",
+                           "from"          : "20px, 5px",
+                           "to"            : "10px, 15px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-em.svg
new file mode 100644
index 000000000..1472123ee
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-em.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "by"            : "10em" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-px.svg
new file mode 100644
index 000000000..2b6a983f2
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "by"            : "20px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-no-no.svg
new file mode 100644
index 000000000..0ae489d62
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-no-no.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "by"            : "20" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-pct.svg
new file mode 100644
index 000000000..e9e1cc2d6
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-pct.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200px" height="200px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "by"            : "10%" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-px.svg
new file mode 100644
index 000000000..319905976
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200px" height="200px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 5%; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "by"            : "20px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-em.svg
new file mode 100644
index 000000000..f1a918ea7
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-em.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "by"            : "10em" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-pct.svg
new file mode 100644
index 000000000..076e49adf
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-pct.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200px" height="200px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "by"            : "10%" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-px.svg
new file mode 100644
index 000000000..65d3bbc6e
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-px.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "by"            : "20px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-em.svg
new file mode 100644
index 000000000..2058d8366
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-em.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "5em",
+                           "by"            : "10em" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-px.svg
new file mode 100644
index 000000000..e37bc12cf
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-px.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "5em",
+                           "by"            : "20px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-no-no.svg
new file mode 100644
index 000000000..0c1afad42
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-no-no.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "10",
+                           "by"            : "20" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-pct.svg
new file mode 100644
index 000000000..76e5c1e52
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-pct.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200px" height="200px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "5%",
+                           "by"            : "10%" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-px.svg
new file mode 100644
index 000000000..3394572e7
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-px.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200px" height="200px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 5%; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "5%",
+                           "by"            : "20px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-em.svg
new file mode 100644
index 000000000..3e26f8973
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-em.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "10px",
+                           "by"            : "10em" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-pct.svg
new file mode 100644
index 000000000..66c0f137b
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-pct.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200px" height="200px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "10px",
+                           "by"            : "10%" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-px.svg
new file mode 100644
index 000000000..e4bba5ae2
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "10px",
+                           "by"            : "20px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-em.svg
new file mode 100644
index 000000000..7e7d03573
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-em.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "5em",
+                           "to"            : "15em" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-px.svg
new file mode 100644
index 000000000..5c538b65b
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-px.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "5em",
+                           "to"            : "30px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-no-no.svg
new file mode 100644
index 000000000..1f4e5d09a
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-no-no.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "10",
+                           "to"            : "30" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-pct.svg
new file mode 100644
index 000000000..0da954bb5
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-pct.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200px" height="200px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "5%",
+                           "to"            : "15%" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-px.svg
new file mode 100644
index 000000000..37afdef68
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-px.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200px" height="200px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 5%; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "5%",
+                           "to"            : "30px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-em.svg
new file mode 100644
index 000000000..4dd6908d0
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-em.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "10px",
+                           "to"            : "15em" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-pct.svg
new file mode 100644
index 000000000..3c0b237f0
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-pct.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200px" height="200px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "10px",
+                           "to"            : "15%" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-px.svg
new file mode 100644
index 000000000..2e4631b7a
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "10px",
+                           "to"            : "30px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-ref.svg
new file mode 100644
index 000000000..0c6ad1674
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-ref.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
+  <rect x="20px" y="20px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 10px">
+  </rect>
+  <rect x="70px" y="20px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 10px">
+  </rect>
+  <rect x="120px" y="20px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 13px">
+  </rect>
+  <rect x="20px" y="70px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 17.5px">
+  </rect>
+  <rect x="70px" y="70px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 19.9px">
+  </rect>
+  <rect x="120px" y="70px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 25px">
+  </rect>
+  <rect x="20px" y="120px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 26px">
+  </rect>
+  <rect x="70px" y="120px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 30px">
+  </rect>
+  <rect x="120px" y="120px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 30px">
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-em.svg
new file mode 100644
index 000000000..07df6d5a1
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-em.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "to"            : "15em" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-px.svg
new file mode 100644
index 000000000..56ffff8d0
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "to"            : "30px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-no-no.svg
new file mode 100644
index 000000000..7784dd6ca
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-no-no.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "to"            : "30" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-pct.svg
new file mode 100644
index 000000000..d44e56b49
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-pct.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200px" height="200px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "to"            : "15%" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-px.svg
new file mode 100644
index 000000000..9d00d2744
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200px" height="200px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 5%; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "to"            : "30px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-em.svg
new file mode 100644
index 000000000..17d5b7628
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-em.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "to"            : "15em" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-pct.svg
new file mode 100644
index 000000000..c7dd235f2
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-pct.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200px" height="200px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "to"            : "15%" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-px.svg
new file mode 100644
index 000000000..5121cb2bf
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-px.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "to"            : "30px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-ref.svg
new file mode 100644
index 000000000..fc16e6515
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-ref.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="20px" y="20px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 10px">
+  </rect>
+  <rect x="70px" y="20px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 20px">
+  </rect>
+  <rect x="120px" y="20px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 17px">
+  </rect>
+  <rect x="20px" y="70px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 12.5px">
+  </rect>
+  <rect x="70px" y="70px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 10.1px">
+  </rect>
+  <rect x="120px" y="70px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 20px">
+  </rect>
+  <rect x="20px" y="120px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 22px">
+  </rect>
+  <rect x="70px" y="120px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 30px">
+  </rect>
+  <rect x="120px" y="120px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 30px">
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-em.svg
new file mode 100644
index 000000000..d26e7d704
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-em.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "values"        : "10em; 5em; 15em" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-px.svg
new file mode 100644
index 000000000..27a15b666
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "values"        : "10em; 10px; 15em" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-em.svg
new file mode 100644
index 000000000..4fb2e6190
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-em.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "values"        : "20px; 5em; 30px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-px.svg
new file mode 100644
index 000000000..b1a21817d
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-px.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "values"        : "20px; 10px; 30px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-3-paced.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-paced.svg
new file mode 100644
index 000000000..2449345ec
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-paced.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 10px; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "calcMode"      : "paced",
+                           "values"        : "10px; 5px; 30px; 20px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-3-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-ref.svg
new file mode 100644
index 000000000..2ddabf480
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-ref.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="20px" y="20px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 10px">
+  </rect>
+  <rect x="70px" y="20px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 10px">
+  </rect>
+  <rect x="120px" y="20px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 6px">
+  </rect>
+  <rect x="20px" y="70px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 15px">
+  </rect>
+  <rect x="70px" y="70px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 19.8px">
+  </rect>
+  <rect x="120px" y="70px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 30px">
+  </rect>
+  <rect x="20px" y="120px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 28px">
+  </rect>
+  <rect x="70px" y="120px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 20px">
+  </rect>
+  <rect x="120px" y="120px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 20px">
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-em-em.svg
new file mode 100644
index 000000000..9a55c55fc
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-em-em.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 30px; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "15em",
+                           "by"            : "-10em" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-no-no.svg
new file mode 100644
index 000000000..43845db4f
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-no-no.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 30px; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "30",
+                           "by"            : "-20" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-em.svg
new file mode 100644
index 000000000..96aa4e409
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-em.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 30px; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "30px",
+                           "by"            : "-10em" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-px.svg
new file mode 100644
index 000000000..f70c9617b
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <style>
+    rect { stroke: blue; stroke-width: 30px; }
+  </style>
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "stroke-width",
+                           "from"          : "30px",
+                           "by"            : "-20px" };
+      testAnimatedRectGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-ref.svg
new file mode 100644
index 000000000..bfbb8e3fa
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-ref.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="20px" y="20px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 30px">
+  </rect>
+  <rect x="70px" y="20px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 30px">
+  </rect>
+  <rect x="120px" y="20px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 27px">
+  </rect>
+  <rect x="20px" y="70px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 22.5px">
+  </rect>
+  <rect x="70px" y="70px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 20.1px">
+  </rect>
+  <rect x="120px" y="70px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 15px">
+  </rect>
+  <rect x="20px" y="120px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 14px">
+  </rect>
+  <rect x="70px" y="120px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 10px">
+  </rect>
+  <rect x="120px" y="120px" width="15px" height="15px" stroke="blue"
+        style="stroke-width: 10px">
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-no.svg b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-no.svg
new file mode 100644
index 000000000..2583c2a7c
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-no.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "attributeType" : "XML",
+                           "from"          : "10",
+                           "to"            : "30" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-px.svg b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-px.svg
new file mode 100644
index 000000000..4a487ece7
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-px.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "attributeType" : "XML",
+                           "from"          : "10",
+                           "to"            : "30px" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-px-no.svg b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-px-no.svg
new file mode 100644
index 000000000..689fd045d
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-px-no.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="font-size: 2px"
+     class="reftest-wait"
+     onload="go()">
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "attributeName" : "font-size",
+                           "attributeType" : "XML",
+                           "from"          : "10px",
+                           "to"            : "30" };
+      testAnimatedTextGrid("animate", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-standard-ref.svg b/layout/reftests/svg/smil/style/anim-standard-ref.svg
new file mode 100644
index 000000000..39f37ae6d
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-standard-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="15" y="15" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/style/important-set-1.svg b/layout/reftests/svg/smil/style/important-set-1.svg
new file mode 100644
index 000000000..197ba26b6
--- /dev/null
+++ b/layout/reftests/svg/smil/style/important-set-1.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <rect x="15" y="15" width="200" height="200" style="fill: blue !important">
+    <set attributeName="fill" attributeType="CSS"
+         to="red" begin="0s" fill="freeze"/>
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/important-set-2.svg b/layout/reftests/svg/smil/style/important-set-2.svg
new file mode 100644
index 000000000..e5515db10
--- /dev/null
+++ b/layout/reftests/svg/smil/style/important-set-2.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <style>
+    rect { fill: blue !important; }
+  </style>
+  <rect x="15" y="15" width="200" height="200">
+    <set attributeName="fill" attributeType="CSS"
+         to="red" begin="0s" fill="freeze"/>
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/reftest-stylo.list b/layout/reftests/svg/smil/style/reftest-stylo.list
new file mode 100644
index 000000000..8edffb202
--- /dev/null
+++ b/layout/reftests/svg/smil/style/reftest-stylo.list
@@ -0,0 +1,159 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Tests related to SVG Animation (using SMIL) of CSS properties
+
+# XXXdholbert TODO: Test color animation with "color-interpolation: linearRGB"
+# (when it's implemented)
+
+# 'color' property, from/to/by with named colors & hex values
+== anim-css-color-1-by-ident-hex.svg anim-css-color-1-by-ident-hex.svg
+== anim-css-color-1-from-by-hex-hex.svg anim-css-color-1-from-by-hex-hex.svg
+fuzzy-if(skiaContent,1,550) == anim-css-color-1-from-by-ident-hex.svg anim-css-color-1-from-by-ident-hex.svg
+fuzzy-if(skiaContent,1,550) == anim-css-color-1-from-to-hex-hex.svg anim-css-color-1-from-to-hex-hex.svg
+fuzzy-if(skiaContent,1,550) == anim-css-color-1-from-to-ident-ident.svg anim-css-color-1-from-to-ident-ident.svg
+fuzzy-if(skiaContent,1,550) == anim-css-color-1-to-ident-hex.svg anim-css-color-1-to-ident-hex.svg
+fuzzy-if(skiaContent,1,550) == anim-css-color-1-to-ident-ident.svg anim-css-color-1-to-ident-ident.svg
+
+# 'color' property, paced calcMode
+== anim-css-color-2-paced-rgb.svg anim-css-color-2-paced-rgb.svg
+
+# 'color' property, animating *by* a named color
+fuzzy-if(skiaContent,1,580) == anim-css-color-3-by-ident-ident.svg anim-css-color-3-by-ident-ident.svg
+fuzzy-if(skiaContent,1,580) == anim-css-color-3-from-by-ident-ident.svg anim-css-color-3-from-by-ident-ident.svg
+fuzzy-if(skiaContent,1,580) == anim-css-color-3-from-by-rgb-ident.svg anim-css-color-3-from-by-rgb-ident.svg
+
+# 'fill' property, from/to/by with named colors & hex values
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-by-ident-hex.svg anim-css-fill-1-by-ident-hex.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-hex-hex.svg anim-css-fill-1-from-by-hex-hex.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-ident-hex.svg anim-css-fill-1-from-by-ident-hex.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-hex-hex.svg anim-css-fill-1-from-to-hex-hex.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-ident-ident.svg anim-css-fill-1-from-to-ident-ident.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-to-ident-hex.svg anim-css-fill-1-to-ident-hex.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-to-ident-ident.svg anim-css-fill-1-to-ident-ident.svg
+
+# 'fill' property, from/to/by, with 'currentColor' keyword
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-by-ident-curcol.svg anim-css-fill-1-by-ident-curcol.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-curcol-hex.svg anim-css-fill-1-from-by-curcol-hex.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-hex-curcol.svg anim-css-fill-1-from-by-hex-curcol.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-curcol-hex.svg anim-css-fill-1-from-to-curcol-hex.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-hex-curcol.svg anim-css-fill-1-from-to-hex-curcol.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-to-ident-curcol.svg anim-css-fill-1-to-ident-curcol.svg
+
+# 'fill' property, paced calcMode
+== anim-css-fill-2-paced-rgb.svg anim-css-fill-2-paced-rgb.svg
+
+# 'fill' property, animating *by* a named color
+fuzzy-if(skiaContent,1,580) == anim-css-fill-3-by-ident-ident.svg anim-css-fill-3-by-ident-ident.svg
+fuzzy-if(skiaContent,1,580) == anim-css-fill-3-from-by-ident-ident.svg anim-css-fill-3-from-by-ident-ident.svg
+fuzzy-if(skiaContent,1,580) == anim-css-fill-3-from-by-rgb-ident.svg anim-css-fill-3-from-by-rgb-ident.svg
+
+# check handling of overflowing color values
+# NOTE: The second test fails because we compute "from + by" as the animation
+# end-point, and we clamp that final color value (due to bug 515919) and use
+# the clamped value for interpolation.  That's earlier than the SVG spec wants
+# us to clamp -- we're only supposed to clamp *final presentation values*.
+# (Reference: SVG 1.1 Appendix F.4)
+== anim-css-fill-overflow-1-by.svg anim-css-fill-overflow-1-by.svg
+== anim-css-fill-overflow-1-from-by.svg anim-css-fill-overflow-1-from-by.svg
+
+# 'fill-opacity' property
+fuzzy-if(skiaContent,1,885) == anim-css-fillopacity-1-by.svg anim-css-fillopacity-1-by.svg
+fuzzy-if(skiaContent,1,210) == anim-css-fillopacity-1-from-by.svg anim-css-fillopacity-1-from-by.svg
+== anim-css-fillopacity-1-from-to.svg anim-css-fillopacity-1-from-to.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fillopacity-1-to.svg anim-css-fillopacity-1-to.svg
+== anim-css-fillopacity-2-paced.svg anim-css-fillopacity-2-paced.svg
+== anim-css-fillopacity-3-clamp-big.svg anim-css-fillopacity-3-clamp-big.svg
+# bug 501188
+fuzzy-if(skiaContent,1,365) == anim-css-fillopacity-3-clamp-small.svg anim-css-fillopacity-3-clamp-small.svg
+
+# 'font' shorthand property
+== anim-css-font-1.svg anim-css-font-1.svg
+
+# 'font-size' property, from/by/to with pixel values only
+== anim-css-fontsize-1-from-by-px-px.svg anim-css-fontsize-1-from-by-px-px.svg
+== anim-css-fontsize-1-from-to-px-px.svg anim-css-fontsize-1-from-to-px-px.svg
+
+# 'font-size' property (accepts unitless values)
+== anim-css-fontsize-1-from-to-no-no.svg anim-css-fontsize-1-from-to-no-no.svg
+== anim-css-fontsize-1-from-to-no-px.svg anim-css-fontsize-1-from-to-no-px.svg
+== anim-css-fontsize-1-from-to-px-no.svg anim-css-fontsize-1-from-to-px-no.svg
+
+# 'font-size' mapped attribute (accepts unitless values)
+skip == anim-mapped-fontsize-1-from-to-no-no.svg anim-mapped-fontsize-1-from-to-no-no.svg
+skip == anim-mapped-fontsize-1-from-to-no-px.svg anim-mapped-fontsize-1-from-to-no-px.svg
+skip == anim-mapped-fontsize-1-from-to-px-no.svg anim-mapped-fontsize-1-from-to-px-no.svg
+
+# 'font-size' property, from/by/to with percent values
+== anim-css-fontsize-1-from-by-pct-pct.svg anim-css-fontsize-1-from-by-pct-pct.svg
+== anim-css-fontsize-1-from-by-pct-px.svg anim-css-fontsize-1-from-by-pct-px.svg
+== anim-css-fontsize-1-from-by-px-pct.svg anim-css-fontsize-1-from-by-px-pct.svg
+== anim-css-fontsize-1-from-to-pct-pct.svg anim-css-fontsize-1-from-to-pct-pct.svg
+== anim-css-fontsize-1-from-to-pct-px.svg anim-css-fontsize-1-from-to-pct-px.svg
+== anim-css-fontsize-1-from-to-px-pct.svg anim-css-fontsize-1-from-to-px-pct.svg
+
+# 'font-size' property, with negative addition
+== anim-css-fontsize-2-from-by-px-px.svg anim-css-fontsize-2-from-by-px-px.svg
+== anim-css-fontsize-2-from-by-px-em.svg anim-css-fontsize-2-from-by-px-em.svg
+== anim-css-fontsize-2-from-by-em-em.svg anim-css-fontsize-2-from-by-em-em.svg
+
+# 'stroke-dasharray' property, from/to with pixel values only
+== anim-css-strokedasharray-1.svg anim-css-strokedasharray-1.svg
+
+# 'stroke-width' property, from/by/to with pixel values only
+== anim-css-strokewidth-1-by-px-px.svg anim-css-strokewidth-1-by-px-px.svg
+== anim-css-strokewidth-1-from-by-px-px.svg anim-css-strokewidth-1-from-by-px-px.svg
+== anim-css-strokewidth-1-from-to-px-px.svg anim-css-strokewidth-1-from-to-px-px.svg
+== anim-css-strokewidth-1-to-px-px.svg anim-css-strokewidth-1-to-px-px.svg
+
+# 'stroke-width' property, from/by/to with unitless values only
+== anim-css-strokewidth-1-by-no-no.svg anim-css-strokewidth-1-by-no-no.svg
+== anim-css-strokewidth-1-from-by-no-no.svg anim-css-strokewidth-1-from-by-no-no.svg
+== anim-css-strokewidth-1-from-to-no-no.svg anim-css-strokewidth-1-from-to-no-no.svg
+== anim-css-strokewidth-1-to-no-no.svg anim-css-strokewidth-1-to-no-no.svg
+
+# 'stroke-width' property, from/by/to with percent values
+# XXXdholbert the mixed pct + px tests fail right now, because we need calc()
+# in order to interpolate between pct and non-pct values, and we don't yet
+# support calc() for stroke-width & other SVG-specific properties (Bug 594933).
+== anim-css-strokewidth-1-by-pct-pct.svg anim-css-strokewidth-1-by-pct-pct.svg
+== anim-css-strokewidth-1-by-pct-px.svg anim-css-strokewidth-1-by-pct-px.svg
+== anim-css-strokewidth-1-by-px-pct.svg anim-css-strokewidth-1-by-px-pct.svg
+== anim-css-strokewidth-1-from-by-pct-pct.svg anim-css-strokewidth-1-from-by-pct-pct.svg
+== anim-css-strokewidth-1-from-by-pct-px.svg anim-css-strokewidth-1-from-by-pct-px.svg
+== anim-css-strokewidth-1-from-by-px-pct.svg anim-css-strokewidth-1-from-by-px-pct.svg
+== anim-css-strokewidth-1-from-to-pct-pct.svg anim-css-strokewidth-1-from-to-pct-pct.svg
+== anim-css-strokewidth-1-from-to-pct-px.svg anim-css-strokewidth-1-from-to-pct-px.svg
+== anim-css-strokewidth-1-from-to-px-pct.svg anim-css-strokewidth-1-from-to-px-pct.svg
+== anim-css-strokewidth-1-to-pct-pct.svg anim-css-strokewidth-1-to-pct-pct.svg
+== anim-css-strokewidth-1-to-pct-px.svg anim-css-strokewidth-1-to-pct-px.svg
+== anim-css-strokewidth-1-to-px-pct.svg anim-css-strokewidth-1-to-px-pct.svg
+
+# 'stroke-width' property, from/by/to with em values
+== anim-css-strokewidth-1-by-px-em.svg anim-css-strokewidth-1-by-px-em.svg
+== anim-css-strokewidth-1-by-em-em.svg anim-css-strokewidth-1-by-em-em.svg
+== anim-css-strokewidth-1-by-em-px.svg anim-css-strokewidth-1-by-em-px.svg
+== anim-css-strokewidth-1-from-by-px-em.svg anim-css-strokewidth-1-from-by-px-em.svg
+== anim-css-strokewidth-1-from-by-em-em.svg anim-css-strokewidth-1-from-by-em-em.svg
+== anim-css-strokewidth-1-from-by-em-px.svg anim-css-strokewidth-1-from-by-em-px.svg
+== anim-css-strokewidth-1-from-to-px-em.svg anim-css-strokewidth-1-from-to-px-em.svg
+== anim-css-strokewidth-1-from-to-em-em.svg anim-css-strokewidth-1-from-to-em-em.svg
+== anim-css-strokewidth-1-from-to-em-px.svg anim-css-strokewidth-1-from-to-em-px.svg
+== anim-css-strokewidth-1-to-px-em.svg anim-css-strokewidth-1-to-px-em.svg
+== anim-css-strokewidth-1-to-em-em.svg anim-css-strokewidth-1-to-em-em.svg
+== anim-css-strokewidth-1-to-em-px.svg anim-css-strokewidth-1-to-em-px.svg
+
+# 'stroke-width' property, values-array & paced calc-mode support
+== anim-css-strokewidth-2-values-em-em.svg anim-css-strokewidth-2-values-em-em.svg
+== anim-css-strokewidth-2-values-em-px.svg anim-css-strokewidth-2-values-em-px.svg
+== anim-css-strokewidth-2-values-px-em.svg anim-css-strokewidth-2-values-px-em.svg
+fuzzy-if(skiaContent,1,360) == anim-css-strokewidth-2-values-px-px.svg anim-css-strokewidth-2-values-px-px.svg
+== anim-css-strokewidth-3-paced.svg anim-css-strokewidth-3-paced.svg
+
+# 'stroke-width' property, negative addition
+== anim-css-strokewidth-4-from-by-px-px.svg anim-css-strokewidth-4-from-by-px-px.svg
+== anim-css-strokewidth-4-from-by-px-em.svg anim-css-strokewidth-4-from-by-px-em.svg
+== anim-css-strokewidth-4-from-by-em-em.svg anim-css-strokewidth-4-from-by-em-em.svg
+fuzzy-if(skiaContent,1,170) == anim-css-strokewidth-4-from-by-no-no.svg anim-css-strokewidth-4-from-by-no-no.svg
+
+# check correct handling of "!important" values
+== important-set-1.svg important-set-1.svg
+== important-set-2.svg important-set-2.svg
diff --git a/layout/reftests/svg/smil/style/reftest.list b/layout/reftests/svg/smil/style/reftest.list
new file mode 100644
index 000000000..b56ba0f21
--- /dev/null
+++ b/layout/reftests/svg/smil/style/reftest.list
@@ -0,0 +1,157 @@
+# Tests related to SVG Animation (using SMIL) of CSS properties
+
+# XXXdholbert TODO: Test color animation with "color-interpolation: linearRGB"
+# (when it's implemented)
+
+# 'color' property, from/to/by with named colors & hex values
+== anim-css-color-1-by-ident-hex.svg         anim-css-fill-1-ref.svg
+== anim-css-color-1-from-by-hex-hex.svg      anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-color-1-from-by-ident-hex.svg    anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-color-1-from-to-hex-hex.svg      anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-color-1-from-to-ident-ident.svg  anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-color-1-to-ident-hex.svg         anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-color-1-to-ident-ident.svg       anim-css-fill-1-ref.svg
+
+# 'color' property, paced calcMode
+== anim-css-color-2-paced-rgb.svg            anim-css-fill-2-ref.svg
+
+# 'color' property, animating *by* a named color
+fuzzy-if(skiaContent,1,580) == anim-css-color-3-by-ident-ident.svg       anim-css-fill-3-ref.svg
+fuzzy-if(skiaContent,1,580) == anim-css-color-3-from-by-ident-ident.svg  anim-css-fill-3-ref.svg
+fuzzy-if(skiaContent,1,580) == anim-css-color-3-from-by-rgb-ident.svg    anim-css-fill-3-ref.svg
+
+# 'fill' property, from/to/by with named colors & hex values
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-by-ident-hex.svg         anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-hex-hex.svg      anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-ident-hex.svg    anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-hex-hex.svg      anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-ident-ident.svg  anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-to-ident-hex.svg         anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-to-ident-ident.svg       anim-css-fill-1-ref.svg
+
+# 'fill' property, from/to/by, with 'currentColor' keyword
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-by-ident-curcol.svg      anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-curcol-hex.svg   anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-hex-curcol.svg   anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-curcol-hex.svg   anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-hex-curcol.svg   anim-css-fill-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fill-1-to-ident-curcol.svg      anim-css-fill-1-ref.svg
+
+# 'fill' property, paced calcMode
+== anim-css-fill-2-paced-rgb.svg            anim-css-fill-2-ref.svg
+
+# 'fill' property, animating *by* a named color
+fuzzy-if(skiaContent,1,580) == anim-css-fill-3-by-ident-ident.svg       anim-css-fill-3-ref.svg
+fuzzy-if(skiaContent,1,580) == anim-css-fill-3-from-by-ident-ident.svg  anim-css-fill-3-ref.svg
+fuzzy-if(skiaContent,1,580) == anim-css-fill-3-from-by-rgb-ident.svg    anim-css-fill-3-ref.svg
+
+# check handling of overflowing color values
+# NOTE: The second test fails because we compute "from + by" as the animation
+# end-point, and we clamp that final color value (due to bug 515919) and use
+# the clamped value for interpolation.  That's earlier than the SVG spec wants
+# us to clamp -- we're only supposed to clamp *final presentation values*.
+# (Reference: SVG 1.1 Appendix F.4)
+== anim-css-fill-overflow-1-by.svg       anim-css-fill-overflow-1-ref.svg
+fails == anim-css-fill-overflow-1-from-by.svg anim-css-fill-overflow-1-ref.svg
+
+# 'fill-opacity' property
+fuzzy-if(skiaContent,1,885) == anim-css-fillopacity-1-by.svg            anim-css-fillopacity-1-ref.svg
+fuzzy-if(skiaContent,1,210) == anim-css-fillopacity-1-from-by.svg       anim-css-fillopacity-1-ref.svg
+== anim-css-fillopacity-1-from-to.svg       anim-css-fillopacity-1-ref.svg
+fuzzy-if(skiaContent,1,550) == anim-css-fillopacity-1-to.svg            anim-css-fillopacity-1-ref.svg
+== anim-css-fillopacity-2-paced.svg         anim-css-fillopacity-2-ref.svg
+fails == anim-css-fillopacity-3-clamp-big.svg     anim-css-fillopacity-3-ref.svg # bug 501188
+fuzzy-if(skiaContent,1,365) == anim-css-fillopacity-3-clamp-small.svg   anim-css-fillopacity-3-ref.svg
+
+# 'font' shorthand property
+== anim-css-font-1.svg  anim-css-font-1-ref.svg
+
+# 'font-size' property, from/by/to with pixel values only
+== anim-css-fontsize-1-from-by-px-px.svg    anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-to-px-px.svg    anim-css-fontsize-1-ref.svg
+
+# 'font-size' property (accepts unitless values)
+== anim-css-fontsize-1-from-to-no-no.svg    anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-to-no-px.svg    anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-to-px-no.svg    anim-css-fontsize-1-ref.svg
+
+# 'font-size' mapped attribute (accepts unitless values)
+== anim-mapped-fontsize-1-from-to-no-no.svg anim-css-fontsize-1-ref.svg
+== anim-mapped-fontsize-1-from-to-no-px.svg anim-css-fontsize-1-ref.svg
+== anim-mapped-fontsize-1-from-to-px-no.svg anim-css-fontsize-1-ref.svg
+
+# 'font-size' property, from/by/to with percent values
+== anim-css-fontsize-1-from-by-pct-pct.svg  anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-by-pct-px.svg   anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-by-px-pct.svg   anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-to-pct-pct.svg  anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-to-pct-px.svg   anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-to-px-pct.svg   anim-css-fontsize-1-ref.svg
+
+# 'font-size' property, with negative addition
+== anim-css-fontsize-2-from-by-px-px.svg    anim-css-fontsize-2-ref.svg
+== anim-css-fontsize-2-from-by-px-em.svg    anim-css-fontsize-2-ref.svg
+== anim-css-fontsize-2-from-by-em-em.svg    anim-css-fontsize-2-ref.svg
+
+# 'stroke-dasharray' property, from/to with pixel values only
+fails == anim-css-strokedasharray-1.svg anim-css-strokedasharray-1-ref.svg
+
+# 'stroke-width' property, from/by/to with pixel values only
+== anim-css-strokewidth-1-by-px-px.svg        anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-by-px-px.svg   anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-to-px-px.svg   anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-to-px-px.svg        anim-css-strokewidth-1-ref.svg
+
+# 'stroke-width' property, from/by/to with unitless values only
+== anim-css-strokewidth-1-by-no-no.svg        anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-by-no-no.svg   anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-to-no-no.svg   anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-to-no-no.svg        anim-css-strokewidth-1-ref.svg
+
+# 'stroke-width' property, from/by/to with percent values
+# XXXdholbert the mixed pct + px tests fail right now, because we need calc()
+# in order to interpolate between pct and non-pct values, and we don't yet
+# support calc() for stroke-width & other SVG-specific properties (Bug 594933).
+== anim-css-strokewidth-1-by-pct-pct.svg      anim-css-strokewidth-1-ref.svg
+fails == anim-css-strokewidth-1-by-pct-px.svg       anim-css-strokewidth-1-ref.svg
+fails == anim-css-strokewidth-1-by-px-pct.svg       anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-by-pct-pct.svg anim-css-strokewidth-1-ref.svg
+fails == anim-css-strokewidth-1-from-by-pct-px.svg  anim-css-strokewidth-1-ref.svg
+fails == anim-css-strokewidth-1-from-by-px-pct.svg  anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-to-pct-pct.svg anim-css-strokewidth-1-ref.svg
+fails == anim-css-strokewidth-1-from-to-pct-px.svg  anim-css-strokewidth-1-ref.svg
+fails == anim-css-strokewidth-1-from-to-px-pct.svg  anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-to-pct-pct.svg      anim-css-strokewidth-1-ref.svg
+fails == anim-css-strokewidth-1-to-pct-px.svg       anim-css-strokewidth-1-ref.svg
+fails == anim-css-strokewidth-1-to-px-pct.svg       anim-css-strokewidth-1-ref.svg
+
+# 'stroke-width' property, from/by/to with em values
+== anim-css-strokewidth-1-by-px-em.svg        anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-by-em-em.svg        anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-by-em-px.svg        anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-by-px-em.svg   anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-by-em-em.svg   anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-by-em-px.svg   anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-to-px-em.svg   anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-to-em-em.svg   anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-to-em-px.svg   anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-to-px-em.svg        anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-to-em-em.svg        anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-to-em-px.svg        anim-css-strokewidth-1-ref.svg
+
+# 'stroke-width' property, values-array & paced calc-mode support
+== anim-css-strokewidth-2-values-em-em.svg    anim-css-strokewidth-2-ref.svg
+== anim-css-strokewidth-2-values-em-px.svg    anim-css-strokewidth-2-ref.svg
+== anim-css-strokewidth-2-values-px-em.svg    anim-css-strokewidth-2-ref.svg
+fuzzy-if(skiaContent,1,360) == anim-css-strokewidth-2-values-px-px.svg    anim-css-strokewidth-2-ref.svg
+== anim-css-strokewidth-3-paced.svg           anim-css-strokewidth-3-ref.svg
+
+# 'stroke-width' property, negative addition
+== anim-css-strokewidth-4-from-by-px-px.svg   anim-css-strokewidth-4-ref.svg
+== anim-css-strokewidth-4-from-by-px-em.svg   anim-css-strokewidth-4-ref.svg
+== anim-css-strokewidth-4-from-by-em-em.svg   anim-css-strokewidth-4-ref.svg
+fuzzy-if(skiaContent,1,170) == anim-css-strokewidth-4-from-by-no-no.svg   anim-css-strokewidth-4-ref.svg
+
+# check correct handling of "!important" values
+== important-set-1.svg  anim-standard-ref.svg
+== important-set-2.svg  anim-standard-ref.svg
-- 
cgit v1.2.3