From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../filters/css-filter-chains/long-chain-ref.html  |  31 +++++
 .../svg/filters/css-filter-chains/long-chain.html  |  41 ++++++
 .../filters/css-filter-chains/moz-element-ref.html |  28 ++++
 .../svg/filters/css-filter-chains/moz-element.html |  29 +++++
 .../svg/filters/css-filter-chains/reftest.list     |   7 +
 .../filters/css-filter-chains/same-filter-ref.html |  30 +++++
 .../svg/filters/css-filter-chains/same-filter.html |  28 ++++
 .../css-filters/blur-calc-negative-ref.html        |  27 ++++
 .../filters/css-filters/blur-calc-negative.html    |  28 ++++
 .../svg/filters/css-filters/blur-calc-ref.html     |  23 ++++
 .../svg/filters/css-filters/blur-calc.html         |  28 ++++
 .../blur-cap-large-radius-on-software-ref.html     |  22 ++++
 .../blur-cap-large-radius-on-software.html         |  26 ++++
 .../svg/filters/css-filters/blur-clip-rect.html    |  33 +++++
 .../filters/css-filters/blur-em-radius-ref.html    |  28 ++++
 .../svg/filters/css-filters/blur-em-radius.html    |  29 +++++
 .../css-filters/blur-invalid-radius-ref.html       |  22 ++++
 .../filters/css-filters/blur-invalid-radius.html   |  28 ++++
 .../reftests/svg/filters/css-filters/blur-ref.html |  28 ++++
 .../reftests/svg/filters/css-filters/blur-ref.svg  |  29 +++++
 .../filters/css-filters/blur-rem-radius-ref.html   |  31 +++++
 .../svg/filters/css-filters/blur-rem-radius.html   |  32 +++++
 .../filters/css-filters/blur-zero-radius-ref.html  |  22 ++++
 .../svg/filters/css-filters/blur-zero-radius.html  |  27 ++++
 .../filters/css-filters/blur-zoomed-page-ref.html  |  30 +++++
 .../svg/filters/css-filters/blur-zoomed-page.html  |  33 +++++
 layout/reftests/svg/filters/css-filters/blur.html  |  28 ++++
 layout/reftests/svg/filters/css-filters/blur.svg   |  32 +++++
 .../filters/css-filters/brightness-darken-ref.html |  22 ++++
 .../svg/filters/css-filters/brightness-darken.html |  28 ++++
 .../css-filters/brightness-extreme-ref.html        |  22 ++++
 .../filters/css-filters/brightness-extreme.html    |  28 ++++
 .../filters/css-filters/brightness-one-ref.html    |  22 ++++
 .../svg/filters/css-filters/brightness-one.html    |  28 ++++
 .../css-filters/brightness-percent-ref.html        |  22 ++++
 .../filters/css-filters/brightness-percent.html    |  28 ++++
 .../svg/filters/css-filters/brightness-ref.html    |  22 ++++
 .../filters/css-filters/brightness-zero-ref.html   |  22 ++++
 .../svg/filters/css-filters/brightness-zero.html   |  28 ++++
 .../svg/filters/css-filters/brightness.html        |  28 ++++
 .../css-filters/containing-block-1-ref.html        |   5 +
 .../filters/css-filters/containing-block-1.html    |   6 +
 .../filters/css-filters/contrast-extreme-ref.html  |  22 ++++
 .../svg/filters/css-filters/contrast-extreme.html  |  29 +++++
 .../svg/filters/css-filters/contrast-one-ref.html  |  22 ++++
 .../svg/filters/css-filters/contrast-one.html      |  28 ++++
 .../filters/css-filters/contrast-percent-ref.html  |  22 ++++
 .../svg/filters/css-filters/contrast-percent.html  |  28 ++++
 .../filters/css-filters/contrast-reduce-ref.html   |  22 ++++
 .../svg/filters/css-filters/contrast-reduce.html   |  29 +++++
 .../svg/filters/css-filters/contrast-ref.html      |  22 ++++
 .../svg/filters/css-filters/contrast-zero-ref.html |  23 ++++
 .../svg/filters/css-filters/contrast-zero.html     |  28 ++++
 .../reftests/svg/filters/css-filters/contrast.html |  28 ++++
 .../css-filters/drop-shadow-default-color-ref.html |  28 ++++
 .../css-filters/drop-shadow-default-color.html     |  31 +++++
 .../drop-shadow-negative-offset-ref.html           |  31 +++++
 .../css-filters/drop-shadow-negative-offset.html   |  32 +++++
 .../svg/filters/css-filters/drop-shadow-ref.html   |  28 ++++
 .../svg/filters/css-filters/drop-shadow.html       |  28 ++++
 .../filters/css-filters/filter-on-huge-bbox.html   |  26 ++++
 .../filters/css-filters/filter-on-outer-svg.html   |  14 ++
 .../svg/filters/css-filters/grayscale-one-ref.html |  22 ++++
 .../svg/filters/css-filters/grayscale-one.html     |  28 ++++
 .../css-filters/grayscale-over-one-ref.html        |  22 ++++
 .../filters/css-filters/grayscale-over-one.html    |  28 ++++
 .../filters/css-filters/grayscale-percent-ref.html |  22 ++++
 .../svg/filters/css-filters/grayscale-percent.html |  28 ++++
 .../svg/filters/css-filters/grayscale-ref.html     |  22 ++++
 .../filters/css-filters/grayscale-zero-ref.html    |  22 ++++
 .../svg/filters/css-filters/grayscale-zero.html    |  28 ++++
 .../svg/filters/css-filters/grayscale.html         |  28 ++++
 .../filters/css-filters/hue-rotate-360-ref.html    |  22 ++++
 .../svg/filters/css-filters/hue-rotate-360.html    |  28 ++++
 .../filters/css-filters/hue-rotate-grad-ref.html   |  32 +++++
 .../svg/filters/css-filters/hue-rotate-grad.html   |  29 +++++
 .../css-filters/hue-rotate-multichannel-ref.html   |  37 ++++++
 .../css-filters/hue-rotate-multichannel.html       |  38 ++++++
 .../css-filters/hue-rotate-negative-ref.html       |  32 +++++
 .../filters/css-filters/hue-rotate-negative.html   |  28 ++++
 .../css-filters/hue-rotate-over-360-ref.html       |  32 +++++
 .../filters/css-filters/hue-rotate-over-360.html   |  28 ++++
 .../filters/css-filters/hue-rotate-rad-ref.html    |  32 +++++
 .../svg/filters/css-filters/hue-rotate-rad.html    |  28 ++++
 .../svg/filters/css-filters/hue-rotate-ref.html    |  32 +++++
 .../filters/css-filters/hue-rotate-turn-ref.html   |  32 +++++
 .../svg/filters/css-filters/hue-rotate-turn.html   |  28 ++++
 .../filters/css-filters/hue-rotate-zero-ref.html   |  22 ++++
 .../svg/filters/css-filters/hue-rotate-zero.html   |  28 ++++
 .../svg/filters/css-filters/hue-rotate.html        |  28 ++++
 .../svg/filters/css-filters/invert-half-ref.html   |  22 ++++
 .../svg/filters/css-filters/invert-half.html       |  28 ++++
 .../svg/filters/css-filters/invert-one-ref.html    |  22 ++++
 .../svg/filters/css-filters/invert-one.html        |  28 ++++
 .../filters/css-filters/invert-over-one-ref.html   |  22 ++++
 .../svg/filters/css-filters/invert-over-one.html   |  28 ++++
 .../filters/css-filters/invert-percent-ref.html    |  22 ++++
 .../svg/filters/css-filters/invert-percent.html    |  28 ++++
 .../svg/filters/css-filters/invert-ref.html        |  22 ++++
 .../svg/filters/css-filters/invert-zero-ref.html   |  22 ++++
 .../svg/filters/css-filters/invert-zero.html       |  28 ++++
 .../reftests/svg/filters/css-filters/invert.html   |  28 ++++
 .../svg/filters/css-filters/opacity-one-ref.html   |  22 ++++
 .../svg/filters/css-filters/opacity-one.html       |  36 ++++++
 .../filters/css-filters/opacity-over-one-ref.html  |  22 ++++
 .../opacity-over-one-translucent-source-ref.html   |  21 +++
 .../opacity-over-one-translucent-source.html       |  28 ++++
 .../svg/filters/css-filters/opacity-over-one.html  |  36 ++++++
 .../filters/css-filters/opacity-percent-ref.html   |  22 ++++
 .../svg/filters/css-filters/opacity-percent.html   |  28 ++++
 .../svg/filters/css-filters/opacity-ref.html       |  22 ++++
 .../svg/filters/css-filters/opacity-zero-ref.html  |  22 ++++
 .../svg/filters/css-filters/opacity-zero.html      |  36 ++++++
 .../reftests/svg/filters/css-filters/opacity.html  |  28 ++++
 layout/reftests/svg/filters/css-filters/pass.svg   |   8 ++
 .../reftests/svg/filters/css-filters/reftest.list  |  71 +++++++++++
 .../css-filters/saturate-desaturate-ref.html       |  22 ++++
 .../filters/css-filters/saturate-desaturate.html   |  28 ++++
 .../filters/css-filters/saturate-extreme-ref.html  |  22 ++++
 .../svg/filters/css-filters/saturate-extreme.html  |  29 +++++
 .../svg/filters/css-filters/saturate-one-ref.html  |  22 ++++
 .../svg/filters/css-filters/saturate-one.html      |  28 ++++
 .../filters/css-filters/saturate-percent-ref.html  |  22 ++++
 .../svg/filters/css-filters/saturate-percent.html  |  28 ++++
 .../svg/filters/css-filters/saturate-ref.html      |  22 ++++
 .../svg/filters/css-filters/saturate-zero-ref.html |  22 ++++
 .../svg/filters/css-filters/saturate-zero.html     |  28 ++++
 .../reftests/svg/filters/css-filters/saturate.html |  28 ++++
 .../css-filters/scale-filtered-content-01-ref.html |  33 +++++
 .../css-filters/scale-filtered-content-01.html     |  33 +++++
 .../svg/filters/css-filters/sepia-one-ref.html     |  22 ++++
 .../svg/filters/css-filters/sepia-one.html         |  28 ++++
 .../filters/css-filters/sepia-over-one-ref.html    |  22 ++++
 .../svg/filters/css-filters/sepia-over-one.html    |  28 ++++
 .../svg/filters/css-filters/sepia-percent-ref.html |  22 ++++
 .../svg/filters/css-filters/sepia-percent.html     |  28 ++++
 .../svg/filters/css-filters/sepia-ref.html         |  22 ++++
 .../svg/filters/css-filters/sepia-zero-ref.html    |  22 ++++
 .../svg/filters/css-filters/sepia-zero.html        |  28 ++++
 layout/reftests/svg/filters/css-filters/sepia.html |  28 ++++
 .../clip-input-css-filter-ref.html                 |  32 +++++
 .../clip-input-css-filter.html                     |  34 +++++
 .../css-filter-first-ref.html                      |  31 +++++
 .../css-svg-filter-chains/css-filter-first.html    |  33 +++++
 .../css-svg-filter-chains/css-filter-last-ref.html |  31 +++++
 .../css-svg-filter-chains/css-filter-last.html     |  34 +++++
 .../css-filter-middle-ref.html                     |  38 ++++++
 .../css-svg-filter-chains/css-filter-middle.html   |  42 ++++++
 .../svg/filters/css-svg-filter-chains/reftest.list |   8 ++
 .../svg/filters/dynamic-filter-invalidation-01.svg |  36 ++++++
 .../svg/filters/dynamic-filter-invalidation-02.svg |  22 ++++
 .../svg/filters/dynamic-filter-invalidation-03.svg |  30 +++++
 .../svg/filters/dynamic-filter-invalidation-04.svg |  32 +++++
 .../filters/dynamic-filtered-foreignObject-01.svg  |  31 +++++
 layout/reftests/svg/filters/feBlend-1-ref.svg      |  20 +++
 layout/reftests/svg/filters/feBlend-1.svg          | 104 +++++++++++++++
 layout/reftests/svg/filters/feBlend-2-ref.svg      |   6 +
 layout/reftests/svg/filters/feBlend-2.svg          |  17 +++
 .../reftests/svg/filters/feColorMatrix-1-ref.svg   |   5 +
 layout/reftests/svg/filters/feColorMatrix-1.svg    |  10 ++
 .../reftests/svg/filters/feColorMatrix-2-ref.svg   |   5 +
 layout/reftests/svg/filters/feColorMatrix-2.svg    |   9 ++
 .../svg/filters/feColorMatrix-saturate-01.svg      |  16 +++
 .../svg/filters/feComponentTransfer-03.svg         |  22 ++++
 .../svg/filters/feComponentTransfer-04.svg         |  19 +++
 .../svg/filters/feComponentTransfer-1-ref.svg      |   5 +
 .../reftests/svg/filters/feComponentTransfer-1.svg |  15 +++
 .../svg/filters/feComponentTransfer-2-ref.svg      |   5 +
 .../reftests/svg/filters/feComponentTransfer-2.svg |  14 ++
 layout/reftests/svg/filters/feComposite-1-ref.svg  |  22 ++++
 layout/reftests/svg/filters/feComposite-1.svg      |  82 ++++++++++++
 layout/reftests/svg/filters/feComposite-2-ref.svg  |   9 ++
 layout/reftests/svg/filters/feComposite-2.svg      |  27 ++++
 .../svg/filters/feComposite-arguments-01.svg       |  12 ++
 .../filters/feComposite-operator-lighter-ref.html  |  19 +++
 .../svg/filters/feComposite-operator-lighter.svg   |  11 ++
 .../svg/filters/feComposite-paint-01-ref.svg       |   9 ++
 .../reftests/svg/filters/feComposite-paint-01.svg  |  35 +++++
 .../svg/filters/feConvolveMatrix-1-ref.svg         |  17 +++
 layout/reftests/svg/filters/feConvolveMatrix-1.svg |  75 +++++++++++
 .../svg/filters/feConvolveMatrix-2-ref.svg         |   6 +
 layout/reftests/svg/filters/feConvolveMatrix-2.svg |  11 ++
 .../svg/filters/feConvolveMatrix-bias-01-ref.svg   |   9 ++
 .../svg/filters/feConvolveMatrix-bias-01.svg       |  14 ++
 .../svg/filters/feConvolveMatrix-order-01-ref.svg  |  12 ++
 .../svg/filters/feConvolveMatrix-order-01.svg      |  18 +++
 .../svg/filters/feDiffuseLighting-1-ref.svg        |  16 +++
 .../reftests/svg/filters/feDiffuseLighting-1.svg   |  17 +++
 .../svg/filters/feDisplacementMap-1-ref.svg        |   5 +
 .../reftests/svg/filters/feDisplacementMap-1.svg   |  13 ++
 .../svg/filters/feDisplacementMap-2-ref.svg        |   7 +
 .../reftests/svg/filters/feDisplacementMap-2.svg   |  12 ++
 .../svg/filters/feDisplacementMap-alpha-01.svg     |  22 ++++
 .../filters/feDisplacementMap-colour-01-ref.svg    |  11 ++
 .../svg/filters/feDisplacementMap-colour-01.svg    |  19 +++
 .../svg/filters/feDisplacementMap-scale-01.svg     |  15 +++
 .../reftests/svg/filters/feDropShadow-01-ref.svg   |  68 ++++++++++
 layout/reftests/svg/filters/feDropShadow-01.svg    |  43 +++++++
 layout/reftests/svg/filters/feFlood-1-ref.svg      |   5 +
 layout/reftests/svg/filters/feFlood-1.svg          |  11 ++
 layout/reftests/svg/filters/feFlood-2-ref.svg      |   5 +
 layout/reftests/svg/filters/feFlood-2.svg          |  10 ++
 layout/reftests/svg/filters/feFlood-color-01.svg   |  11 ++
 .../reftests/svg/filters/feGaussianBlur-1-ref.svg  |   7 +
 layout/reftests/svg/filters/feGaussianBlur-1.svg   |  22 ++++
 .../reftests/svg/filters/feGaussianBlur-2-ref.svg  |   7 +
 layout/reftests/svg/filters/feGaussianBlur-2.svg   |  40 ++++++
 .../reftests/svg/filters/feGaussianBlur-3-ref.svg  |   5 +
 layout/reftests/svg/filters/feGaussianBlur-3.svg   |  12 ++
 .../reftests/svg/filters/feGaussianBlur-4-ref.svg  |  10 ++
 layout/reftests/svg/filters/feGaussianBlur-4.svg   |   8 ++
 .../reftests/svg/filters/feGaussianBlur-5-ref.svg  |   5 +
 layout/reftests/svg/filters/feGaussianBlur-5.svg   |   8 ++
 .../reftests/svg/filters/feGaussianBlur-6-ref.svg  |   5 +
 layout/reftests/svg/filters/feGaussianBlur-6.svg   |   8 ++
 .../svg/filters/feGaussianBlur-alpha-01-ref.svg    |  20 +++
 .../svg/filters/feGaussianBlur-alpha-01.svg        |  20 +++
 ...p-large-directional-radius-on-software-ref.html |  12 ++
 ...r-cap-large-directional-radius-on-software.html |  16 +++
 layout/reftests/svg/filters/feImage-1-ref.svg      |   5 +
 layout/reftests/svg/filters/feImage-1.svg          |  11 ++
 .../feImage-scale-to-primitive-subregion-ref.html  |  21 +++
 .../feImage-scale-to-primitive-subregion.html      |  44 +++++++
 layout/reftests/svg/filters/feMerge-1-ref.svg      |   6 +
 layout/reftests/svg/filters/feMerge-1.svg          |  16 +++
 layout/reftests/svg/filters/feMerge-2-ref.svg      |   6 +
 layout/reftests/svg/filters/feMerge-2.svg          |  14 ++
 layout/reftests/svg/filters/feMorphology-1-ref.svg |  12 ++
 layout/reftests/svg/filters/feMorphology-1.svg     |  38 ++++++
 layout/reftests/svg/filters/feMorphology-2-ref.svg |  12 ++
 layout/reftests/svg/filters/feMorphology-2.svg     |  32 +++++
 .../filters/feMorphology-radius-negative-01.svg    |  23 ++++
 .../filters/feMorphology-radius-negative-02.svg    |  23 ++++
 .../svg/filters/feMorphology-radius-zero-01.svg    |  23 ++++
 .../svg/filters/feMorphology-radius-zero-02.svg    |  23 ++++
 layout/reftests/svg/filters/feOffset-1-ref.svg     |   5 +
 layout/reftests/svg/filters/feOffset-1.svg         |  11 ++
 layout/reftests/svg/filters/feOffset-2-ref.svg     |   5 +
 layout/reftests/svg/filters/feOffset-2.svg         |  10 ++
 .../svg/filters/fePointLight-zoomed-page-ref.svg   |  15 +++
 .../svg/filters/fePointLight-zoomed-page.svg       |  29 +++++
 .../svg/filters/feSpecularLighting-1-ref.svg       |   7 +
 .../reftests/svg/filters/feSpecularLighting-1.svg  |  25 ++++
 layout/reftests/svg/filters/feTile-1-ref.svg       |  21 +++
 layout/reftests/svg/filters/feTile-1.svg           |  14 ++
 layout/reftests/svg/filters/feTile-2-ref.svg       |  21 +++
 layout/reftests/svg/filters/feTile-2.svg           |  12 ++
 layout/reftests/svg/filters/feTile-large-01.svg    |  19 +++
 .../reftests/svg/filters/feTile-large-02-ref.svg   |  26 ++++
 layout/reftests/svg/filters/feTile-large-02.svg    |  19 +++
 .../reftests/svg/filters/feTile-outside-01-ref.svg |  20 +++
 layout/reftests/svg/filters/feTile-outside-01.svg  |  19 +++
 .../svg/filters/feTurbulence-offset-ref.svg        |  17 +++
 .../reftests/svg/filters/feTurbulence-offset.svg   |  20 +++
 .../filters/feTurbulence-zero-baseFreq-01-ref.svg  |  13 ++
 .../svg/filters/feTurbulence-zero-baseFreq-01.svg  |  23 ++++
 .../svg/filters/feTurbulence-zero-baseFreq-02.svg  |   9 ++
 .../svg/filters/filter-clipped-rect-01.svg         |  25 ++++
 layout/reftests/svg/filters/filter-giant.svg       |  12 ++
 layout/reftests/svg/filters/filter-in-mask-01.svg  |  12 ++
 layout/reftests/svg/filters/filter-in-mask-02.svg  |  18 +++
 .../reftests/svg/filters/filter-in-pattern-01.svg  |  12 ++
 .../svg/filters/filter-in-pattern-02-ref.svg       |  13 ++
 .../reftests/svg/filters/filter-in-pattern-02.svg  |  13 ++
 .../reftests/svg/filters/filter-inner-svg-01.svg   |  16 +++
 .../reftests/svg/filters/filter-inner-svg-02.svg   |  18 +++
 .../reftests/svg/filters/filter-inner-svg-03.svg   |  19 +++
 .../svg/filters/filter-kernelUnitLength-01-ref.svg |  15 +++
 .../svg/filters/filter-kernelUnitLength-01.svg     |  15 +++
 .../svg/filters/filter-lighting-region-ref.svg     |  11 ++
 .../svg/filters/filter-lighting-region.svg         |  30 +++++
 .../reftests/svg/filters/filter-marked-line-01.svg |  19 +++
 .../reftests/svg/filters/filter-marked-line-02.svg |  20 +++
 .../reftests/svg/filters/filter-marked-line-03.svg |  20 +++
 .../reftests/svg/filters/filter-marked-line-04.svg |  20 +++
 .../reftests/svg/filters/filter-marked-line-05.svg |  21 +++
 .../reftests/svg/filters/filter-marked-line-06.svg |  23 ++++
 .../reftests/svg/filters/filter-marked-line-07.svg |  25 ++++
 .../reftests/svg/filters/filter-marked-line-08.svg |  25 ++++
 .../reftests/svg/filters/filter-marked-line-09.svg |  27 ++++
 .../svg/filters/filter-nested-filtering-01.svg     |  18 +++
 .../svg/filters/filter-nested-filtering-02.svg     |  18 +++
 .../svg/filters/filter-patterned-rect-01.svg       |  21 +++
 .../svg/filters/filter-patterned-rect-02.svg       |  23 ++++
 layout/reftests/svg/filters/filter-region-01a.html |  20 +++
 layout/reftests/svg/filters/filter-region-01b.html |  22 ++++
 .../reftests/svg/filters/filter-transform-01.svg   |  17 +++
 layout/reftests/svg/filters/mozilla-banner.gif     | Bin 0 -> 4500 bytes
 layout/reftests/svg/filters/nested-filter-ref.html |  14 ++
 layout/reftests/svg/filters/nested-filter.html     |  23 ++++
 .../svg/filters/outside-sourcegraphic-1.svg        |  10 ++
 .../svg/filters/outside-sourcegraphic-2.svg        |  13 ++
 .../svg/filters/outside-sourcegraphic-3.svg        |  15 +++
 .../svg/filters/outside-sourcegraphic-ref.svg      |   7 +
 layout/reftests/svg/filters/pass.svg               |   8 ++
 layout/reftests/svg/filters/reftest.list           | 142 +++++++++++++++++++++
 .../filters/svg-filter-chains/clip-input-ref.svg   |  26 ++++
 .../svg/filters/svg-filter-chains/clip-input.svg   |  52 ++++++++
 .../clip-original-SourceGraphic-ref.svg            |  26 ++++
 .../clip-original-SourceGraphic.svg                |  50 ++++++++
 .../filters/svg-filter-chains/clip-output-ref.svg  |  30 +++++
 .../svg/filters/svg-filter-chains/clip-output.svg  |  52 ++++++++
 .../svg-filter-chains/default-subregion-ref.svg    |  29 +++++
 .../svg-filter-chains/default-subregion.svg        |  48 +++++++
 .../different-FillPaint-filter-regions-ref.svg     |  30 +++++
 .../different-FillPaint-filter-regions.svg         |  43 +++++++
 .../different-StrokePaint-filter-regions-ref.svg   |  30 +++++
 .../different-StrokePaint-filter-regions.svg       |  43 +++++++
 .../dont-clip-previous-primitives-ref.svg          |  30 +++++
 .../dont-clip-previous-primitives.svg              |  51 ++++++++
 .../intersecting-filter-regions-ref.svg            |  29 +++++
 .../intersecting-filter-regions.svg                |  45 +++++++
 .../svg/filters/svg-filter-chains/long-chain.svg   |  28 ++++
 .../multiple-primitives-per-filter.svg             |  24 ++++
 .../svg/filters/svg-filter-chains/reftest.list     |  16 +++
 .../second-filter-uses-SourceAlpha-ref.svg         |  29 +++++
 .../second-filter-uses-SourceAlpha.svg             |  49 +++++++
 .../second-filter-uses-SourceGraphic.svg           |  17 +++
 .../filters/svg-filter-chains/simple-chain-ref.svg |  14 ++
 .../svg/filters/svg-filter-chains/simple-chain.svg |  15 +++
 320 files changed, 7581 insertions(+)
 create mode 100644 layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filter-chains/long-chain.html
 create mode 100644 layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filter-chains/moz-element.html
 create mode 100644 layout/reftests/svg/filters/css-filter-chains/reftest.list
 create mode 100644 layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filter-chains/same-filter.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-calc-negative-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-calc-negative.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-calc-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-calc.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-clip-rect.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-em-radius-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-em-radius.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-invalid-radius-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-invalid-radius.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-ref.svg
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-rem-radius-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-rem-radius.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-zero-radius-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-zero-radius.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-zoomed-page-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur-zoomed-page.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur.html
 create mode 100644 layout/reftests/svg/filters/css-filters/blur.svg
 create mode 100644 layout/reftests/svg/filters/css-filters/brightness-darken-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/brightness-darken.html
 create mode 100644 layout/reftests/svg/filters/css-filters/brightness-extreme-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/brightness-extreme.html
 create mode 100644 layout/reftests/svg/filters/css-filters/brightness-one-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/brightness-one.html
 create mode 100644 layout/reftests/svg/filters/css-filters/brightness-percent-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/brightness-percent.html
 create mode 100644 layout/reftests/svg/filters/css-filters/brightness-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/brightness-zero-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/brightness-zero.html
 create mode 100644 layout/reftests/svg/filters/css-filters/brightness.html
 create mode 100644 layout/reftests/svg/filters/css-filters/containing-block-1-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/containing-block-1.html
 create mode 100644 layout/reftests/svg/filters/css-filters/contrast-extreme-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/contrast-extreme.html
 create mode 100644 layout/reftests/svg/filters/css-filters/contrast-one-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/contrast-one.html
 create mode 100644 layout/reftests/svg/filters/css-filters/contrast-percent-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/contrast-percent.html
 create mode 100644 layout/reftests/svg/filters/css-filters/contrast-reduce-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/contrast-reduce.html
 create mode 100644 layout/reftests/svg/filters/css-filters/contrast-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/contrast-zero-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/contrast-zero.html
 create mode 100644 layout/reftests/svg/filters/css-filters/contrast.html
 create mode 100644 layout/reftests/svg/filters/css-filters/drop-shadow-default-color-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/drop-shadow-default-color.html
 create mode 100644 layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset.html
 create mode 100644 layout/reftests/svg/filters/css-filters/drop-shadow-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/drop-shadow.html
 create mode 100644 layout/reftests/svg/filters/css-filters/filter-on-huge-bbox.html
 create mode 100644 layout/reftests/svg/filters/css-filters/filter-on-outer-svg.html
 create mode 100644 layout/reftests/svg/filters/css-filters/grayscale-one-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/grayscale-one.html
 create mode 100644 layout/reftests/svg/filters/css-filters/grayscale-over-one-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/grayscale-over-one.html
 create mode 100644 layout/reftests/svg/filters/css-filters/grayscale-percent-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/grayscale-percent.html
 create mode 100644 layout/reftests/svg/filters/css-filters/grayscale-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/grayscale-zero-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/grayscale-zero.html
 create mode 100644 layout/reftests/svg/filters/css-filters/grayscale.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-360-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-360.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-grad-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-grad.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-multichannel-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-multichannel.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-negative-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-negative.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-over-360-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-over-360.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-rad-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-rad.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-turn-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-turn.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-zero-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate-zero.html
 create mode 100644 layout/reftests/svg/filters/css-filters/hue-rotate.html
 create mode 100644 layout/reftests/svg/filters/css-filters/invert-half-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/invert-half.html
 create mode 100644 layout/reftests/svg/filters/css-filters/invert-one-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/invert-one.html
 create mode 100644 layout/reftests/svg/filters/css-filters/invert-over-one-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/invert-over-one.html
 create mode 100644 layout/reftests/svg/filters/css-filters/invert-percent-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/invert-percent.html
 create mode 100644 layout/reftests/svg/filters/css-filters/invert-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/invert-zero-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/invert-zero.html
 create mode 100644 layout/reftests/svg/filters/css-filters/invert.html
 create mode 100644 layout/reftests/svg/filters/css-filters/opacity-one-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/opacity-one.html
 create mode 100644 layout/reftests/svg/filters/css-filters/opacity-over-one-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source.html
 create mode 100644 layout/reftests/svg/filters/css-filters/opacity-over-one.html
 create mode 100644 layout/reftests/svg/filters/css-filters/opacity-percent-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/opacity-percent.html
 create mode 100644 layout/reftests/svg/filters/css-filters/opacity-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/opacity-zero-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/opacity-zero.html
 create mode 100644 layout/reftests/svg/filters/css-filters/opacity.html
 create mode 100644 layout/reftests/svg/filters/css-filters/pass.svg
 create mode 100644 layout/reftests/svg/filters/css-filters/reftest.list
 create mode 100644 layout/reftests/svg/filters/css-filters/saturate-desaturate-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/saturate-desaturate.html
 create mode 100644 layout/reftests/svg/filters/css-filters/saturate-extreme-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/saturate-extreme.html
 create mode 100644 layout/reftests/svg/filters/css-filters/saturate-one-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/saturate-one.html
 create mode 100644 layout/reftests/svg/filters/css-filters/saturate-percent-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/saturate-percent.html
 create mode 100644 layout/reftests/svg/filters/css-filters/saturate-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/saturate-zero-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/saturate-zero.html
 create mode 100644 layout/reftests/svg/filters/css-filters/saturate.html
 create mode 100644 layout/reftests/svg/filters/css-filters/scale-filtered-content-01-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/scale-filtered-content-01.html
 create mode 100644 layout/reftests/svg/filters/css-filters/sepia-one-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/sepia-one.html
 create mode 100644 layout/reftests/svg/filters/css-filters/sepia-over-one-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/sepia-over-one.html
 create mode 100644 layout/reftests/svg/filters/css-filters/sepia-percent-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/sepia-percent.html
 create mode 100644 layout/reftests/svg/filters/css-filters/sepia-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/sepia-zero-ref.html
 create mode 100644 layout/reftests/svg/filters/css-filters/sepia-zero.html
 create mode 100644 layout/reftests/svg/filters/css-filters/sepia.html
 create mode 100644 layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter-ref.html
 create mode 100644 layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter.html
 create mode 100644 layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first-ref.html
 create mode 100644 layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first.html
 create mode 100644 layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last-ref.html
 create mode 100644 layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last.html
 create mode 100644 layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle-ref.html
 create mode 100644 layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle.html
 create mode 100644 layout/reftests/svg/filters/css-svg-filter-chains/reftest.list
 create mode 100644 layout/reftests/svg/filters/dynamic-filter-invalidation-01.svg
 create mode 100644 layout/reftests/svg/filters/dynamic-filter-invalidation-02.svg
 create mode 100644 layout/reftests/svg/filters/dynamic-filter-invalidation-03.svg
 create mode 100644 layout/reftests/svg/filters/dynamic-filter-invalidation-04.svg
 create mode 100644 layout/reftests/svg/filters/dynamic-filtered-foreignObject-01.svg
 create mode 100644 layout/reftests/svg/filters/feBlend-1-ref.svg
 create mode 100644 layout/reftests/svg/filters/feBlend-1.svg
 create mode 100644 layout/reftests/svg/filters/feBlend-2-ref.svg
 create mode 100644 layout/reftests/svg/filters/feBlend-2.svg
 create mode 100644 layout/reftests/svg/filters/feColorMatrix-1-ref.svg
 create mode 100644 layout/reftests/svg/filters/feColorMatrix-1.svg
 create mode 100644 layout/reftests/svg/filters/feColorMatrix-2-ref.svg
 create mode 100644 layout/reftests/svg/filters/feColorMatrix-2.svg
 create mode 100644 layout/reftests/svg/filters/feColorMatrix-saturate-01.svg
 create mode 100644 layout/reftests/svg/filters/feComponentTransfer-03.svg
 create mode 100644 layout/reftests/svg/filters/feComponentTransfer-04.svg
 create mode 100644 layout/reftests/svg/filters/feComponentTransfer-1-ref.svg
 create mode 100644 layout/reftests/svg/filters/feComponentTransfer-1.svg
 create mode 100644 layout/reftests/svg/filters/feComponentTransfer-2-ref.svg
 create mode 100644 layout/reftests/svg/filters/feComponentTransfer-2.svg
 create mode 100644 layout/reftests/svg/filters/feComposite-1-ref.svg
 create mode 100644 layout/reftests/svg/filters/feComposite-1.svg
 create mode 100644 layout/reftests/svg/filters/feComposite-2-ref.svg
 create mode 100644 layout/reftests/svg/filters/feComposite-2.svg
 create mode 100644 layout/reftests/svg/filters/feComposite-arguments-01.svg
 create mode 100644 layout/reftests/svg/filters/feComposite-operator-lighter-ref.html
 create mode 100644 layout/reftests/svg/filters/feComposite-operator-lighter.svg
 create mode 100644 layout/reftests/svg/filters/feComposite-paint-01-ref.svg
 create mode 100644 layout/reftests/svg/filters/feComposite-paint-01.svg
 create mode 100644 layout/reftests/svg/filters/feConvolveMatrix-1-ref.svg
 create mode 100644 layout/reftests/svg/filters/feConvolveMatrix-1.svg
 create mode 100644 layout/reftests/svg/filters/feConvolveMatrix-2-ref.svg
 create mode 100644 layout/reftests/svg/filters/feConvolveMatrix-2.svg
 create mode 100644 layout/reftests/svg/filters/feConvolveMatrix-bias-01-ref.svg
 create mode 100644 layout/reftests/svg/filters/feConvolveMatrix-bias-01.svg
 create mode 100644 layout/reftests/svg/filters/feConvolveMatrix-order-01-ref.svg
 create mode 100644 layout/reftests/svg/filters/feConvolveMatrix-order-01.svg
 create mode 100644 layout/reftests/svg/filters/feDiffuseLighting-1-ref.svg
 create mode 100644 layout/reftests/svg/filters/feDiffuseLighting-1.svg
 create mode 100644 layout/reftests/svg/filters/feDisplacementMap-1-ref.svg
 create mode 100644 layout/reftests/svg/filters/feDisplacementMap-1.svg
 create mode 100644 layout/reftests/svg/filters/feDisplacementMap-2-ref.svg
 create mode 100644 layout/reftests/svg/filters/feDisplacementMap-2.svg
 create mode 100644 layout/reftests/svg/filters/feDisplacementMap-alpha-01.svg
 create mode 100644 layout/reftests/svg/filters/feDisplacementMap-colour-01-ref.svg
 create mode 100644 layout/reftests/svg/filters/feDisplacementMap-colour-01.svg
 create mode 100644 layout/reftests/svg/filters/feDisplacementMap-scale-01.svg
 create mode 100644 layout/reftests/svg/filters/feDropShadow-01-ref.svg
 create mode 100644 layout/reftests/svg/filters/feDropShadow-01.svg
 create mode 100644 layout/reftests/svg/filters/feFlood-1-ref.svg
 create mode 100644 layout/reftests/svg/filters/feFlood-1.svg
 create mode 100644 layout/reftests/svg/filters/feFlood-2-ref.svg
 create mode 100644 layout/reftests/svg/filters/feFlood-2.svg
 create mode 100644 layout/reftests/svg/filters/feFlood-color-01.svg
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-1-ref.svg
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-1.svg
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-2-ref.svg
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-2.svg
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-3-ref.svg
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-3.svg
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-4-ref.svg
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-4.svg
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-5-ref.svg
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-5.svg
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-6-ref.svg
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-6.svg
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-alpha-01-ref.svg
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-alpha-01.svg
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software-ref.html
 create mode 100644 layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software.html
 create mode 100644 layout/reftests/svg/filters/feImage-1-ref.svg
 create mode 100644 layout/reftests/svg/filters/feImage-1.svg
 create mode 100644 layout/reftests/svg/filters/feImage-scale-to-primitive-subregion-ref.html
 create mode 100644 layout/reftests/svg/filters/feImage-scale-to-primitive-subregion.html
 create mode 100644 layout/reftests/svg/filters/feMerge-1-ref.svg
 create mode 100644 layout/reftests/svg/filters/feMerge-1.svg
 create mode 100644 layout/reftests/svg/filters/feMerge-2-ref.svg
 create mode 100644 layout/reftests/svg/filters/feMerge-2.svg
 create mode 100644 layout/reftests/svg/filters/feMorphology-1-ref.svg
 create mode 100644 layout/reftests/svg/filters/feMorphology-1.svg
 create mode 100644 layout/reftests/svg/filters/feMorphology-2-ref.svg
 create mode 100644 layout/reftests/svg/filters/feMorphology-2.svg
 create mode 100644 layout/reftests/svg/filters/feMorphology-radius-negative-01.svg
 create mode 100644 layout/reftests/svg/filters/feMorphology-radius-negative-02.svg
 create mode 100644 layout/reftests/svg/filters/feMorphology-radius-zero-01.svg
 create mode 100644 layout/reftests/svg/filters/feMorphology-radius-zero-02.svg
 create mode 100644 layout/reftests/svg/filters/feOffset-1-ref.svg
 create mode 100644 layout/reftests/svg/filters/feOffset-1.svg
 create mode 100644 layout/reftests/svg/filters/feOffset-2-ref.svg
 create mode 100644 layout/reftests/svg/filters/feOffset-2.svg
 create mode 100644 layout/reftests/svg/filters/fePointLight-zoomed-page-ref.svg
 create mode 100644 layout/reftests/svg/filters/fePointLight-zoomed-page.svg
 create mode 100644 layout/reftests/svg/filters/feSpecularLighting-1-ref.svg
 create mode 100644 layout/reftests/svg/filters/feSpecularLighting-1.svg
 create mode 100644 layout/reftests/svg/filters/feTile-1-ref.svg
 create mode 100644 layout/reftests/svg/filters/feTile-1.svg
 create mode 100644 layout/reftests/svg/filters/feTile-2-ref.svg
 create mode 100644 layout/reftests/svg/filters/feTile-2.svg
 create mode 100644 layout/reftests/svg/filters/feTile-large-01.svg
 create mode 100644 layout/reftests/svg/filters/feTile-large-02-ref.svg
 create mode 100644 layout/reftests/svg/filters/feTile-large-02.svg
 create mode 100644 layout/reftests/svg/filters/feTile-outside-01-ref.svg
 create mode 100644 layout/reftests/svg/filters/feTile-outside-01.svg
 create mode 100644 layout/reftests/svg/filters/feTurbulence-offset-ref.svg
 create mode 100644 layout/reftests/svg/filters/feTurbulence-offset.svg
 create mode 100644 layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01-ref.svg
 create mode 100644 layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01.svg
 create mode 100644 layout/reftests/svg/filters/feTurbulence-zero-baseFreq-02.svg
 create mode 100644 layout/reftests/svg/filters/filter-clipped-rect-01.svg
 create mode 100644 layout/reftests/svg/filters/filter-giant.svg
 create mode 100644 layout/reftests/svg/filters/filter-in-mask-01.svg
 create mode 100644 layout/reftests/svg/filters/filter-in-mask-02.svg
 create mode 100644 layout/reftests/svg/filters/filter-in-pattern-01.svg
 create mode 100644 layout/reftests/svg/filters/filter-in-pattern-02-ref.svg
 create mode 100644 layout/reftests/svg/filters/filter-in-pattern-02.svg
 create mode 100644 layout/reftests/svg/filters/filter-inner-svg-01.svg
 create mode 100644 layout/reftests/svg/filters/filter-inner-svg-02.svg
 create mode 100644 layout/reftests/svg/filters/filter-inner-svg-03.svg
 create mode 100644 layout/reftests/svg/filters/filter-kernelUnitLength-01-ref.svg
 create mode 100644 layout/reftests/svg/filters/filter-kernelUnitLength-01.svg
 create mode 100644 layout/reftests/svg/filters/filter-lighting-region-ref.svg
 create mode 100644 layout/reftests/svg/filters/filter-lighting-region.svg
 create mode 100644 layout/reftests/svg/filters/filter-marked-line-01.svg
 create mode 100644 layout/reftests/svg/filters/filter-marked-line-02.svg
 create mode 100644 layout/reftests/svg/filters/filter-marked-line-03.svg
 create mode 100644 layout/reftests/svg/filters/filter-marked-line-04.svg
 create mode 100644 layout/reftests/svg/filters/filter-marked-line-05.svg
 create mode 100644 layout/reftests/svg/filters/filter-marked-line-06.svg
 create mode 100644 layout/reftests/svg/filters/filter-marked-line-07.svg
 create mode 100644 layout/reftests/svg/filters/filter-marked-line-08.svg
 create mode 100644 layout/reftests/svg/filters/filter-marked-line-09.svg
 create mode 100644 layout/reftests/svg/filters/filter-nested-filtering-01.svg
 create mode 100644 layout/reftests/svg/filters/filter-nested-filtering-02.svg
 create mode 100644 layout/reftests/svg/filters/filter-patterned-rect-01.svg
 create mode 100644 layout/reftests/svg/filters/filter-patterned-rect-02.svg
 create mode 100644 layout/reftests/svg/filters/filter-region-01a.html
 create mode 100644 layout/reftests/svg/filters/filter-region-01b.html
 create mode 100644 layout/reftests/svg/filters/filter-transform-01.svg
 create mode 100644 layout/reftests/svg/filters/mozilla-banner.gif
 create mode 100644 layout/reftests/svg/filters/nested-filter-ref.html
 create mode 100644 layout/reftests/svg/filters/nested-filter.html
 create mode 100644 layout/reftests/svg/filters/outside-sourcegraphic-1.svg
 create mode 100644 layout/reftests/svg/filters/outside-sourcegraphic-2.svg
 create mode 100644 layout/reftests/svg/filters/outside-sourcegraphic-3.svg
 create mode 100644 layout/reftests/svg/filters/outside-sourcegraphic-ref.svg
 create mode 100644 layout/reftests/svg/filters/pass.svg
 create mode 100644 layout/reftests/svg/filters/reftest.list
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/clip-input-ref.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/clip-input.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic-ref.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/clip-output-ref.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/clip-output.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/default-subregion-ref.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/default-subregion.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions-ref.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions-ref.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives-ref.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions-ref.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/long-chain.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/multiple-primitives-per-filter.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/reftest.list
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha-ref.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceGraphic.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/simple-chain-ref.svg
 create mode 100644 layout/reftests/svg/filters/svg-filter-chains/simple-chain.svg

(limited to 'layout/reftests/svg/filters')

diff --git a/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html b/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html
new file mode 100644
index 0000000000..573c6e419d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html
@@ -0,0 +1,31 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filter Chains: Long Filter Chain</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      /* The first 8 CSS filter functions result in this color. */
+      background-color: rgba(118, 153, 44, 0.8);
+      /* Use an equivalent SVG filter for the last 2 CSS filter functions. */
+      filter: url(#blur-and-drop-shadow);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square with a green drop shadow.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="blur-and-drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+      <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+      <feDropShadow dx="10" dy="10" stdDeviation="10" flood-color="#0f0" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filter-chains/long-chain.html b/layout/reftests/svg/filters/css-filter-chains/long-chain.html
new file mode 100644
index 0000000000..b99468eee2
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/long-chain.html
@@ -0,0 +1,41 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filter Chains: Long Filter Chain</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+  <link rel="match" href="long-chain-ref.html">
+  <meta name="assert"
+        content="Multiple chained CSS filter functions of different types should
+                 render correctly.">
+  <style type="text/css">
+    #target {
+      /*
+        Chain together all 10 CSS filter functions defined in the Filter Effects
+        Level 1 specification.
+      */
+      filter: brightness(2)
+              contrast(0.4)
+              grayscale(0.2)
+              hue-rotate(270deg)
+              invert(0.6)
+              opacity(0.8)
+              saturate(10)
+              sepia(0.4)
+              blur(3px)
+              drop-shadow(10px 10px 10px #0f0);
+      background-color: red;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square with a green drop shadow.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html b/layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html
new file mode 100644
index 0000000000..a769783b2b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters Chains: Use a Filtered Element as the Background of Another Element</title>
+  <style type="text/css">
+    #src {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+    #dest {
+      margin-top: 10px;
+      background: #0f0;
+      width: 200px;
+      height: 200px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a small green square followed by a large green square.</p>
+  <div id="src"></div>
+  <div id="dest"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filter-chains/moz-element.html b/layout/reftests/svg/filters/css-filter-chains/moz-element.html
new file mode 100644
index 0000000000..245f6a6464
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/moz-element.html
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters Chains: Use a Filtered Element as the Background of Another Element</title>
+  <style type="text/css">
+    #src {
+      filter: hue-rotate(90deg) saturate(10);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+    #dest {
+      margin-top: 10px;
+      background: -moz-element(#src);
+      width: 200px;
+      height: 200px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a small green square followed by a large green square.</p>
+  <div id="src"></div>
+  <div id="dest"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filter-chains/reftest.list b/layout/reftests/svg/filters/css-filter-chains/reftest.list
new file mode 100644
index 0000000000..bb66b5041c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/reftest.list
@@ -0,0 +1,7 @@
+# These tests verify that CSS filter chains behave properly.
+# e.g. filter: blur(3px) grayscale(0.5) invert(0.2);
+
+# Some platforms render this complex filter chain a little differently, and that's ok.
+fuzzy(4-6,12000-19950) fuzzy-if(swgl,5-10,13600-20260) fuzzy-if(Android&&device&&!swgl,6-6,19986-19986) == long-chain.html long-chain-ref.html # Win10: Bug 1258241
+== moz-element.html moz-element-ref.html
+fuzzy-if(!useDrawSnapshot,13-15,7670-7982) fuzzy-if(!useDrawSnapshot&&swgl,11-12,14052-14056) fuzzy-if(Android&&device&&!swgl,13-13,13505-13505) == same-filter.html same-filter-ref.html
diff --git a/layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html b/layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html
new file mode 100644
index 0000000000..ff5de04da9
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html
@@ -0,0 +1,30 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filter Chains: Filters of the Same Type</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#blur);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+      <feGaussianBlur stdDeviation="1" color-interpolation-filters="sRGB"/>
+      <feGaussianBlur stdDeviation="2" color-interpolation-filters="sRGB"/>
+      <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filter-chains/same-filter.html b/layout/reftests/svg/filters/css-filter-chains/same-filter.html
new file mode 100644
index 0000000000..9dd79d4db4
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/same-filter.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filter Chains: Filters of the Same Type</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+  <link rel="match" href="same-filter-ref.html">
+  <meta name="assert"
+        content="Multiple chained CSS filter functions of the same type should
+                 render correctly.">
+  <style type="text/css">
+    #target {
+      filter: blur(1px) blur(2px) blur(3px);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-calc-negative-ref.html b/layout/reftests/svg/filters/css-filters/blur-calc-negative-ref.html
new file mode 100644
index 0000000000..fc260c2e22
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-calc-negative-ref.html
@@ -0,0 +1,27 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Blur an HTML Element Using a Negative Calc Function Value</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+  <link rel="match" href="blur-calc-negative-ref.html">
+  <meta name="assert"
+        content="Given a calc() value that evaluates to a negative result, the
+                 CSS blur filter function should not blur an HTML element.">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-calc-negative.html b/layout/reftests/svg/filters/css-filters/blur-calc-negative.html
new file mode 100644
index 0000000000..694c6cfc97
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-calc-negative.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Blur an HTML Element Using a Negative Calc Function Value</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+  <link rel="match" href="blur-calc-negative-ref.html">
+  <meta name="assert"
+        content="Given a calc() value that evaluates to a negative result, the
+                 CSS blur filter function should not blur an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: blur(calc(-10px));
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-calc-ref.html b/layout/reftests/svg/filters/css-filters/blur-calc-ref.html
new file mode 100644
index 0000000000..8f35672749
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-calc-ref.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Blur an HTML Element Using a Calc Function Value</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: blur(10px);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-calc.html b/layout/reftests/svg/filters/css-filters/blur-calc.html
new file mode 100644
index 0000000000..e4dc87e7d7
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-calc.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Blur an HTML Element Using a Calc Function Value</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+  <link rel="match" href="blur-calc-ref.html">
+  <meta name="assert"
+        content="Given a calc() value that evaluates to a positive result, the
+                 CSS blur filter function should blur an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: blur(calc(2 * 5px));
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software-ref.html b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software-ref.html
new file mode 100644
index 0000000000..4ad810f944
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Cap Blur Radius When Rendering in Software</title>
+  <style type="text/css">
+    #target {
+      filter: blur(100px);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software.html b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software.html
new file mode 100644
index 0000000000..81da59e6cb
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software.html
@@ -0,0 +1,26 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Cap Blur Radius When Rendering in Software</title>
+  <!--
+    When rendering in software, Firefox should cap large blur radii to a smaller
+    value in order to keep performance acceptable.
+  -->
+  <style type="text/css">
+    #target {
+      filter: blur(1000000px);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-clip-rect.html b/layout/reftests/svg/filters/css-filters/blur-clip-rect.html
new file mode 100644
index 0000000000..5bb25b91b8
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-clip-rect.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Filters: Blur an HTML Element and clip to the blur rect</title>
+  <style type="text/css">
+    #target {
+      filter: url(#blur);
+      width: 400px;
+      height: 400px;
+    }
+    #inner {
+      position: relative;
+      left: 100px;
+      top: 100px;
+      width: 100px;
+      height: 100px;
+      background-color: #00ff00;
+    }
+    body {
+      margin: 0px;
+    }
+  </style>
+</head>
+<body>
+  <div id="target">
+    <div id="inner"></div>
+  </div>
+  <svg width="0" height="0">
+    <filter id="blur" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" x="100" y="100" width="100" height="100"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-em-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-em-radius-ref.html
new file mode 100644
index 0000000000..929fbb5ab5
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-em-radius-ref.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Blur an HTML Element Using a Radius in Ems</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#blur);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="blur">
+      <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-em-radius.html b/layout/reftests/svg/filters/css-filters/blur-em-radius.html
new file mode 100644
index 0000000000..7ba53e0a2f
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-em-radius.html
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Blur an HTML Element Using a Radius in Ems</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+  <link rel="match" href="blur-em-radius-ref.html">
+  <meta name="assert"
+        content="Given a valid blur radius in ems, the CSS blur filter function
+                 should blur an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: blur(0.3em);
+      font-size: 10px;
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-invalid-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-invalid-radius-ref.html
new file mode 100644
index 0000000000..83f74e2b53
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-invalid-radius-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Don't Change Element Rendering with Invalid Blur Radius</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-invalid-radius.html b/layout/reftests/svg/filters/css-filters/blur-invalid-radius.html
new file mode 100644
index 0000000000..aada289dd0
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-invalid-radius.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Don't Change Element Rendering with Invalid Blur Radius</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+  <link rel="match" href="blur-invalid-radius-ref.html">
+  <meta name="assert"
+        content="Given an invalid blur radius, the CSS blur filter function
+                 should not change the rendering of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: blur(3);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-ref.html b/layout/reftests/svg/filters/css-filters/blur-ref.html
new file mode 100644
index 0000000000..62c4c8b9f4
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-ref.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Blur an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#blur);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="blur">
+      <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-ref.svg b/layout/reftests/svg/filters/css-filters/blur-ref.svg
new file mode 100644
index 0000000000..5e7800a9e7
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-ref.svg
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>CSS Filters: Blur an SVG Element</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"/>
+    <metadata class="flags">namespace svg</metadata>
+  </g>
+
+  <g id="test-body-content">
+    <filter id="blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+      <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+    </filter>
+    <rect x="20" y="20" width="100" height="100" fill="#0f0" filter="url(#blur)"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/css-filters/blur-rem-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-rem-radius-ref.html
new file mode 100644
index 0000000000..1b4b104d8d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-rem-radius-ref.html
@@ -0,0 +1,31 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Blur an HTML Element Using a Radius in Rems</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    html {
+      font-size: 30px;
+    }
+    #target {
+      filter: url(#blur);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="blur">
+      <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-rem-radius.html b/layout/reftests/svg/filters/css-filters/blur-rem-radius.html
new file mode 100644
index 0000000000..69fac9a2b3
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-rem-radius.html
@@ -0,0 +1,32 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Blur an HTML Element Using a Radius in Rems</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+  <link rel="match" href="blur-rem-radius-ref.html">
+  <meta name="assert"
+        content="Given a valid blur radius in rems, the CSS blur filter function
+                 should blur an HTML element.">
+  <style type="text/css">
+    html {
+      font-size: 30px;
+    }
+    #target {
+      filter: blur(0.1rem);
+      font-size: 16px;
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-zero-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-zero-radius-ref.html
new file mode 100644
index 0000000000..7af2485f53
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-zero-radius-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Blur with Zero Radius</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square. It should not be blurred.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-zero-radius.html b/layout/reftests/svg/filters/css-filters/blur-zero-radius.html
new file mode 100644
index 0000000000..1bd099d898
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-zero-radius.html
@@ -0,0 +1,27 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Blur with Zero Radius</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+  <link rel="match" href="blur-zero-radius-ref.html">
+  <meta name="assert" content="Given a zero blur radius, the CSS blur filter
+                               function will not blur an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: blur(0);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square. It should not be blurred.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-zoomed-page-ref.html b/layout/reftests/svg/filters/css-filters/blur-zoomed-page-ref.html
new file mode 100644
index 0000000000..f68659241c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-zoomed-page-ref.html
@@ -0,0 +1,30 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Blur on a 2x Zoomed Page</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    body {
+      margin: 2rem;
+    }
+    #target {
+      filter: url(#blur);
+      background-color: #0f0;
+      width: 200px;
+      height: 200px;
+    }
+  </style>
+</head>
+<body>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="blur" x="-100" y="-100" width="400" height="400" filterUnits="userSpaceOnUse">
+      <feGaussianBlur stdDeviation="6" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-zoomed-page.html b/layout/reftests/svg/filters/css-filters/blur-zoomed-page.html
new file mode 100644
index 0000000000..98d7ad6610
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-zoomed-page.html
@@ -0,0 +1,33 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html reftest-zoom="2.0">
+<head>
+  <title>CSS Filters: Blur on a 2x Zoomed Page</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+  <link rel="match" href="blur-zoomed-page-ref.html">
+  <meta name="assert"
+        content="The results of the CSS blur filter function should scale up
+                 proportionally when the page is zoomed. At 1x zoom, you should
+                 see a blurred green square. At 2x zoom, you should see a
+                 blurred green square with a blur radius that's twice as
+                 large.">
+  <style type="text/css">
+    body {
+      margin: 1rem;
+    }
+    #target {
+      filter: blur(3px);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur.html b/layout/reftests/svg/filters/css-filters/blur.html
new file mode 100644
index 0000000000..3510824a0d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Blur an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+  <link rel="match" href="blur-ref.html">
+  <meta name="assert"
+        content="Given a valid blur radius, the CSS blur filter function should
+                 blur an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: blur(3px);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur.svg b/layout/reftests/svg/filters/css-filters/blur.svg
new file mode 100644
index 0000000000..8c6cf9536d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur.svg
@@ -0,0 +1,32 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>CSS Filters: Blur an SVG Element</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"/>
+    <link rel="match"
+          href="blur-ref.svg"/>
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">
+      This test verifies that the CSS blur filter function can filter SVG
+      elements. If the test passes, you should see a green square.
+    </desc>
+  </g>
+
+  <g id="test-body-content">
+    <rect x="20" y="20" width="100" height="100" fill="#0f0" filter="blur(3px)"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-darken-ref.html b/layout/reftests/svg/filters/css-filters/brightness-darken-ref.html
new file mode 100644
index 0000000000..466164dd1d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-darken-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Darken an HTML Element Using the Brightness Function</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(0, 64, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a dark green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-darken.html b/layout/reftests/svg/filters/css-filters/brightness-darken.html
new file mode 100644
index 0000000000..544498e6b5
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-darken.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Darken an HTML Element Using the Brightness Function</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness">
+  <link rel="match" href="brightness-darken-ref.html">
+  <meta name="assert"
+        content="Given a factor less than one, the CSS brightness filter
+                 function should darken the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: brightness(0.25);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a dark green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-extreme-ref.html b/layout/reftests/svg/filters/css-filters/brightness-extreme-ref.html
new file mode 100644
index 0000000000..c38cd9a5bd
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-extreme-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Brighten an HTML Element Using a Large Factor</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a bright green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-extreme.html b/layout/reftests/svg/filters/css-filters/brightness-extreme.html
new file mode 100644
index 0000000000..11a7a68949
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-extreme.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Brighten an HTML Element Using a Large Factor</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness">
+  <link rel="match" href="brightness-extreme-ref.html">
+  <meta name="assert"
+        content="Given a large factor, the CSS brightness filter function should
+                 completely change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: brightness(1000);
+      background-color: rgb(0, 1, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a bright green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-one-ref.html b/layout/reftests/svg/filters/css-filters/brightness-one-ref.html
new file mode 100644
index 0000000000..79e59d3403
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Brighten an HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(0, 128, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-one.html b/layout/reftests/svg/filters/css-filters/brightness-one.html
new file mode 100644
index 0000000000..9e061eab6c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-one.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Brighten an HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness">
+  <link rel="match" href="brightness-one-ref.html">
+  <meta name="assert"
+        content="Given a factor of one, the CSS brightness filter function
+                 should not change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: brightness(1);
+      background-color: rgb(0, 128, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-percent-ref.html b/layout/reftests/svg/filters/css-filters/brightness-percent-ref.html
new file mode 100644
index 0000000000..bd62450884
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-percent-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Brighten an HTML Element Using a Percentage</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(0, 128, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-percent.html b/layout/reftests/svg/filters/css-filters/brightness-percent.html
new file mode 100644
index 0000000000..cbe1477728
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-percent.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Brighten an HTML Element Using a Percentage</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness">
+  <link rel="match" href="brightness-percent-ref.html">
+  <meta name="assert"
+        content="Given a percentage, the CSS brightness filter function should
+                 change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: brightness(400%);
+      background-color: rgb(0, 32, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-ref.html b/layout/reftests/svg/filters/css-filters/brightness-ref.html
new file mode 100644
index 0000000000..31ca2a729a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Brighten an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(0, 128, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-zero-ref.html b/layout/reftests/svg/filters/css-filters/brightness-zero-ref.html
new file mode 100644
index 0000000000..f49520c258
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-zero-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Darken an HTML Element Using the Brightness Function and a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: black;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a black square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-zero.html b/layout/reftests/svg/filters/css-filters/brightness-zero.html
new file mode 100644
index 0000000000..71670a7fe2
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-zero.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Darken an HTML Element Using the Brightness Function and a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness">
+  <link rel="match" href="brightness-zero-ref.html">
+  <meta name="assert"
+        content="Given a factor of zero, the CSS brightness filter function
+                 should change the color of an HTML element to black.">
+  <style type="text/css">
+    #target {
+      filter: brightness(0);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a black square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness.html b/layout/reftests/svg/filters/css-filters/brightness.html
new file mode 100644
index 0000000000..92e7f0ec00
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Brighten an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness">
+  <link rel="match" href="brightness-ref.html">
+  <meta name="assert"
+        content="The CSS brightness filter function should change the color of
+                 an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: brightness(4);
+      background-color: rgb(0, 32, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/containing-block-1-ref.html b/layout/reftests/svg/filters/css-filters/containing-block-1-ref.html
new file mode 100644
index 0000000000..696893b47f
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/containing-block-1-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<body>
+<div style="position:absolute; left:150px; top:150px; width:200px; height:200px; background:lime;"></div>
+<div style="position:absolute; left:180px; top:180px; width:200px; height:200px; background:yellow;"></div>
+
diff --git a/layout/reftests/svg/filters/css-filters/containing-block-1.html b/layout/reftests/svg/filters/css-filters/containing-block-1.html
new file mode 100644
index 0000000000..503f6ee35a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/containing-block-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<body style="margin:0">
+<div style="margin:100px; width:100px; height:100px; filter:opacity(1);">
+  <div style="position:absolute; left:50px; top:50px; width:200px; height:200px; background:lime;"></div>
+  <div style="position:fixed; left:80px; top:80px; width:200px; height:200px; background:yellow;"></div>
+</div>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-extreme-ref.html b/layout/reftests/svg/filters/css-filters/contrast-extreme-ref.html
new file mode 100644
index 0000000000..c276e8bca7
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-extreme-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Increase the Contrast of an HTML Element Using a Large Factor</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a bright green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-extreme.html b/layout/reftests/svg/filters/css-filters/contrast-extreme.html
new file mode 100644
index 0000000000..e5b80f8ed6
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-extreme.html
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Increase the Contrast of an HTML Element Using a Large Factor</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast">
+  <link rel="match" href="contrast-extreme-ref.html">
+  <meta name="assert"
+        content="Given a large factor, the CSS contrast filter function should
+                 should change color channel values to be much farther from
+                 their middle value.">
+  <style type="text/css">
+    #target {
+      filter: contrast(1000);
+      background-color: rgb(127, 129, 127); /* 127 should change to 0, and 129 should change to 255. */
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a bright green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-one-ref.html b/layout/reftests/svg/filters/css-filters/contrast-one-ref.html
new file mode 100644
index 0000000000..90df359cc1
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Set the Contrast of HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(0, 128, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-one.html b/layout/reftests/svg/filters/css-filters/contrast-one.html
new file mode 100644
index 0000000000..c7c4cca19a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-one.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Set the Contrast of HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast">
+  <link rel="match" href="contrast-one-ref.html">
+  <meta name="assert"
+        content="Given a factor of one, the CSS contrast filter function
+                 should not change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: contrast(1);
+      background-color: rgb(0, 128, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-percent-ref.html b/layout/reftests/svg/filters/css-filters/contrast-percent-ref.html
new file mode 100644
index 0000000000..84f5eb0410
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-percent-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Increase the Contrast of an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a bright green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-percent.html b/layout/reftests/svg/filters/css-filters/contrast-percent.html
new file mode 100644
index 0000000000..7d0337f642
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-percent.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Increase the Contrast of an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast">
+  <link rel="match" href="contrast-percent-ref.html">
+  <meta name="assert"
+        content="Given a percentage, the CSS contrast filter function should
+                 change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: contrast(200%);
+      background-color: rgb(0, 196, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a bright green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-reduce-ref.html b/layout/reftests/svg/filters/css-filters/contrast-reduce-ref.html
new file mode 100644
index 0000000000..ef169da13b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-reduce-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Reduce the Contrast of an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(64, 191, 64);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-reduce.html b/layout/reftests/svg/filters/css-filters/contrast-reduce.html
new file mode 100644
index 0000000000..f4482d4937
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-reduce.html
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Reduce the Contrast of an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast">
+  <link rel="match" href="contrast-reduce-ref.html">
+  <meta name="assert"
+        content="Given a factor of less than one, the CSS contrast filter
+                 function should change color channel values to be closer to
+                 their middle value.">
+  <style type="text/css">
+    #target {
+      filter: contrast(0.5);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-ref.html b/layout/reftests/svg/filters/css-filters/contrast-ref.html
new file mode 100644
index 0000000000..84f5eb0410
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Increase the Contrast of an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a bright green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-zero-ref.html b/layout/reftests/svg/filters/css-filters/contrast-zero-ref.html
new file mode 100644
index 0000000000..5f1a1f6ea6
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-zero-ref.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Reduce the Contrast of an HTML Element Using a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: contrast(0);
+      background-color: rgb(128, 128, 128);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a gray square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-zero.html b/layout/reftests/svg/filters/css-filters/contrast-zero.html
new file mode 100644
index 0000000000..59db11b60c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-zero.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Reduce the Contrast of an HTML Element Using a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast">
+  <link rel="match" href="contrast-zero-ref.html">
+  <meta name="assert"
+        content="Given a factor of zero, the CSS contrast filter function
+                 should change the color of an HTML element to gray.">
+  <style type="text/css">
+    #target {
+      filter: contrast(0);
+      background-color: rgb(0, 128, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a gray square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast.html b/layout/reftests/svg/filters/css-filters/contrast.html
new file mode 100644
index 0000000000..e12b6ebbc9
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Increase the Contrast of an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast">
+  <link rel="match" href="contrast-ref.html">
+  <meta name="assert"
+        content="The CSS contrast filter function should change the color of
+                 an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: contrast(2);
+      background-color: rgb(0, 196, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a bright green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-default-color-ref.html b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color-ref.html
new file mode 100644
index 0000000000..2fe89507c5
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color-ref.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Drop Shadow Default Color</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#drop-shadow);
+      background-color: #00f;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blue square with a green drop shadow.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+      <feDropShadow dx="10" dy="10" stdDeviation="3" flood-color="#0f0" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-default-color.html b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color.html
new file mode 100644
index 0000000000..ac9f8ecb12
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color.html
@@ -0,0 +1,31 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Drop Shadow Default Color</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-drop-shadow">
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow">
+  <link rel="match" href="drop-shadow-default-color-ref.html">
+  <meta name="assert"
+        content="If the color is unspecified in a CSS drop-shadow filter
+                 function, it should default to the value of the CSS color
+                 property.">
+  <style type="text/css">
+    #target {
+      filter: drop-shadow(10px 10px 3px);
+      color: #0f0;
+      background-color: #00f;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blue square with a green drop shadow.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset-ref.html b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset-ref.html
new file mode 100644
index 0000000000..bf04c1d511
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset-ref.html
@@ -0,0 +1,31 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Filters: Negative Drop Shadow Offset</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#drop-shadow);
+      background-color: #00f;
+      position: relative;
+      top: 20px;
+      left: 20px;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blue square with a green drop shadow in its top left corner.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+      <feDropShadow dx="-10" dy="-10" stdDeviation="3" flood-color="#0f0" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset.html b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset.html
new file mode 100644
index 0000000000..79b301daba
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset.html
@@ -0,0 +1,32 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Negative Drop Shadow Offset</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-drop-shadow">
+  <link rel="match" href="drop-shadow-negative-offset-ref.html">
+  <meta name="assert"
+        content="Given negative shadow offsets, the CSS drop-shadow filter
+                 function should add a drop shadow extending from the top left
+                 corner of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: drop-shadow(-10px -10px 3px #0f0);
+      background-color: #00f;
+      position: relative;
+      top: 20px;
+      left: 20px;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blue square with a green drop shadow in its top left corner.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-ref.html b/layout/reftests/svg/filters/css-filters/drop-shadow-ref.html
new file mode 100644
index 0000000000..211fbfbc43
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/drop-shadow-ref.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Drop Shadow on HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#drop-shadow);
+      background-color: #00f;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blue square with a green drop shadow.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+      <feDropShadow dx="10" dy="10" stdDeviation="3" flood-color="#0f0" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow.html b/layout/reftests/svg/filters/css-filters/drop-shadow.html
new file mode 100644
index 0000000000..1e46734651
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/drop-shadow.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Drop Shadow on HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-drop-shadow">
+  <link rel="match" href="drop-shadow-ref.html">
+  <meta name="assert"
+        content="The CSS drop-shadow filter function should add a drop shadow to
+                 an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: drop-shadow(10px 10px 3px #0f0);
+      background-color: #00f;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blue square with a green drop shadow.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/filter-on-huge-bbox.html b/layout/reftests/svg/filters/css-filters/filter-on-huge-bbox.html
new file mode 100644
index 0000000000..6a75f19b27
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/filter-on-huge-bbox.html
@@ -0,0 +1,26 @@
+<head>
+<style>
+body {
+  filter: blur(0px);
+  background-color: red;
+  margin:0px;
+}
+
+a {
+  text-indent: -9999em;
+  top: -9999em;
+  position: absolute;
+}
+
+div {
+  width: 100%;
+  height: 100%;
+  background-color: lime;
+  margin: 0px;
+}
+</style>
+</head>
+<body>
+  <div></div>
+  <a href="http://example.com">http://example.com</a>
+</body>
\ No newline at end of file
diff --git a/layout/reftests/svg/filters/css-filters/filter-on-outer-svg.html b/layout/reftests/svg/filters/css-filters/filter-on-outer-svg.html
new file mode 100644
index 0000000000..72e533a4ed
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/filter-on-outer-svg.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body style="background-color: lime;">
+  <div style="width: 100px; height: 100px; background-color: red;">
+    <svg width="100" height="100" style="filter: opacity(100%);">
+      <g transform="matrix(200,0,0,200,-20000,-20000)">
+        <rect width="200" height="200" style="fill:lime">
+      </g>
+    </svg>
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-one-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-one-ref.html
new file mode 100644
index 0000000000..1a71de85ec
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Grayscale an HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(53, 53, 53);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a gray square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-one.html b/layout/reftests/svg/filters/css-filters/grayscale-one.html
new file mode 100644
index 0000000000..a13aaec7ff
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-one.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Grayscale an HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale">
+  <link rel="match" href="grayscale-one-ref.html">
+  <meta name="assert"
+        content="Given a factor of one, the CSS grayscale filter function should
+                 completely desaturate an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: grayscale(1);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a gray square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-over-one-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-over-one-ref.html
new file mode 100644
index 0000000000..16bac92715
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-over-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Grayscale an HTML Element Using a Factor Over One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(53, 53, 53);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a gray square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-over-one.html b/layout/reftests/svg/filters/css-filters/grayscale-over-one.html
new file mode 100644
index 0000000000..ac3f0496da
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-over-one.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Grayscale an HTML Element Using a Factor Over One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale">
+  <link rel="match" href="grayscale-over-one-ref.html">
+  <meta name="assert"
+        content="Given a factor over one, the CSS grayscale filter function
+                 should completely desaturate an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: grayscale(1000);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a gray square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-percent-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-percent-ref.html
new file mode 100644
index 0000000000..90e4b69f52
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-percent-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Grayscale an HTML Element Using a Percentage</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(145, 197, 145);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a dull green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-percent.html b/layout/reftests/svg/filters/css-filters/grayscale-percent.html
new file mode 100644
index 0000000000..5500e7ce8d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-percent.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Grayscale an HTML Element Using a Percentage</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale">
+  <link rel="match" href="grayscale-percent-ref.html">
+  <meta name="assert"
+        content="Given a percentage, the CSS grayscale filter function should
+                 desaturate an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: grayscale(80%);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a dull green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-ref.html
new file mode 100644
index 0000000000..06da896192
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Grayscale an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(145, 197, 145);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a dull green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-zero-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-zero-ref.html
new file mode 100644
index 0000000000..1c023606fd
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-zero-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Grayscale an HTML Element Using a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-zero.html b/layout/reftests/svg/filters/css-filters/grayscale-zero.html
new file mode 100644
index 0000000000..5cf259540c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-zero.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Grayscale an HTML Element Using a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale">
+  <link rel="match" href="grayscale-zero-ref.html">
+  <meta name="assert"
+        content="Given a factor of zero, the CSS grayscale filter function
+                 should not change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: grayscale(0);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale.html b/layout/reftests/svg/filters/css-filters/grayscale.html
new file mode 100644
index 0000000000..ac15725ab0
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Grayscale an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale">
+  <link rel="match" href="grayscale-ref.html">
+  <meta name="assert"
+        content="The CSS grayscale filter function should desaturate an HTML
+                 element.">
+  <style type="text/css">
+    #target {
+      filter: grayscale(0.8);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a dull green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-360-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-360-ref.html
new file mode 100644
index 0000000000..39583b518b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-360-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Using a 360 Degree Angle</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-360.html b/layout/reftests/svg/filters/css-filters/hue-rotate-360.html
new file mode 100644
index 0000000000..de8791e03d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-360.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Using a 360 Degree Angle</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+  <link rel="match" href="hue-rotate-360-ref.html">
+  <meta name="assert"
+        content="Given a 360 degree angle, the CSS hue-rotate filter function
+                 should not change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: hue-rotate(360deg);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-grad-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-grad-ref.html
new file mode 100644
index 0000000000..855749647f
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-grad-ref.html
@@ -0,0 +1,32 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Using Gradians</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#hue-rotate);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+  <!--
+    This equivalent SVG filter is defined in:
+    http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent
+  -->
+  <svg width="0" height="0">
+    <filter id="hue-rotate">
+      <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-grad.html b/layout/reftests/svg/filters/css-filters/hue-rotate-grad.html
new file mode 100644
index 0000000000..13ff77499a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-grad.html
@@ -0,0 +1,29 @@
+
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Using Gradians</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+  <link rel="match" href="hue-rotate-turns-ref.html">
+  <meta name="assert"
+        content="Given an angle in gradians, the CSS hue-rotate filter function
+                 should change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: hue-rotate(100grad); /* Equivalent to 90deg. */
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel-ref.html
new file mode 100644
index 0000000000..7fa26b5036
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel-ref.html
@@ -0,0 +1,37 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Containing Colors with Multiple RGB Channels</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      width: 150px;
+      height: 150px;
+    }
+    .color-strip {
+      height: 50px;
+    }
+    #color-strip-1 {
+      background-color: rgb(64, 187, 46);
+    }
+    #color-strip-2 {
+      background-color: rgb(64, 250, 255);
+    }
+    #color-strip-3 {
+      background-color: rgb(255, 14, 109);
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a horizontal green strip, followed by a cyan strip, followed by a magenta strip.</p>
+  <div id="target">
+    <div id="color-strip-1" class="color-strip"></div>
+    <div id="color-strip-2" class="color-strip"></div>
+    <div id="color-strip-3" class="color-strip"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel.html b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel.html
new file mode 100644
index 0000000000..d6e9650c7a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel.html
@@ -0,0 +1,38 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Containing Colors with Multiple RGB Channels</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: hue-rotate(90deg);
+      width: 150px;
+      height: 150px;
+    }
+    .color-strip {
+      height: 50px;
+    }
+    #color-strip-1 {
+      background-color: rgb(255, 128, 64);
+    }
+    #color-strip-2 {
+      background-color: rgb(128, 255, 64);
+    }
+    #color-strip-3 {
+      background-color: rgb(32, 64, 255);
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a horizontal green strip, followed by a cyan strip, followed by a magenta strip.</p>
+  <div id="target">
+    <div id="color-strip-1" class="color-strip"></div>
+    <div id="color-strip-2" class="color-strip"></div>
+    <div id="color-strip-3" class="color-strip"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-negative-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-negative-ref.html
new file mode 100644
index 0000000000..19c843d0f0
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-negative-ref.html
@@ -0,0 +1,32 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Using a Negative Angle</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#hue-rotate);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+  <!--
+    This equivalent SVG filter is defined in:
+    http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent
+  -->
+  <svg width="0" height="0">
+    <filter id="hue-rotate">
+      <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-negative.html b/layout/reftests/svg/filters/css-filters/hue-rotate-negative.html
new file mode 100644
index 0000000000..97b84be5be
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-negative.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Using a Negative Angle</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+  <link rel="match" href="hue-rotate-negative-ref.html">
+  <meta name="assert"
+        content="Given a negative angle, the CSS hue-rotate filter function
+                 should change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: hue-rotate(-270deg); /* Equivalent to 90deg. */
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-over-360-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360-ref.html
new file mode 100644
index 0000000000..c1744b9601
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360-ref.html
@@ -0,0 +1,32 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Using an Angle Over 360 Degrees</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#hue-rotate);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+  <!--
+    This equivalent SVG filter is defined in:
+    http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent
+  -->
+  <svg width="0" height="0">
+    <filter id="hue-rotate">
+      <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-over-360.html b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360.html
new file mode 100644
index 0000000000..dfc067ee2e
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Using an Angle Over 360 Degrees</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+  <link rel="match" href="hue-rotate-over-360-ref.html">
+  <meta name="assert"
+        content="Given an angle over 360 degress, the CSS hue-rotate filter
+                 function should change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: hue-rotate(450deg); /* Equivalent to 90deg. */
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-rad-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-rad-ref.html
new file mode 100644
index 0000000000..82ae7b28cb
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-rad-ref.html
@@ -0,0 +1,32 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Using Radians</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#hue-rotate);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+  <!--
+    This equivalent SVG filter is defined in:
+    http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent
+  -->
+  <svg width="0" height="0">
+    <filter id="hue-rotate">
+      <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-rad.html b/layout/reftests/svg/filters/css-filters/hue-rotate-rad.html
new file mode 100644
index 0000000000..5622f441d1
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-rad.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Using Radians</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+  <link rel="match" href="hue-rotate-turns-ref.html">
+  <meta name="assert"
+        content="Given an angle in radians, the CSS hue-rotate filter function
+                 should change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: hue-rotate(1.57079632679rad); /* Equivalent to 90deg. */
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-ref.html
new file mode 100644
index 0000000000..aec99216a9
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-ref.html
@@ -0,0 +1,32 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#hue-rotate);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+  <!--
+    This equivalent SVG filter is defined in:
+    http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent
+  -->
+  <svg width="0" height="0">
+    <filter id="hue-rotate">
+      <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-turn-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-turn-ref.html
new file mode 100644
index 0000000000..c3a76ea4b5
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-turn-ref.html
@@ -0,0 +1,32 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Using Turns</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#hue-rotate);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+  <!--
+    This equivalent SVG filter is defined in:
+    http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent
+  -->
+  <svg width="0" height="0">
+    <filter id="hue-rotate">
+      <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-turn.html b/layout/reftests/svg/filters/css-filters/hue-rotate-turn.html
new file mode 100644
index 0000000000..d6d8a17f63
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-turn.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Using Turns</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+  <link rel="match" href="hue-rotate-turn-ref.html">
+  <meta name="assert"
+        content="Given an angle in turns, the CSS hue-rotate filter function
+                 should change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: hue-rotate(0.25turn);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-zero-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-zero-ref.html
new file mode 100644
index 0000000000..996b22e0fd
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-zero-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Using a Zero Angle</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-zero.html b/layout/reftests/svg/filters/css-filters/hue-rotate-zero.html
new file mode 100644
index 0000000000..c79f23e5c0
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-zero.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element Using a Zero Angle</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+  <link rel="match" href="hue-rotate-zero-ref.html">
+  <meta name="assert"
+        content="Given a zero angle, the CSS hue-rotate filter function should
+                 not change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: hue-rotate(0);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate.html b/layout/reftests/svg/filters/css-filters/hue-rotate.html
new file mode 100644
index 0000000000..a4536eea7a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Hue Rotate an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+  <link rel="match" href="hue-rotate-ref.html">
+  <meta name="assert"
+        content="The CSS hue-rotate filter function should change the color of
+                 an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: hue-rotate(90deg);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-half-ref.html b/layout/reftests/svg/filters/css-filters/invert-half-ref.html
new file mode 100644
index 0000000000..bd0d67d66b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-half-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor of One Half</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(127, 127, 127);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a gray square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-half.html b/layout/reftests/svg/filters/css-filters/invert-half.html
new file mode 100644
index 0000000000..818d751169
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-half.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor of One Half</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+  <link rel="match" href="invert-half-ref.html">
+  <meta name="assert"
+        content="Given a factor of one half, the CSS invert filter function
+                 should change the color of an HTML element to gray.">
+  <style type="text/css">
+    #target {
+      filter: invert(0.5);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a gray square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-one-ref.html b/layout/reftests/svg/filters/css-filters/invert-one-ref.html
new file mode 100644
index 0000000000..6882b501c9
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-one.html b/layout/reftests/svg/filters/css-filters/invert-one.html
new file mode 100644
index 0000000000..f9e8eaa98a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-one.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+  <link rel="match" href="invert-one-ref.html">
+  <meta name="assert"
+        content="Given a factor of one, the CSS invert filter function should
+                 completely change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: invert(1);
+      background-color: #f0f;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-over-one-ref.html b/layout/reftests/svg/filters/css-filters/invert-over-one-ref.html
new file mode 100644
index 0000000000..4452898e3b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-over-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor Over One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-over-one.html b/layout/reftests/svg/filters/css-filters/invert-over-one.html
new file mode 100644
index 0000000000..374fe6dfde
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-over-one.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor Over One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+  <link rel="match" href="invert-over-one-ref.html">
+  <meta name="assert"
+        content="Given a factor over one, the CSS invert filter function
+                 should completely change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: invert(1000);
+      background-color: #f0f;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-percent-ref.html b/layout/reftests/svg/filters/css-filters/invert-percent-ref.html
new file mode 100644
index 0000000000..fd197f038c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-percent-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Percentage</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(63, 191, 63);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-percent.html b/layout/reftests/svg/filters/css-filters/invert-percent.html
new file mode 100644
index 0000000000..d56dc17418
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-percent.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Percentage</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+  <link rel="match" href="invert-percent-ref.html">
+  <meta name="assert"
+        content="Given a percentage, the CSS invert filter function should
+                 change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: invert(75%);
+      background-color: #f0f;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-ref.html b/layout/reftests/svg/filters/css-filters/invert-ref.html
new file mode 100644
index 0000000000..c5af4b6116
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(63, 191, 63);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-zero-ref.html b/layout/reftests/svg/filters/css-filters/invert-zero-ref.html
new file mode 100644
index 0000000000..3f000a71dd
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-zero-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-zero.html b/layout/reftests/svg/filters/css-filters/invert-zero.html
new file mode 100644
index 0000000000..9adb505dd4
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-zero.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+  <link rel="match" href="invert-zero-ref.html">
+  <meta name="assert"
+        content="Given a factor of zero, the CSS invert filter function should
+                 not change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: invert(0);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert.html b/layout/reftests/svg/filters/css-filters/invert.html
new file mode 100644
index 0000000000..8ba201e227
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+  <link rel="match" href="invert-ref.html">
+  <meta name="assert"
+        content="The CSS invert filter function should change the color of an
+                 HTML element.">
+  <style type="text/css">
+    #target {
+      filter: invert(0.75);
+      background-color: #f0f;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-one-ref.html b/layout/reftests/svg/filters/css-filters/opacity-one-ref.html
new file mode 100644
index 0000000000..b75678edbb
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-one.html b/layout/reftests/svg/filters/css-filters/opacity-one.html
new file mode 100644
index 0000000000..8e0f26ba01
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-one.html
@@ -0,0 +1,36 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity">
+  <link rel="match" href="opacity-one-ref.html">
+  <meta name="assert"
+        content="Given a factor of one, the CSS opacity filter function should
+                 not change the opaqueness of an HTML element.">
+  <style type="text/css">
+    #below-target {
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+    #target {
+      filter: opacity(1000);
+      background-color: #0f0;
+      position: relative;
+      top: -100px;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="below-target"></div>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-over-one-ref.html b/layout/reftests/svg/filters/css-filters/opacity-over-one-ref.html
new file mode 100644
index 0000000000..d674607041
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-over-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor Over One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source-ref.html b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source-ref.html
new file mode 100644
index 0000000000..dea9f84a5a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source-ref.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Opacity to a Translucent HTML Element Using a Factor Over One</title>
+  <style type="text/css">
+    #target {
+      background-color: rgba(0, 255, 0, 0.25);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a faded green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source.html b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source.html
new file mode 100644
index 0000000000..07ff65ed7b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Opacity to a Translucent HTML Element Using a Factor Over One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity">
+  <link rel="match" href="opacity-over-one-translucent-source-ref.html">
+  <meta name="assert"
+        content="Given a factor over one, the CSS opacity filter function should
+                 not change the translucency of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: opacity(1000);
+      background-color: rgba(0, 255, 0, 0.25);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a faded green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-over-one.html b/layout/reftests/svg/filters/css-filters/opacity-over-one.html
new file mode 100644
index 0000000000..2716d39bf1
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-over-one.html
@@ -0,0 +1,36 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor Over One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity">
+  <link rel="match" href="opacity-over-one-ref.html">
+  <meta name="assert"
+        content="Given a factor over one, the CSS opacity filter function should
+                 not change the opaqueness of an HTML element.">
+  <style type="text/css">
+    #below-target {
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+    #target {
+      filter: opacity(1000);
+      background-color: #0f0;
+      position: relative;
+      top: -100px;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="below-target"></div>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-percent-ref.html b/layout/reftests/svg/filters/css-filters/opacity-percent-ref.html
new file mode 100644
index 0000000000..f673701fe8
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-percent-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Opacity to an HTML Element Using a Percentage</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(192, 255, 192);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a faded green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-percent.html b/layout/reftests/svg/filters/css-filters/opacity-percent.html
new file mode 100644
index 0000000000..5cc4ab5d23
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-percent.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Opacity to an HTML Element Using a Percentage</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity">
+  <link rel="match" href="opacity-percent-ref.html">
+  <meta name="assert"
+        content="Given a percentage, the CSS opacity filter function should make
+                 an HTML element translucent.">
+  <style type="text/css">
+    #target {
+      filter: opacity(25%);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a faded green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-ref.html b/layout/reftests/svg/filters/css-filters/opacity-ref.html
new file mode 100644
index 0000000000..adbfcf2bb7
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Opacity to an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(192, 255, 192);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a faded green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-zero-ref.html b/layout/reftests/svg/filters/css-filters/opacity-zero-ref.html
new file mode 100644
index 0000000000..69821d5ac4
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-zero-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #below-target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="below-target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-zero.html b/layout/reftests/svg/filters/css-filters/opacity-zero.html
new file mode 100644
index 0000000000..da5e6899ff
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-zero.html
@@ -0,0 +1,36 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity">
+  <link rel="match" href="opacity-zero-ref.html">
+  <meta name="assert"
+        content="Given a factor of zero, the CSS opacity filter function should
+                 make an HTML element completely transparent.">
+  <style type="text/css">
+    #below-target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+    #target {
+      filter: opacity(0);
+      background-color: #f00;
+      position: relative;
+      top: -100px;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="below-target"></div>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity.html b/layout/reftests/svg/filters/css-filters/opacity.html
new file mode 100644
index 0000000000..3ea8f1589c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Opacity to an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity">
+  <link rel="match" href="opacity-ref.html">
+  <meta name="assert"
+        content="The CSS opacity filter function should make an HTML element
+                 translucent.">
+  <style type="text/css">
+    #target {
+      filter: opacity(0.25);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a faded green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/pass.svg b/layout/reftests/svg/filters/css-filters/pass.svg
new file mode 100644
index 0000000000..e76380c89a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/pass.svg
@@ -0,0 +1,8 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <title>Testcase reference file for generic pass condition</title>
+  <rect width="100%" height="100%" fill="lime"/>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/svg/filters/css-filters/reftest.list b/layout/reftests/svg/filters/css-filters/reftest.list
new file mode 100644
index 0000000000..f204de98cd
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/reftest.list
@@ -0,0 +1,71 @@
+# These tests verify that CSS filters behave properly.
+# e.g. filter: blur(3px)
+
+== blur.html blur-ref.html
+== blur.svg blur-ref.svg
+== blur-calc.html blur-calc-ref.html
+== blur-calc-negative.html blur-calc-negative-ref.html
+fuzzy-if(cocoaWidget,0-1,0-2) skip-if(d2d) == blur-cap-large-radius-on-software.html blur-cap-large-radius-on-software-ref.html
+fuzzy-if(!useDrawSnapshot,2-5,4764-8168) fuzzy-if(Android&&device&&!swgl,5-5,8574-8574) == blur-clip-rect.html ../feGaussianBlur-4-ref.svg
+== blur-em-radius.html blur-em-radius-ref.html
+== blur-invalid-radius.html blur-invalid-radius-ref.html
+== blur-rem-radius.html blur-rem-radius-ref.html
+== blur-zero-radius.html blur-zero-radius-ref.html
+fails-if(useDrawSnapshot) == blur-zoomed-page.html blur-zoomed-page-ref.html
+== brightness.html brightness-ref.html
+== brightness-darken.html brightness-darken-ref.html
+== brightness-extreme.html brightness-extreme-ref.html
+== brightness-one.html brightness-one-ref.html
+== brightness-percent.html brightness-percent-ref.html
+== brightness-zero.html brightness-zero-ref.html
+== containing-block-1.html containing-block-1-ref.html
+== contrast.html contrast-ref.html
+== contrast-extreme.html contrast-extreme-ref.html
+== contrast-one.html contrast-one-ref.html
+== contrast-percent.html contrast-percent-ref.html
+== contrast-reduce.html contrast-reduce-ref.html
+== contrast-zero.html contrast-zero-ref.html
+== drop-shadow.html drop-shadow-ref.html
+== drop-shadow-default-color.html drop-shadow-default-color-ref.html
+== drop-shadow-negative-offset.html drop-shadow-negative-offset-ref.html
+== filter-on-huge-bbox.html pass.svg
+fuzzy(0-1,0-44) fuzzy-if(winWidget,0-1,0-198) == filter-on-outer-svg.html pass.svg
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale.html grayscale-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale-one.html grayscale-one-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale-over-one.html grayscale-over-one-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale-percent.html grayscale-percent-ref.html
+fuzzy(0-1,0-10000) == grayscale-zero.html grayscale-zero-ref.html
+== hue-rotate.html hue-rotate-ref.html
+== hue-rotate-360.html hue-rotate-360-ref.html
+== hue-rotate-grad.html hue-rotate-grad-ref.html
+fuzzy-if(!useDrawSnapshot&&!geckoview,2-2,7500-7500) fuzzy-if(d2d,0-2,0-7500) == hue-rotate-multichannel.html hue-rotate-multichannel-ref.html
+== hue-rotate-negative.html hue-rotate-negative-ref.html
+== hue-rotate-over-360.html hue-rotate-over-360-ref.html
+== hue-rotate-rad.html hue-rotate-rad-ref.html
+== hue-rotate-turn.html hue-rotate-turn-ref.html
+== hue-rotate-zero.html hue-rotate-zero-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == invert.html invert-ref.html
+fuzzy(0-1,0-10000) == invert-half.html invert-half-ref.html
+== invert-one.html invert-one-ref.html
+== invert-over-one.html invert-over-one-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == invert-percent.html invert-percent-ref.html
+== invert-zero.html invert-zero-ref.html
+fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == opacity.html opacity-ref.html
+== opacity-one.html opacity-one-ref.html
+== opacity-over-one.html opacity-over-one-ref.html
+fuzzy(0-1,0-10000) == opacity-over-one-translucent-source.html opacity-over-one-translucent-source-ref.html
+fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == opacity-percent.html opacity-percent-ref.html
+== opacity-zero.html opacity-zero-ref.html
+== saturate.html saturate-ref.html
+fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == saturate-desaturate.html saturate-desaturate-ref.html
+== saturate-extreme.html saturate-extreme-ref.html
+== saturate-one.html saturate-one-ref.html
+== saturate-percent.html saturate-percent-ref.html
+fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == saturate-zero.html saturate-zero-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia.html sepia-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia-one.html sepia-one-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia-over-one.html sepia-over-one-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia-percent.html sepia-percent-ref.html
+== sepia-zero.html sepia-zero-ref.html
+
+fuzzy(0-2,0-125000) == scale-filtered-content-01.html scale-filtered-content-01-ref.html
diff --git a/layout/reftests/svg/filters/css-filters/saturate-desaturate-ref.html b/layout/reftests/svg/filters/css-filters/saturate-desaturate-ref.html
new file mode 100644
index 0000000000..61cd7036b2
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-desaturate-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Desaturate an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(145, 197, 145);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a dull green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-desaturate.html b/layout/reftests/svg/filters/css-filters/saturate-desaturate.html
new file mode 100644
index 0000000000..fdd080361f
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-desaturate.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Desaturate an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate">
+  <link rel="match" href="saturate-desaturate-ref.html">
+  <meta name="assert"
+        content="Given a factor of less than one, the CSS saturate filter
+                 function should dull the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: saturate(0.2);
+      background-color: rgb(0, 255, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a dull green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-extreme-ref.html b/layout/reftests/svg/filters/css-filters/saturate-extreme-ref.html
new file mode 100644
index 0000000000..fd7f3711c1
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-extreme-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Saturate an HTML Element Using a Large Factor</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a bright green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-extreme.html b/layout/reftests/svg/filters/css-filters/saturate-extreme.html
new file mode 100644
index 0000000000..d533074f00
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-extreme.html
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Saturate an HTML Element Using a Large Factor</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate">
+  <link rel="match" href="saturate-extreme-ref.html">
+  <meta name="assert"
+        content="Given a large factor, the CSS saturate filter function should
+                 significantly increase any non-zero color channels in an HTML
+                 element.">
+  <style type="text/css">
+    #target {
+      filter: saturate(1000);
+      background-color: rgb(0, 1, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a bright green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-one-ref.html b/layout/reftests/svg/filters/css-filters/saturate-one-ref.html
new file mode 100644
index 0000000000..09c46b9f98
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Saturate an HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(0, 128, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-one.html b/layout/reftests/svg/filters/css-filters/saturate-one.html
new file mode 100644
index 0000000000..7633f568fa
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-one.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Saturate an HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate">
+  <link rel="match" href="saturate-one-ref.html">
+  <meta name="assert"
+        content="Given a factor of one, the CSS saturate filter function should
+                 not change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: saturate(1);
+      background-color: rgb(0, 128, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-percent-ref.html b/layout/reftests/svg/filters/css-filters/saturate-percent-ref.html
new file mode 100644
index 0000000000..9ffb3a5ae1
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-percent-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Saturate an HTML Element Using a Percentage</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a bright green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-percent.html b/layout/reftests/svg/filters/css-filters/saturate-percent.html
new file mode 100644
index 0000000000..17b6ea791c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-percent.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Saturate an HTML Element Using a Percentage</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate">
+  <link rel="match" href="saturate-percent-ref.html">
+  <meta name="assert"
+        content="Given a percentage, the CSS saturate filter function should
+                 change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: saturate(500%);
+      background-color: rgb(0, 128, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a bright green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-ref.html b/layout/reftests/svg/filters/css-filters/saturate-ref.html
new file mode 100644
index 0000000000..9f142cd743
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Saturate an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a bright green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-zero-ref.html b/layout/reftests/svg/filters/css-filters/saturate-zero-ref.html
new file mode 100644
index 0000000000..fd439a899c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-zero-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Desaturate an HTML Element Using a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(53, 53, 53);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a gray square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-zero.html b/layout/reftests/svg/filters/css-filters/saturate-zero.html
new file mode 100644
index 0000000000..0b281e017d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-zero.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Desaturate an HTML Element Using a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate">
+  <link rel="match" href="saturate-zero-ref.html">
+  <meta name="assert"
+        content="Given a factor of zero, the CSS saturate filter function should
+                 completely desaturate an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: saturate(0);
+      background-color: rgb(255, 0, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a gray square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate.html b/layout/reftests/svg/filters/css-filters/saturate.html
new file mode 100644
index 0000000000..330464a643
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Saturate an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate">
+  <link rel="match" href="saturate-ref.html">
+  <meta name="assert"
+        content="The CSS saturate filter function should change the color of an
+                 HTML element.">
+  <style type="text/css">
+    #target {
+      filter: saturate(5);
+      background-color: rgb(0, 128, 0);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a bright green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/scale-filtered-content-01-ref.html b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01-ref.html
new file mode 100644
index 0000000000..a212778d0d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01-ref.html
@@ -0,0 +1,33 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Filtered content should be rendered in device space</title>
+  <style type="text/css">
+    #filtered {
+      width: 100px;
+      height: 50px;
+      background-color: lime;
+      opacity: 0.5;
+      transform: translate(10px) scale(5);
+      transform-origin: 0 0;
+    }
+    .inner {
+      position: absolute;
+      background-color: blue;
+      width: 10px;
+      height:10px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see clear blue rects.</p>
+  <div id="filtered">
+    <div class="inner" style="left:10px; top:10px;"></div>
+    <div class="inner" style="left:50px; top:20px;"></div>
+    <div class="inner" style="left:80px; top:30px;"></div>
+  </div>
+</body>
diff --git a/layout/reftests/svg/filters/css-filters/scale-filtered-content-01.html b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01.html
new file mode 100644
index 0000000000..4546980179
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01.html
@@ -0,0 +1,33 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Filtered content should be rendered in device space</title>
+  <style type="text/css">
+    #filtered {
+      width: 100px;
+      height: 50px;
+      background-color: lime;
+      filter: opacity(50%);
+      transform: translate(10px) scale(5);
+      transform-origin: 0 0;
+    }
+    .inner {
+      position: absolute;
+      background-color: blue;
+      width: 10px;
+      height:10px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see clear blue rects.</p>
+  <div id="filtered">
+    <div class="inner" style="left:10px; top:10px;"></div>
+    <div class="inner" style="left:50px; top:20px;"></div>
+    <div class="inner" style="left:80px; top:30px;"></div>
+  </div>
+</body>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-one-ref.html b/layout/reftests/svg/filters/css-filters/sepia-one-ref.html
new file mode 100644
index 0000000000..c0f77edcbc
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(99, 89, 69);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a brown square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-one.html b/layout/reftests/svg/filters/css-filters/sepia-one.html
new file mode 100644
index 0000000000..cad7d6fc93
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-one.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia">
+  <link rel="match" href="sepia-one-ref.html">
+  <meta name="assert"
+        content="Given a factor of one, the CSS sepia filter function should
+                 change the color of an HTML element to a brown hue.">
+  <style type="text/css">
+    #target {
+      filter: sepia(1);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a brown square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-over-one-ref.html b/layout/reftests/svg/filters/css-filters/sepia-over-one-ref.html
new file mode 100644
index 0000000000..9863aa6466
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-over-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor Over One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(99, 89, 69);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a brown square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-over-one.html b/layout/reftests/svg/filters/css-filters/sepia-over-one.html
new file mode 100644
index 0000000000..6836fbbd5d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-over-one.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor Over One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia">
+  <link rel="match" href="sepia-over-one-ref.html">
+  <meta name="assert"
+        content="Given a factor over one, the CSS sepia filter function should
+                 change the color of an HTML element to a brown hue.">
+  <style type="text/css">
+    #target {
+      filter: sepia(1000);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a brown square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-percent-ref.html b/layout/reftests/svg/filters/css-filters/sepia-percent-ref.html
new file mode 100644
index 0000000000..47dea90f0c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-percent-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Sepia to an HTML Element Using a Percentage</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(167, 187, 115);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a brownish green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-percent.html b/layout/reftests/svg/filters/css-filters/sepia-percent.html
new file mode 100644
index 0000000000..f044a7771e
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-percent.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Sepia to an HTML Element Using a Percentage</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia">
+  <link rel="match" href="sepia-percent-ref.html">
+  <meta name="assert"
+        content="Given a percentage, the CSS sepia filter function should
+                 change the color of an HTML element to a more brownish hue.">
+  <style type="text/css">
+    #target {
+      filter: sepia(85%);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a brownish green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-ref.html b/layout/reftests/svg/filters/css-filters/sepia-ref.html
new file mode 100644
index 0000000000..e30ae8a859
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply sepia to an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: rgb(167, 187, 115);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a brownish green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-zero-ref.html b/layout/reftests/svg/filters/css-filters/sepia-zero-ref.html
new file mode 100644
index 0000000000..4a358c45d5
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-zero-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-zero.html b/layout/reftests/svg/filters/css-filters/sepia-zero.html
new file mode 100644
index 0000000000..720e22e15b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-zero.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia">
+  <link rel="match" href="sepia-zero-ref.html">
+  <meta name="assert"
+        content="Given a factor of zero, the CSS sepia filter function should
+                 not change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: sepia(0);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia.html b/layout/reftests/svg/filters/css-filters/sepia.html
new file mode 100644
index 0000000000..4af24919fa
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Apply sepia to an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia">
+  <link rel="match" href="sepia-ref.html">
+  <meta name="assert"
+        content="The CSS sepia filter function should change the color of an
+                 HTML element to a more brownish hue.">
+  <style type="text/css">
+    #target {
+      filter: sepia(0.85);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a brownish green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter-ref.html
new file mode 100644
index 0000000000..8c2a796d3c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter-ref.html
@@ -0,0 +1,32 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS and SVG Filter Chains: Clip Input CSS Filter with Following SVG Filter's Filter Region</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#blur) url(#clip-and-red-to-green);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="blur" x="-50" y="-50" width="200" height="200">
+      <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+    </filter>
+    <!-- Use a small filter region that clips the blur extents. -->
+    <filter id="clip-and-red-to-green" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+      <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter.html b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter.html
new file mode 100644
index 0000000000..2fcb027818
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter.html
@@ -0,0 +1,34 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS and SVG Filter Chains: Clip Input CSS Filter with Following SVG Filter's Filter Region</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterEffectsRegion">
+  <link rel="match" href="css-filter-first-ref.html">
+  <meta name="assert"
+        content="An SVG filter's filter region should clip the input from a CSS
+                 filter function.">
+  <style type="text/css">
+    #target {
+      filter: blur(3px) url(#clip-and-red-to-green);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <!-- Use a small filter region that clips the blur extents. -->
+    <filter id="clip-and-red-to-green" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+      <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first-ref.html
new file mode 100644
index 0000000000..838eeaf4b9
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first-ref.html
@@ -0,0 +1,31 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS and SVG Filter Chains: CSS Filter as First Filter</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#blur-and-red-to-green);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="blur-and-red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+      <!-- Blur the red square. -->
+      <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+      <!-- Turn the red square into a green square. -->
+      <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first.html
new file mode 100644
index 0000000000..d2e208dd6c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first.html
@@ -0,0 +1,33 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS and SVG Filter Chains: CSS Filter as First Filter</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+  <link rel="match" href="css-filter-first-ref.html">
+  <meta name="assert"
+        content="A filter chain starting with a CSS filter function followed by
+                 an SVG reference filter should render correctly.">
+  <style type="text/css">
+    #target {
+      filter: blur(3px) url(#red-to-green);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+      <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last-ref.html
new file mode 100644
index 0000000000..c335d1683e
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last-ref.html
@@ -0,0 +1,31 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS and SVG Filter Chains: CSS Filter as Last Filter</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#red-to-green-and-blur);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="red-to-green-and-blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+      <!-- Turn the red square into a green square. -->
+      <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+      <!-- Blur the red square. -->
+      <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last.html
new file mode 100644
index 0000000000..d4e00fb30e
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last.html
@@ -0,0 +1,34 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS and SVG Filter Chains: CSS Filter as Last Filter</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+  <link rel="match" href="css-filter-last-ref.html">
+  <meta name="assert"
+        content="A filter chain starting with an SVG reference filter followed
+                 by a CSS filter function should render correctly.">
+  <style type="text/css">
+    #target {
+      filter: url(#red-to-green) blur(3px);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+      <!-- Turn the red square into a green square. -->
+      <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle-ref.html
new file mode 100644
index 0000000000..9340231a24
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle-ref.html
@@ -0,0 +1,38 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS and SVG Filter Chains: CSS Filter as Last Filter</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      filter: url(#magenta-to-green-and-blur);
+      background-color: #f0f;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="magenta-to-green-and-blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+      <!-- Turn the magenta square into a red square. -->
+      <feComponentTransfer color-interpolation-filters="sRGB">
+        <feFuncR type="identity"/>
+        <feFuncG type="table" tableValues="0 0"/>
+        <feFuncB type="table" tableValues="0 0"/>
+        <feFuncA type="identity"/>
+      </feComponentTransfer>
+      <!-- Blur the red square. -->
+      <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+      <!-- Turn the blurred red square into a blurred green square. -->
+      <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle.html
new file mode 100644
index 0000000000..89020a641c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle.html
@@ -0,0 +1,42 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS and SVG Filter Chains: CSS Filter as Middle Filter</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+  <link rel="match" href="css-filter-middle-ref.html">
+  <meta name="assert"
+        content="A filter chain starting with an SVG reference filter, followed
+                 by a CSS filter function, and followed by an SVG reference
+                 filter should render correctly.">
+  <style type="text/css">
+    #target {
+      filter: url(#magenta-to-red) blur(3px) url(#red-to-green);
+      background-color: #f0f;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="magenta-to-red" color-interpolation-filters="sRGB">
+      <feComponentTransfer>
+        <feFuncR type="identity"/>
+        <feFuncG type="table" tableValues="0 0"/>
+        <feFuncB type="table" tableValues="0 0"/>
+        <feFuncA type="identity"/>
+      </feComponentTransfer>
+    </filter>
+    <filter id="red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feColorMatrix type="hueRotate" values="90"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/reftest.list b/layout/reftests/svg/filters/css-svg-filter-chains/reftest.list
new file mode 100644
index 0000000000..ac3ee0dc0b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/reftest.list
@@ -0,0 +1,8 @@
+# These tests verify that filter chains of combined CSS and SVG filters behave
+# properly.
+# e.g. filter: url(#f1) blur(3px) url(#2) grayscale(0.5);
+
+== clip-input-css-filter.html clip-input-css-filter-ref.html
+fuzzy(0-1,0-288) == css-filter-first.html css-filter-first-ref.html
+== css-filter-last.html css-filter-last-ref.html
+== css-filter-middle.html css-filter-middle-ref.html
diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-01.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-01.svg
new file mode 100644
index 0000000000..ba8e5bb421
--- /dev/null
+++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-01.svg
@@ -0,0 +1,36 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=879682 -->
+  <script>
+
+var NS_SVG = 'http://www.w3.org/2000/svg';
+
+function run_test() {
+  var gNode = document.createElementNS(NS_SVG, "g");
+  gNode.setAttribute('filter', 'url(#filter)');
+
+  var rect = document.createElementNS(NS_SVG, 'rect');
+  rect.setAttribute('width', '100');
+  rect.setAttribute('height', '100');
+  rect.setAttribute('fill', 'white');
+  gNode.appendChild(rect);
+
+  document.documentElement.appendChild(gNode);
+  document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", run_test);
+setTimeout(run_test, 4000); // fallback for running outside reftest
+
+  </script>
+  <filter id="filter" x="20" y="20" width="100" height="100"
+          filterUnits="userSpaceOnUse"
+          primitiveUnits="userSpaceOnUse">
+    <feFlood flood-color="lime"/>
+  </filter>
+  <rect width="100%" height="100%" fill="lime"/>
+  <rect x="20" y="20" width="100" height="100" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-02.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-02.svg
new file mode 100644
index 0000000000..b424e0734e
--- /dev/null
+++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-02.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="run_test();">
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769942 -->
+  <script>
+
+function run_test() {
+  document.documentElement.getBoundingClientRect();
+  document.getElementById("setFilterOnThis").setAttribute('filter', 'url(#filter)');
+  document.documentElement.removeAttribute("class");
+}
+
+  </script>
+  <filter id="filter" x="20%" y="20%" width="100%" height="100%">
+    <feFlood flood-color="lime"/>
+  </filter>
+  <rect width="100%" height="100%" fill="lime"/>
+  <rect x="20" y="20" width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="white" id="setFilterOnThis"/>
+</svg>
diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-03.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-03.svg
new file mode 100644
index 0000000000..4fc7dc8857
--- /dev/null
+++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-03.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+  <!--
+    From https://bugzilla.mozilla.org/show_bug.cgi?id=488702
+  -->
+  <title>Test that invalidation takes filters into account</title>
+  <desc>
+    This test checks that when a container element changes, the area of
+    the screen that is invalidated and repainted takes account of any
+    filter effects on the changed element.
+  </desc>
+  <script type="text/javascript">//<![CDATA[
+
+function show_lime_rect()
+{
+  document.getElementById("g").setAttribute("opacity", "1");
+  document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", show_lime_rect, false);
+setTimeout(show_lime_rect, 1000);
+
+  //]]></script>
+  <filter id="filter" filterUnits="userSpaceOnUse" x="0" y="0" width="200%" height="100%">
+    <feOffset dx="-20"/>
+  </filter>
+  <rect width="100%" height="100%" fill="red"/>
+  <g id="g" opacity="0" filter="url(#filter)">
+    <rect x="20" width="100%" height="100%" fill="lime"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-04.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-04.svg
new file mode 100644
index 0000000000..0e12e8d826
--- /dev/null
+++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-04.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+  <!--
+    From https://bugzilla.mozilla.org/show_bug.cgi?id=488702
+  -->
+  <title>Test that invalidation takes filters on ancestors into account</title>
+  <desc>
+    This test checks that when a container element changes, the area of
+    the screen that is invalidated and repainted takes account of any
+    filter effects on the ancestors of the changed element.
+  </desc>
+  <script type="text/javascript">//<![CDATA[
+
+function show_lime_rect()
+{
+  document.getElementById("g").setAttribute("opacity", "1");
+  document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", show_lime_rect, false);
+setTimeout(show_lime_rect, 1000);
+
+  //]]></script>
+  <filter id="filter" filterUnits="userSpaceOnUse" x="0" y="0" width="200%" height="100%">
+    <feOffset dx="-20"/>
+  </filter>
+  <rect width="100%" height="100%" fill="red"/>
+  <g filter="url(#filter)">
+    <g id="g" opacity="0">
+      <rect x="20" width="100%" height="100%" fill="lime"/>
+    </g>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/dynamic-filtered-foreignObject-01.svg b/layout/reftests/svg/filters/dynamic-filtered-foreignObject-01.svg
new file mode 100644
index 0000000000..2320f21cf6
--- /dev/null
+++ b/layout/reftests/svg/filters/dynamic-filtered-foreignObject-01.svg
@@ -0,0 +1,31 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769942 -->
+  <script>
+
+function run_test() {
+  var fO = document.getElementById("fO");
+  fO.parentNode.removeChild(fO);
+  document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", run_test);
+setTimeout(run_test, 4000); // fallback for running outside reftest
+
+  </script>
+  <filter id="filter" x="0" y="0" width="150" height="150"
+          filterUnits="userSpaceOnUse"
+          primitiveUnits="userSpaceOnUse">
+    <feOffset dx="-50" dy="-50"/>
+  </filter>
+  <rect width="100%" height="100%" fill="lime"/>
+  <g filter="url(#filter)">
+    <foreignObject id="fO" x="50" y="50" width="100" height="100">
+      <div xmlns="http://www.w3.org/1999/xhtml"
+           style="display:block; width:100%; height:100%; background:red;"/>
+    </foreignObject>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feBlend-1-ref.svg b/layout/reftests/svg/filters/feBlend-1-ref.svg
new file mode 100644
index 0000000000..24a6fdfd6a
--- /dev/null
+++ b/layout/reftests/svg/filters/feBlend-1-ref.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" y="0" width="50" height="50" fill="#DFB53F"/>
+<rect x="50" y="0" width="50" height="50" fill="#B5B53F"/>
+<rect x="100" y="0" width="50" height="50" fill="#DFDF3F"/>
+<rect x="150" y="0" width="50" height="50" fill="#B5B53F"/>
+<rect x="200" y="0" width="50" height="50" fill="#DFDF3F"/>
+<rect x="250" y="0" width="50" height="50" fill="#B5DF3F"/>
+<rect x="300" y="0" width="50" height="50" fill="#B5DF3F"/>
+<rect x="350" y="0" width="50" height="50" fill="#B5DF3F"/>
+<rect x="0" y="50" width="50" height="50" fill="#DFB53F"/>
+<rect x="50" y="50" width="50" height="50" fill="#B5DF3F"/>
+<rect x="100" y="50" width="50" height="50" fill="#DFDF3F"/>
+<rect x="150" y="50" width="50" height="50" fill="#DFDF3F"/>
+<rect x="200" y="50" width="50" height="50" fill="#DFC88E"/>
+<rect x="250" y="50" width="50" height="50" fill="#B5DF3F"/>
+<rect x="300" y="50" width="50" height="50" fill="#DFC88E"/>
+<rect x="350" y="50" width="50" height="50" fill="#B5CC3F"/>
+<rect x="0" y="100" width="50" height="50" fill="#DFB53F"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feBlend-1.svg b/layout/reftests/svg/filters/feBlend-1.svg
new file mode 100644
index 0000000000..6a94853f5b
--- /dev/null
+++ b/layout/reftests/svg/filters/feBlend-1.svg
@@ -0,0 +1,104 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
+<filter id="f0" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="normal"/>
+</filter>
+<rect x="0" y="0" width="50" height="50" filter="url(#f0)"/>
+<filter id="f1" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="multiply"/>
+</filter>
+<rect x="50" y="0" width="50" height="50" filter="url(#f1)"/>
+<filter id="f2" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="screen"/>
+</filter>
+<rect x="100" y="0" width="50" height="50" filter="url(#f2)"/>
+<filter id="f3" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="darken"/>
+</filter>
+<rect x="150" y="0" width="50" height="50" filter="url(#f3)"/>
+<filter id="f4" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="lighten"/>
+</filter>
+<rect x="200" y="0" width="50" height="50" filter="url(#f4)"/>
+<filter id="f5" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="overlay"/>
+</filter>
+<rect x="250" y="0" width="50" height="50" filter="url(#f5)"/>
+<filter id="f6" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="color-dodge"/>
+</filter>
+<rect x="300" y="0" width="50" height="50" filter="url(#f6)"/>
+<filter id="f7" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="color-burn"/>
+</filter>
+<rect x="350" y="0" width="50" height="50" filter="url(#f7)"/>
+<filter id="f8" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="hard-light"/>
+</filter>
+<rect x="0" y="50" width="50" height="50" filter="url(#f8)"/>
+<filter id="f9" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="soft-light"/>
+</filter>
+<rect x="50" y="50" width="50" height="50" filter="url(#f9)"/>
+<filter id="f10" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="difference"/>
+</filter>
+<rect x="100" y="50" width="50" height="50" filter="url(#f10)"/>
+<filter id="f11" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="exclusion"/>
+</filter>
+<rect x="150" y="50" width="50" height="50" filter="url(#f11)"/>
+<filter id="f12" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="hue"/>
+</filter>
+<rect x="200" y="50" width="50" height="50" filter="url(#f12)"/>
+<filter id="f13" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="saturation"/>
+</filter>
+<rect x="250" y="50" width="50" height="50" filter="url(#f13)"/>
+<filter id="f14" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="color"/>
+</filter>
+<rect x="300" y="50" width="50" height="50" filter="url(#f14)"/>
+<filter id="f15" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="luminosity"/>
+</filter>
+<rect x="350" y="50" width="50" height="50" filter="url(#f15)"/>
+<filter id="f16" x="0%" y="0%" width="100%" height="100%">
+  <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+  <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+  <feBlend in="a" in2="b" mode="undefined"/>
+</filter>
+<rect x="0" y="100" width="50" height="50" filter="url(#f16)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feBlend-2-ref.svg b/layout/reftests/svg/filters/feBlend-2-ref.svg
new file mode 100644
index 0000000000..6b62e6a270
--- /dev/null
+++ b/layout/reftests/svg/filters/feBlend-2-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+<rect x="150" y="0" width="100" height="100" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feBlend-2.svg b/layout/reftests/svg/filters/feBlend-2.svg
new file mode 100644
index 0000000000..c03e665d20
--- /dev/null
+++ b/layout/reftests/svg/filters/feBlend-2.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feFlood flood-color="#ff0000" result="flood" x="0" y="0" width="100" height="100"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="flood"/>
+</filter>
+<rect x="0" y="0" width="100" height="100" fill="#00ff00" filter="url(#f1)"/>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1181317 -->
+<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feFlood flood-color="#ff0000" result="red" x="150" y="0"
+           width="100" height="100"/>
+  <feBlend mode="hard-light" in="SourceGraphic" in2="red"/>
+</filter>
+<rect x="150" y="0" width="100" height="100" fill="#00ff00" filter="url(#f2)"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feColorMatrix-1-ref.svg b/layout/reftests/svg/filters/feColorMatrix-1-ref.svg
new file mode 100644
index 0000000000..f7328b21ef
--- /dev/null
+++ b/layout/reftests/svg/filters/feColorMatrix-1-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="10" width="80" height="80" fill="#345612" fill-opacity="0.5"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feColorMatrix-1.svg b/layout/reftests/svg/filters/feColorMatrix-1.svg
new file mode 100644
index 0000000000..4cfd34cc4c
--- /dev/null
+++ b/layout/reftests/svg/filters/feColorMatrix-1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0%" y="0%" width="100%" height="100%">
+  <feColorMatrix type="matrix" values="0 1 0 0 0   0 0 1 0 0   1 0 0 0 0   0 0 0 0.5 0"
+   x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"/>
+</filter>
+<rect x="0" y="0" width="100" height="100" fill="#123456" filter="url(#f1)"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feColorMatrix-2-ref.svg b/layout/reftests/svg/filters/feColorMatrix-2-ref.svg
new file mode 100644
index 0000000000..f155cd01f4
--- /dev/null
+++ b/layout/reftests/svg/filters/feColorMatrix-2-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" y="0" width="100" height="100" fill="#345612" fill-opacity="0.5"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feColorMatrix-2.svg b/layout/reftests/svg/filters/feColorMatrix-2.svg
new file mode 100644
index 0000000000..08c7b04122
--- /dev/null
+++ b/layout/reftests/svg/filters/feColorMatrix-2.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feColorMatrix type="matrix" values="0 1 0 0 0   0 0 1 0 0   1 0 0 0 0   0 0 0 0.5 0"
+   style="color-interpolation-filters:sRGB"/>
+</filter>
+<rect x="0" y="0" width="100" height="100" fill="#123456" filter="url(#f1)"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feColorMatrix-saturate-01.svg b/layout/reftests/svg/filters/feColorMatrix-saturate-01.svg
new file mode 100644
index 0000000000..7961889798
--- /dev/null
+++ b/layout/reftests/svg/filters/feColorMatrix-saturate-01.svg
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+  <title>Testcase for Filter Effects Module Level 1 over-saturation</title>
+
+  <defs>
+   <filter id="SaturateHigh">
+      <feColorMatrix in="SourceGraphic" type="saturate" values="11"/>
+   </filter>
+  </defs>
+
+  <rect width="100%" height="100%" fill="#00A654" filter="url(#SaturateHigh)"/>
+</svg> 
diff --git a/layout/reftests/svg/filters/feComponentTransfer-03.svg b/layout/reftests/svg/filters/feComponentTransfer-03.svg
new file mode 100644
index 0000000000..d4ee019848
--- /dev/null
+++ b/layout/reftests/svg/filters/feComponentTransfer-03.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <title>Testcase for feComponentTransfer with default arguments for gamma and linear</title>
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=534841 -->
+  <defs>
+    <filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+           x="0" y="0" width="100%" height="100%">
+      <feComponentTransfer x="0" y="0" width="100%" height="100%"
+        style="color-interpolation-filters:sRGB">
+        <feFuncR type="identity"/>
+        <feFuncG type="gamma"/>
+        <feFuncB type="identity"/>
+        <feFuncA type="linear"/>
+      </feComponentTransfer>
+    </filter>
+  </defs>
+  <rect x="0" y="0" width="100%" height="100%" fill="lime" filter="url(#f1)"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComponentTransfer-04.svg b/layout/reftests/svg/filters/feComponentTransfer-04.svg
new file mode 100644
index 0000000000..bc470d5f30
--- /dev/null
+++ b/layout/reftests/svg/filters/feComponentTransfer-04.svg
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <title>Testcase for feComponentTransfer with single discrete value</title>
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=845985 -->
+  <defs>
+    <filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+           x="0" y="0" width="100%" height="100%">
+      <feComponentTransfer x="0" y="0" width="100%" height="100%"
+        in="SourceAlpha" style="color-interpolation-filters:sRGB">
+        <feFuncG type="discrete" tableValues="1" />
+      </feComponentTransfer>
+    </filter>
+  </defs>
+  <rect x="0" y="0" width="100%" height="100%" fill="red" filter="url(#f1)"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComponentTransfer-1-ref.svg b/layout/reftests/svg/filters/feComponentTransfer-1-ref.svg
new file mode 100644
index 0000000000..cb579e5fd1
--- /dev/null
+++ b/layout/reftests/svg/filters/feComponentTransfer-1-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="10" width="80" height="80" fill="#00ffff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComponentTransfer-1.svg b/layout/reftests/svg/filters/feComponentTransfer-1.svg
new file mode 100644
index 0000000000..6acdb7b567
--- /dev/null
+++ b/layout/reftests/svg/filters/feComponentTransfer-1.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0%" y="0%" width="100%" height="100%">
+  <feComponentTransfer x="10%" y="10%" width="80%" height="80%"
+    style="color-interpolation-filters:sRGB">
+    <feFuncR type="table" tableValues="1 0 0 1"/>
+    <feFuncG type="discrete" tableValues="0 1 0"/>
+    <feFuncB type="linear" slope="0.5" intercept="0.75"/>
+    <feFuncA type="identity"/>
+  </feComponentTransfer>
+</filter>
+<rect x="0" y="0" width="100" height="100" fill="#808080" filter="url(#f1)"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComponentTransfer-2-ref.svg b/layout/reftests/svg/filters/feComponentTransfer-2-ref.svg
new file mode 100644
index 0000000000..bf9d547d17
--- /dev/null
+++ b/layout/reftests/svg/filters/feComponentTransfer-2-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" y="0" width="100" height="100" fill="#00ffff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComponentTransfer-2.svg b/layout/reftests/svg/filters/feComponentTransfer-2.svg
new file mode 100644
index 0000000000..3514ec92f4
--- /dev/null
+++ b/layout/reftests/svg/filters/feComponentTransfer-2.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feComponentTransfer
+    style="color-interpolation-filters:sRGB">
+    <feFuncR type="table" tableValues="1 0 0 1"/>
+    <feFuncG type="discrete" tableValues="0 1 0"/>
+    <feFuncB type="linear" slope="0.5" intercept="0.75"/>
+    <feFuncA type="identity"/>
+  </feComponentTransfer>
+</filter>
+<rect x="0" y="0" width="100" height="100" fill="#808080" filter="url(#f1)"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComposite-1-ref.svg b/layout/reftests/svg/filters/feComposite-1-ref.svg
new file mode 100644
index 0000000000..97b56241b3
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-1-ref.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="10" width="40" height="80" fill="#00ff00"/>
+<rect x="10" y="10" width="40" height="80" fill="#ff0000" opacity="0.5"/>
+<rect x="50" y="10" width="40" height="80" fill="#ff0000" opacity="0.5"/>
+
+<rect x="110" y="10" width="40" height="80" fill="#ff0000"/>
+
+<rect x="250" y="10" width="40" height="80" fill="#ff0000"/>
+
+<rect x="310" y="10" width="40" height="80" fill="#00ff00"/>
+<rect x="310" y="10" width="40" height="80" fill="#ff0000" opacity="0.5"/>
+
+<rect x="450" y="10" width="40" height="80" fill="#ff0000"/>
+
+<rect x="510" y="10" width="40" height="80" fill="#ffff00"/>
+<rect x="550" y="10" width="40" height="80" fill="#ff0000"/>
+
+<rect x="0" y="100" width="100" height="100" fill="#000000"/>
+<rect x="10" y="110" width="80" height="80" fill="#ffffff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComposite-1.svg b/layout/reftests/svg/filters/feComposite-1.svg
new file mode 100644
index 0000000000..a1dfacc774
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-1.svg
@@ -0,0 +1,82 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood"/>
+  <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+   in="flood" operator="over" in2="SourceGraphic"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="0" y="0" width="50" height="100" fill="#00ff00"/>
+  <rect x="50" y="0" width="50" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feFlood flood-color="#ff0000" result="flood"/>
+  <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+   in="flood" operator="in" in2="SourceGraphic"/>
+</filter>
+<g filter="url(#f2)">
+  <rect x="100" y="0" width="50" height="100" fill="#00ff00"/>
+  <rect x="150" y="0" width="50" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+<filter id="f3" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feFlood flood-color="#ff0000" result="flood"/>
+  <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+   in="flood" operator="out" in2="SourceGraphic"/>
+</filter>
+<g filter="url(#f3)">
+  <rect x="200" y="0" width="50" height="100" fill="#00ff00"/>
+  <rect x="250" y="0" width="50" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+<filter id="f4" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood"/>
+  <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+   in="flood" operator="atop" in2="SourceGraphic"/>
+</filter>
+<g filter="url(#f4)">
+  <rect x="300" y="0" width="50" height="100" fill="#00ff00"/>
+  <rect x="350" y="0" width="50" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+<filter id="f5" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feFlood flood-color="#ff0000" result="flood"/>
+  <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+   in="flood" operator="xor" in2="SourceGraphic"/>
+</filter>
+<g filter="url(#f5)">
+  <rect x="400" y="0" width="50" height="100" fill="#00ff00"/>
+  <rect x="450" y="0" width="50" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+<filter id="f6" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feFlood flood-color="#ff0000" result="flood"/>
+  <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+   in="flood" operator="arithmetic" in2="SourceGraphic"
+   k2="1" k3="1"/>
+</filter>
+<g filter="url(#f6)">
+  <rect x="500" y="0" width="50" height="100" fill="#00ff00"/>
+  <rect x="550" y="0" width="50" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+<!-- Test the tricky case where the arithmetic operator leads to drawing outside
+     the bounding box of the source images -->
+<filter id="f7" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" 
+         x="0" y="100" width="100" height="100">
+  <feComposite x="10" y="110" width="80" height="80" style="color-interpolation-filters:sRGB"
+   in="SourceGraphic" operator="arithmetic" in2="SourceGraphic"
+   k4="1"/>
+</filter>
+<rect x="0" y="100" width="100" height="100" fill="#000000"/>
+<g filter="url(#f7)">
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComposite-2-ref.svg b/layout/reftests/svg/filters/feComposite-2-ref.svg
new file mode 100644
index 0000000000..464b6de23b
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-2-ref.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" y="0" width="50" height="100" fill="#00ff00"/>
+<rect x="0" y="0" width="50" height="100" fill="#ff0000" opacity="0.5"/>
+<rect x="50" y="0" width="50" height="100" fill="#ff0000" opacity="0.5"/>
+
+<rect x="100" y="0" width="50" height="100" fill="#808080"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComposite-2.svg b/layout/reftests/svg/filters/feComposite-2.svg
new file mode 100644
index 0000000000..e43088ea84
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-2.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood" x="0" y="0" width="100" height="100"/>
+  <feComposite style="color-interpolation-filters:sRGB"
+   in="flood" operator="over" in2="SourceGraphic"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="0" y="0" width="50" height="100" fill="#00ff00"/>
+  <rect x="50" y="0" width="50" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+<!-- Test that the arithmetic operator actually clamp the result -->
+<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" style="color-interpolation-filters:sRGB">
+  <feFlood flood-color="#ffffff" result="flood" x="100" y="0" width="50" height="100"/>
+  <feComposite result="c" in="SourceGraphic" in2="flood" operator="arithmetic" k2="1" k3="1"/>
+  <feComponentTransfer in="c">
+    <feFuncR type="linear" slope="0.5"/>
+    <feFuncG type="linear" slope="0.5"/>
+    <feFuncB type="linear" slope="0.5"/>
+  </feComponentTransfer>
+</filter>
+<g filter="url(#f2)">
+  <rect x="100" y="0" width="50" height="100" fill="#ff0000"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComposite-arguments-01.svg b/layout/reftests/svg/filters/feComposite-arguments-01.svg
new file mode 100644
index 0000000000..acec685ffc
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-arguments-01.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="filter">
+      <feFlood flood-color="lime" result="flood1"/>
+      <feFlood flood-color="red" result="flood2"/>
+      <feComposite in="flood1" in2="flood2"
+                   operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
+    </filter>
+  </defs>
+  <rect width="100%" height="100%" fill="yellow" filter="url(#filter)"/>
+</svg>
+
diff --git a/layout/reftests/svg/filters/feComposite-operator-lighter-ref.html b/layout/reftests/svg/filters/feComposite-operator-lighter-ref.html
new file mode 100644
index 0000000000..561ade1582
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-operator-lighter-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<style>* { margin: 0; padding: 0; }</style>
+<canvas id="canvas" width="200" height="200"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var width = canvas.width;
+var height = canvas.height;
+
+ctx.globalCompositeOperation = 'lighter';
+ctx.fillStyle = '#f00';
+ctx.fillRect(0,0,width,height);
+
+gradient = ctx.createLinearGradient(0, 0, 0, height);
+gradient.addColorStop(0, "#0f0");
+gradient.addColorStop(1, "#00f");
+ctx.fillStyle = gradient;
+ctx.fillRect(0, 0, width, height);
+</script>
diff --git a/layout/reftests/svg/filters/feComposite-operator-lighter.svg b/layout/reftests/svg/filters/feComposite-operator-lighter.svg
new file mode 100644
index 0000000000..74a969d1ba
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-operator-lighter.svg
@@ -0,0 +1,11 @@
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+    <filter id="f" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
+        <feFlood flood-color="red"/>
+        <feComposite operator="lighter" in2="SourceGraphic"/>
+    </filter>
+    <linearGradient id="g2b" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0" stop-color="#0f0"/>
+        <stop offset="1" stop-color="#00f"/>
+    </linearGradient>
+    <rect width="200" height="200" fill="url(#g2b)" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feComposite-paint-01-ref.svg b/layout/reftests/svg/filters/feComposite-paint-01-ref.svg
new file mode 100644
index 0000000000..eb0e773d3a
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-paint-01-ref.svg
@@ -0,0 +1,9 @@
+<svg id="svg-root" width="100%" height="100%"
+  viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink" shape-rendering="crispEdges">
+
+  <rect transform="translate(100 30)" fill="lime" width="120" height="120"/>
+  <rect transform="translate(249 29)" width="122" height="122" fill="#80FF80"/>
+  <rect transform="translate(99 179)" width="122" height="122" fill="#666"/>
+  <rect transform="translate(249 179)" width="122" height="122" fill="rgb(0,255,255)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feComposite-paint-01.svg b/layout/reftests/svg/filters/feComposite-paint-01.svg
new file mode 100644
index 0000000000..c6c2aac2e8
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-paint-01.svg
@@ -0,0 +1,35 @@
+<svg id="svg-root" width="100%" height="100%"
+  viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink" shape-rendering="crispEdges">
+  <defs>
+    <filter id="composite-ident" x="0" y="0" width="1" height="1">
+      <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="0" k2="1" k3="-1" k4="0"/>
+    </filter>
+    <filter id="composite-negative" x="0" y="0" width="1" height="1">
+      <feComposite operator="arithmetic" in="FillPaint" in2="FillPaint" k1="0" k2="2" k3="-1.5" k4="0"/>
+    </filter>
+    <filter id="composite-mixed" x="0" y="0" width="1" height="1">
+      <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="1" k2="-0.5" k3="0.2" k4="-0.1"/>
+    </filter>
+    <filter id="composite-clamped" x="0" y="0" width="1" height="1">
+      <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="0" k2="10" k3="20" k4="0"/>
+    </filter>
+  </defs>
+    
+  <g transform="translate(100 30)">
+    <rect fill="lime" width="120" height="120"/>
+    <rect fill="red" stroke="red" filter="url(#composite-ident)" x="10" y="10" width="100" height="100"/>
+  </g>
+  <g transform="translate(250 30)">
+    <rect fill="#0F0" filter="url(#composite-negative)" x="10" y="10" width="100" height="100"/>
+    <rect stroke="#80FF80" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/>
+  </g>
+  <g transform="translate(100 180)">
+    <rect fill="rgb(43,17,12)" stroke="rgb(32,42,37)" filter="url(#composite-mixed)" x="10" y="10" width="100" height="100"/>
+    <rect stroke="#666" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/>
+  </g>
+  <g transform="translate(250 180)">
+    <rect fill="rgb(0,127,0)" stroke="rgb(0,0,127)" filter="url(#composite-clamped)" x="10" y="10" width="100" height="100"/>
+    <rect stroke="rgb(0,255,255)" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-1-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-1-ref.svg
new file mode 100644
index 0000000000..60474fb6b2
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-1-ref.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="48" y="10" width="1" height="80" fill="#00ff00"/>
+<rect x="51" y="10" width="1" height="80" fill="#00ff00"/>
+
+<rect x="249" y="10" width="2" height="80" fill="#000000"/>
+
+<rect x="349" y="10" width="2" height="80" fill="#000000"/>
+
+<rect x="1" y="100" width="1" height="100" fill="#00ff00"/>
+<rect x="99" y="100" width="1" height="100" fill="#00ff00"/>
+
+<rect x="101" y="100" width="1" height="100" fill="#ff0000"/>
+
+<rect x="201" y="100" width="1" height="100" fill="#0000ff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-1.svg b/layout/reftests/svg/filters/feConvolveMatrix-1.svg
new file mode 100644
index 0000000000..8bdc267d71
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-1.svg
@@ -0,0 +1,75 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+   order="3" kernelMatrix="0 1 0   1 -4 1   0 1 0" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="0" y="0" width="100" height="100" fill="#00ff00" opacity="0"/>
+  <rect x="49" y="0" width="2" height="100" fill="#00ff00"/>
+</g>
+
+<!-- can't figure out a good way to test kernelUnitLength
+<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+   order="3" kernelUnitLength="0.1" kernelMatrix="0 1 0   1 -4 1   0 1 0" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f2)">
+  <rect x="100" y="0" width="100" height="100" fill="#00ff00" opacity="0"/>
+  <rect x="140" y="0" width="20" height="100" fill="#00ff00"/>
+</g>
+-->
+
+<filter id="f3" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+   order="3" kernelMatrix="0 1 0   1 -4 1   0 1 0" bias="-1" preserveAlpha="true" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f3)">
+  <rect x="200" y="0" width="100" height="100" fill="#00ff00" opacity="0"/>
+  <rect x="249" y="0" width="2" height="100" fill="#00ff00"/>
+</g>
+
+<filter id="f4" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+   order="3" kernelMatrix="0 1 0   1 -4 1   0 1 0" divisor="100000" preserveAlpha="true" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f4)">
+  <rect x="300" y="0" width="100" height="100" fill="#00ff00" opacity="0"/>
+  <rect x="349" y="0" width="2" height="100" fill="#00ff00"/>
+</g>
+
+<filter id="f5" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feConvolveMatrix style="color-interpolation-filters:sRGB"
+   order="3" kernelMatrix="0 1 0   1 -4 1   0 1 0" edgeMode="wrap" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f5)">
+  <rect x="0" y="100" width="100" height="100" fill="#00ff00" opacity="0"/>
+  <rect x="0" y="100" width="1" height="100" fill="#00ff00"/>
+</g>
+
+<filter id="f6" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feConvolveMatrix style="color-interpolation-filters:sRGB"
+   order="3" kernelMatrix="0 1 0   1 -4 1   0 1 0" edgeMode="duplicate" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f6)">
+  <rect x="100" y="100" width="100" height="100" fill="#00ff00" opacity="0"/>
+  <rect x="100" y="100" width="1" height="100" fill="#ff0000"/>
+</g>
+
+<filter id="f7" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feConvolveMatrix style="color-interpolation-filters:sRGB"
+   order="3" kernelMatrix="0 1 0   1 -4 1   0 1 0" edgeMode="none" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f7)">
+  <rect x="200" y="100" width="100" height="100" fill="#00ff00" opacity="0"/>
+  <rect x="200" y="100" width="1" height="100" fill="#0000ff"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-2-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-2-ref.svg
new file mode 100644
index 0000000000..5b4ba420a1
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-2-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="48" y="0" width="1" height="500" fill="#00ff00"/>
+<rect x="51" y="0" width="1" height="500" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-2.svg b/layout/reftests/svg/filters/feConvolveMatrix-2.svg
new file mode 100644
index 0000000000..a804320863
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-2.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feConvolveMatrix style="color-interpolation-filters:sRGB"
+   order="3" kernelMatrix="0 1 0   1 -4 1   0 1 0" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="49" y="0" width="2" height="10000" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-bias-01-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-bias-01-ref.svg
new file mode 100644
index 0000000000..c3c0805595
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-bias-01-ref.svg
@@ -0,0 +1,9 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <title>Reference for feConvolveMatrix with bias</title>
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=527325 -->
+  <rect x="0" y="0" width="100" height="100" fill="rgb(128,255,128)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-bias-01.svg b/layout/reftests/svg/filters/feConvolveMatrix-bias-01.svg
new file mode 100644
index 0000000000..fe96b0b348
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-bias-01.svg
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>Testcase for feConvolveMatrix with bias</title>
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=527325 -->
+  <defs>
+    <filter id="filter" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" style="color-interpolation-filters: sRGB">
+      <feConvolveMatrix kernelMatrix="1 1 1 1 1 1 1 1 1" bias="0.5"/>
+    </filter>
+  </defs>
+  <rect x="0" y="0" width="100" height="100" fill="rgb(0,255,0)" filter="url(#filter)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-order-01-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-order-01-ref.svg
new file mode 100644
index 0000000000..957c65e577
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-order-01-ref.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+	<defs>
+		<filter id="convoluted_lime" x="0%" y="0%" width="100%" height="100%">
+			<feFlood flood-color="lime"/>
+			<feConvolveMatrix order="3" kernelMatrix="
+				0 0 0
+				0 1 0
+				0 0 0"/>
+		</filter>
+	</defs>
+	<rect x="30" y="30" width="97" height="60" filter="url(#convoluted_lime)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-order-01.svg b/layout/reftests/svg/filters/feConvolveMatrix-order-01.svg
new file mode 100644
index 0000000000..6d0d116e77
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-order-01.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+	<desc>
+		<html:p>When the 'order' attribute of feConvolveMatrix is
+		omitted the effect is the same as if the value "3" were given.
+		Per <html:a href="https://bugzilla.mozilla.org/show_bug.cgi?id=478570">Bug 478570</html:a>
+		discussion and linked spec errata.</html:p>
+	</desc>
+	<defs>
+		<filter id="convoluted_lime" x="0%" y="0%" width="100%" height="100%">
+			<feFlood flood-color="lime"/>
+			<feConvolveMatrix kernelMatrix="
+				0 0 0
+				0 1 0
+				0 0 0"/>
+		</filter>
+	</defs>
+	<rect x="30" y="30" width="97" height="60" fill="red" filter="url(#convoluted_lime)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feDiffuseLighting-1-ref.svg b/layout/reftests/svg/filters/feDiffuseLighting-1-ref.svg
new file mode 100644
index 0000000000..efdf453903
--- /dev/null
+++ b/layout/reftests/svg/filters/feDiffuseLighting-1-ref.svg
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
+  <image width='100' height='100'
+         xlink:href="data:image/png;base64,
+iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI
+WXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH3wkbDDIilL5aRAAAAB1pVFh0Q29tbWVudAAAAAAAQ3Jl
+YXRlZCB3aXRoIEdJTVBkLmUHAAAA9UlEQVR42u3csRHDIBBFwbPHddADiqmEduhFlSiWelBOSirX
+YFsB49lXAMHf4DIeEXGFpqi1Fk8zzFPOGchsAQEiIEAEBIiAABEQIAIiIEAEBIiAAPmgUkosy2LV
+H3rd+VitNXrvse+7ZWcASSlFSsmqbggQAQEiIAICRECACAgQAQEiIEAERECACAgQAQEiIEAERECA
+CAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAfnHbv3Z+jzP6L1bdRaQdV1j
+jGHVWUC2bbOoGwJEQIAIiIAAERAgAgJEQIAIiIAAERAg+qrjOOINBcEbJFN4kugAAAAASUVORK5C
+YII="/>
+</svg>
diff --git a/layout/reftests/svg/filters/feDiffuseLighting-1.svg b/layout/reftests/svg/filters/feDiffuseLighting-1.svg
new file mode 100644
index 0000000000..8c5f49b101
--- /dev/null
+++ b/layout/reftests/svg/filters/feDiffuseLighting-1.svg
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px'>
+  <!--
+    A basic test for the <feDiffuseLighting> filter primitive.
+    Setting kernelUnitLength on the <feDiffuseLighting> should allow us to
+    assume pixel perfection.
+    -->
+  <filter id='f' x='0' y='0' width='1' height='1'>
+    <feDiffuseLighting kernelUnitLength='1'>
+      <feDistantLight/>
+    </feDiffuseLighting>
+  </filter>
+  <path d='M0,0 h100 v100 h-100 z M20,20 v60 h60 v-60 z' filter='url(#f)'/>
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-1-ref.svg b/layout/reftests/svg/filters/feDisplacementMap-1-ref.svg
new file mode 100644
index 0000000000..8ac9dff0be
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-1-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="50" width="40" height="40" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-1.svg b/layout/reftests/svg/filters/feDisplacementMap-1.svg
new file mode 100644
index 0000000000..5061bbe053
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-1.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feFlood flood-color="#ff0000" result="flood"/>
+  <feDisplacementMap x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+   in="SourceGraphic" in2="flood" scale="1" xChannelSelector="R" yChannelSelector="G"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-2-ref.svg b/layout/reftests/svg/filters/feDisplacementMap-2-ref.svg
new file mode 100644
index 0000000000..3665d027bc
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-2-ref.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" y="50" width="50" height="50" fill="#00ff00"/>
+<rect x="100" y="50" width="50" height="50" fill="#00ff00"/>
+<rect x="50" y="100" width="100" height="50" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-2.svg b/layout/reftests/svg/filters/feDisplacementMap-2.svg
new file mode 100644
index 0000000000..29a7224b86
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-2.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feFlood flood-color="#ff0000" result="flood" x="0" y="0" width="100" height="100"/>
+  <feDisplacementMap style="color-interpolation-filters:sRGB"
+   in="SourceGraphic" in2="flood" scale="100" xChannelSelector="R" yChannelSelector="G"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-alpha-01.svg b/layout/reftests/svg/filters/feDisplacementMap-alpha-01.svg
new file mode 100644
index 0000000000..6933b78f2b
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-alpha-01.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <title>Testcase for feDisplacementMap processing in2 with premultiplied colour values</title>
+
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=584322 -->
+  <defs>
+    <filter id="f1">
+     <feTurbulence baseFrequency="0.1" type="fractalNoise" result="result1"/>
+     <feDisplacementMap id="feDisplacementMap" in2="result1"
+                         xChannelSelector="G" yChannelSelector="G"
+                         scale="50" in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <rect width="100%" height="100%" fill="lime"/>
+  <g transform="translate(100,100)">
+    <circle cx="0" cy="0" r="60" fill="red" filter="url('#f1')"/>
+    <circle cx="0" cy="0" r="80" fill="lime"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-colour-01-ref.svg b/layout/reftests/svg/filters/feDisplacementMap-colour-01-ref.svg
new file mode 100644
index 0000000000..2edd897b72
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-colour-01-ref.svg
@@ -0,0 +1,11 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <title>Reference for feDisplacementMap processing in1 with linearRGB colours</title>
+
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=603584 -->
+
+  <rect width="100%" height="100%" fill="#ea2"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-colour-01.svg b/layout/reftests/svg/filters/feDisplacementMap-colour-01.svg
new file mode 100644
index 0000000000..6c8b1cb34e
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-colour-01.svg
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <title>Testcase for feDisplacementMap processing in1 with linearRGB colours</title>
+
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=603584 -->
+  <defs>
+    <filter id="sponge">
+      <feTurbulence baseFrequency="0.1" type="fractalNoise" result="result1"/>
+      <feDisplacementMap id="feDisplacementMap" in2="result1" xChannelSelector="G" yChannelSelector="G" scale="50" in="SourceGraphic"/>
+    </filter>
+  </defs>
+
+  <!-- we can't use our usual lime here as that's the same colour in both colour spaces -->
+  <rect width="100%" height="100%" fill="#ea2"/>
+  <rect stroke="none" style="filter:url(#sponge)" x="50" y="50" width="100" height="100" fill="#ea2" />
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-scale-01.svg b/layout/reftests/svg/filters/feDisplacementMap-scale-01.svg
new file mode 100644
index 0000000000..0b2231e974
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-scale-01.svg
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <title>Test that directionless filter primitive attributes are resolved to user units correctly</title>
+  <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=619967 -->
+  <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="200" color-interpolation-filters="sRGB">
+    <feFlood flood-color="#800" result="map"/>
+    <feDisplacementMap in="SourceGraphic" in2="map" xChannelSelector="R" yChannelSelector="G" scale="100"/>
+  </filter>
+  <rect width="100%" height="100%" fill="lime"/>
+  <rect y="82" width="300" height="8" fill="red"/>
+  <rect width="400" height="200" fill="lime" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feDropShadow-01-ref.svg b/layout/reftests/svg/filters/feDropShadow-01-ref.svg
new file mode 100644
index 0000000000..47058f256f
--- /dev/null
+++ b/layout/reftests/svg/filters/feDropShadow-01-ref.svg
@@ -0,0 +1,68 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+  <title>Reference for Filter Effects Module Level 1 feDropShadow</title>
+
+  <defs>
+    <filter id="dropShadow1">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
+      <feOffset dx="2" dy="2" result="offsetblur"/>
+      <feFlood flood-color="green"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="dropShadow2">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
+      <feOffset dx="-2" dy="-5" result="offsetblur"/>
+      <feFlood flood-color="green"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="dropShadow3">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="2 5"/>
+      <feOffset dx="5" dy="5" result="offsetblur"/>
+      <feFlood flood-color="green" flood-opacity="0.2"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="dropShadow4" color-interpolation-filters="sRGB">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
+      <feOffset dx="5" dy="5" result="offsetblur"/>
+      <feFlood flood-color="green"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="dropShadow5">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
+      <feOffset dx="2" dy="2" result="offsetblur"/>
+      <feFlood flood-color="green"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceAlpha"/>
+      </feMerge>
+    </filter>
+  </defs>
+  <g fill="yellow" transform="translate(10,10)">
+    <circle cx="75" cy="75" r="70" filter="url(#dropShadow1)" />
+    <circle cx="250" cy="75" r="70" filter="url(#dropShadow2)" />
+    <circle cx="425" cy="75" r="70" filter="url(#dropShadow3)" />
+    <circle cx="600" cy="75" r="70" filter="url(#dropShadow4)" />
+    <circle cx="75" cy="250" r="70" filter="url(#dropShadow5)" />
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feDropShadow-01.svg b/layout/reftests/svg/filters/feDropShadow-01.svg
new file mode 100644
index 0000000000..847b878fbc
--- /dev/null
+++ b/layout/reftests/svg/filters/feDropShadow-01.svg
@@ -0,0 +1,43 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+  <title>Testcase for Filter Effects Module Level 1 feDropShadow</title>
+
+  <defs>
+    <!-- check default values -->
+    <filter id="dropShadow1">
+      <feDropShadow flood-color="green"/>
+    </filter>
+    <!-- check negative dx, dy -->
+    <filter id="dropShadow2">
+      <feDropShadow stdDeviation="5" dx="-2" dy="-5" flood-color="green"/>
+    </filter>
+    <!-- check flood-opacity and non-default values -->
+    <filter id="dropShadow3">
+      <feDropShadow stdDeviation="2 5" dx="5" dy="5" flood-color="green" flood-opacity="0.2"/>
+    </filter>
+    <!-- check sRGB -->
+    <filter id="dropShadow4" color-interpolation-filters="sRGB">
+      <feDropShadow stdDeviation="5" dx="5" dy="5" flood-color="green"/>
+    </filter>
+    <!-- check sourceAlpha input -->
+    <filter id="dropShadow5">
+      <feDropShadow in="SourceAlpha" flood-color="green"/>
+    </filter>
+    <!-- check negative stdDeviation (should not display anything) -->
+    <filter id="dropShadow6">
+      <feDropShadow stdDeviation="-2" flood-color="green"/>
+    </filter>
+  </defs>
+  <g fill="yellow" transform="translate(10,10)">
+    <circle cx="75" cy="75" r="70" filter="url(#dropShadow1)" />
+    <circle cx="250" cy="75" r="70" filter="url(#dropShadow2)" />
+    <circle cx="425" cy="75" r="70" filter="url(#dropShadow3)" />
+    <circle cx="600" cy="75" r="70" filter="url(#dropShadow4)" />
+    <circle cx="75" cy="250" r="70" filter="url(#dropShadow5)" />
+    <circle cx="250" cy="250" r="70" filter="url(#dropShadow6)" />
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feFlood-1-ref.svg b/layout/reftests/svg/filters/feFlood-1-ref.svg
new file mode 100644
index 0000000000..3cc5e99005
--- /dev/null
+++ b/layout/reftests/svg/filters/feFlood-1-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="10" width="80" height="80" fill="#00ff00" opacity="0.5"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feFlood-1.svg b/layout/reftests/svg/filters/feFlood-1.svg
new file mode 100644
index 0000000000..1a11222682
--- /dev/null
+++ b/layout/reftests/svg/filters/feFlood-1.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feFlood x="10%" y="10%" width="80%" height="80%" flood-color="#00ff00" flood-opacity="0.5"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="0" y="0" width="100" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feFlood-2-ref.svg b/layout/reftests/svg/filters/feFlood-2-ref.svg
new file mode 100644
index 0000000000..cb122fd129
--- /dev/null
+++ b/layout/reftests/svg/filters/feFlood-2-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<rect x="0" y="0" width="100%" height="100%" fill="#00ff00" opacity="0.5"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feFlood-2.svg b/layout/reftests/svg/filters/feFlood-2.svg
new file mode 100644
index 0000000000..8902a5a263
--- /dev/null
+++ b/layout/reftests/svg/filters/feFlood-2.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feFlood flood-color="#00ff00" flood-opacity="0.5"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="0" y="0" width="100" height="100" fill="#0000ff"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feFlood-color-01.svg b/layout/reftests/svg/filters/feFlood-color-01.svg
new file mode 100644
index 0000000000..779fa5e4b0
--- /dev/null
+++ b/layout/reftests/svg/filters/feFlood-color-01.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <filter id="floodFilter" filterUnits="userSpaceOnUse">
+            <feFlood x="0" y="0" width="100" height="100" color="lime"
+                     flood-color="currentColor" flood-opacity="1"
+            />
+        </filter>
+    </defs>
+    <rect width="100%" height="100%" fill="lime"/>
+    <use style="filter: url(#floodFilter);"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-1-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-1-ref.svg
new file mode 100644
index 0000000000..8728e9adff
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-1-ref.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="10" width="80" height="80" fill="#00ff00"/>
+
+<rect x="110" y="10" width="80" height="80" fill="#00ff00" fill-opacity="0.5"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-1.svg b/layout/reftests/svg/filters/feGaussianBlur-1.svg
new file mode 100644
index 0000000000..ef628ba047
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-1.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feGaussianBlur x="10%" y="10%" width="80%" height="80%" in="SourceGraphic" stdDeviation="0.04"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feGaussianBlur x="10%" y="10%" width="80%" height="80%" in="SourceAlpha" stdDeviation="0.04"
+   result="blur" style="color-interpolation-filters:sRGB"/>
+  <feFlood flood-color="#00ff00" result="flood"/>
+  <feComposite in="flood" operator="in" in2="blur"/>
+</filter>
+<g filter="url(#f2)">
+  <rect x="100" y="0" width="100" height="100" fill="#00ff00" fill-opacity="0.5"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-2-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-2-ref.svg
new file mode 100644
index 0000000000..8d12555188
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-2-ref.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<rect x="130" y="130" width="40" height="40" fill="#00ff00"/>
+
+<rect x="90" y="390" width="120" height="120" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-2.svg b/layout/reftests/svg/filters/feGaussianBlur-2.svg
new file mode 100644
index 0000000000..7af12c6102
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-2.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<!-- It's unfortunately hard to reftest the extent of the blur. We can at
+     least make sure it paints *something* -->
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+
+<!-- the radius affected by the box-blur is bounded by 3 times the standard
+     deviation -->
+<rect x="0" y="0" width="300" height="130" fill="#ffffff"/>
+<rect x="0" y="130" width="130" height="40" fill="#ffffff"/>
+<rect x="170" y="130" width="130" height="40" fill="#ffffff"/>
+<rect x="0" y="170" width="300" height="130" fill="#ffffff"/>
+
+<!-- we can test whether the blur is a reasonable size by bumping up
+     non-zero alpha values a lot -->
+
+<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
+  <feComponentTransfer>
+    <feFuncA type="linear" slope="1000"/>
+  </feComponentTransfer>
+</filter>
+<g filter="url(#f2)">
+  <rect x="100" y="400" width="100" height="100" fill="#00ff00"/>
+</g>
+
+<!-- there should be nonzero alpha values everywhere within 1 standard
+      deviation of the original image -->
+<rect x="0" y="300" width="300" height="90" fill="#ffffff"/>
+<rect x="0" y="390" width="90" height="120" fill="#ffffff"/>
+<rect x="210" y="390" width="90" height="120" fill="#ffffff"/>
+<rect x="0" y="510" width="300" height="90" fill="#ffffff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-3-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-3-ref.svg
new file mode 100644
index 0000000000..542e8a6d55
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-3-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-3.svg b/layout/reftests/svg/filters/feGaussianBlur-3.svg
new file mode 100644
index 0000000000..4d3e640c54
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-3.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
+  <feFlood flood-opacity="0" flood-color="black"/>
+  <feComposite in="blur" operator="over" x="100" y="100" width="100" height="100"/> 
+</filter>
+<g filter="url(#f1)">
+  <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-4-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-4-ref.svg
new file mode 100644
index 0000000000..1b729e3177
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-4-ref.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
+  <feFlood flood-opacity="0" flood-color="black"/>
+  <feComposite in="blur" operator="over" x="100" y="100" width="100" height="100"/> 
+</filter>
+<g filter="url(#f1)">
+  <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-4.svg b/layout/reftests/svg/filters/feGaussianBlur-4.svg
new file mode 100644
index 0000000000..c5fc07d42a
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-4.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" x="100" y="100" width="100" height="100"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-5-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-5-ref.svg
new file mode 100644
index 0000000000..1ed5b8b47c
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-5-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+<g>
+  <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-5.svg b/layout/reftests/svg/filters/feGaussianBlur-5.svg
new file mode 100644
index 0000000000..ef910f498b
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-5.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feGaussianBlur stdDeviation="0.0001"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-6-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-6-ref.svg
new file mode 100644
index 0000000000..1ed5b8b47c
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-6-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+<g>
+  <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-6.svg b/layout/reftests/svg/filters/feGaussianBlur-6.svg
new file mode 100644
index 0000000000..275027ba1c
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-6.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feGaussianBlur stdDeviation="0"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-alpha-01-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-alpha-01-ref.svg
new file mode 100644
index 0000000000..6dd3b1466b
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-alpha-01-ref.svg
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+  <title>SourceAlpha pseudo input reference</title>
+
+  <defs>
+    <filter id="blur">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
+    </filter>
+  </defs>
+
+  <g fill-opacity="0.6" stroke="black" fill="black" stroke-width="3" filter="url(#blur)">
+    <circle cx="98" cy="85" r="25"/>
+    <circle cx="80" cy="110" r="25"/>
+    <circle cx="116" cy="110" r="25"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-alpha-01.svg b/layout/reftests/svg/filters/feGaussianBlur-alpha-01.svg
new file mode 100644
index 0000000000..8e74d9ca01
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-alpha-01.svg
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+  <title>SourceAlpha pseudo input test</title>
+
+  <defs>
+    <filter id="alphaBlur">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
+    </filter>
+  </defs>
+
+  <g fill-opacity="0.6" stroke="black" stroke-width="3" filter="url(#alphaBlur)">
+    <circle cx="98" cy="85" r="25" fill="red"/>
+    <circle cx="80" cy="110" r="25" fill="blue"/>
+    <circle cx="116" cy="110" r="25" fill="green"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software-ref.html b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software-ref.html
new file mode 100644
index 0000000000..4797720d2e
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software-ref.html
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <filter id="blur">
+    <feGaussianBlur stdDeviation="100 0"/>
+  </filter>
+  <g filter="url(#blur)">
+    <rect x="0" y="0" width="100" height="100" fill="#0f0"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software.html b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software.html
new file mode 100644
index 0000000000..f8d7566ed4
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <filter id="blur">
+    <!--
+      When rendering in software, Firefox should cap large blur radii to a
+      smaller value in order to keep performance acceptable.
+    -->
+    <feGaussianBlur stdDeviation="1000000 0"/>
+  </filter>
+  <g filter="url(#blur)">
+    <rect x="0" y="0" width="100" height="100" fill="#0f0"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feImage-1-ref.svg b/layout/reftests/svg/filters/feImage-1-ref.svg
new file mode 100644
index 0000000000..3122ae49d2
--- /dev/null
+++ b/layout/reftests/svg/filters/feImage-1-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<image xlink:href="mozilla-banner.gif" x="10" y="10" width="600" height="58"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feImage-1.svg b/layout/reftests/svg/filters/feImage-1.svg
new file mode 100644
index 0000000000..73fff9ee55
--- /dev/null
+++ b/layout/reftests/svg/filters/feImage-1.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" 
+         x="10" y="10" width="700" height="700">
+  <feImage xlink:href="mozilla-banner.gif" x="10" y="10" width="600" height="58"
+   style="color-interpolation-filters:sRGB"/>
+</filter>
+<g filter="url(#f1)">
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion-ref.html b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion-ref.html
new file mode 100644
index 0000000000..dc7d3d8dca
--- /dev/null
+++ b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion-ref.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE HTML>
+<html>
+<title>feImage Rendering Should Scale To Its Primitive Subregion</title>
+<head>
+  <style>
+    .filtered {
+      height: 30px;
+      width: 600px;
+      background: #0f0;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a long horizontal green rectangle.</p>
+  <div class="filtered"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion.html b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion.html
new file mode 100644
index 0000000000..c66db69110
--- /dev/null
+++ b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion.html
@@ -0,0 +1,44 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE HTML>
+<html>
+<title>feImage Rendering Should Scale To Its Primitive Subregion</title>
+<!--
+  Test for https://bugzilla.mozilla.org/show_bug.cgi?id=1065606
+
+  This test verifies that an feImage renders as large as its primitive subregion
+  before being clipped by its filter region.
+
+  In this case, the primitive subregion is 600x600. The filter region is equal
+  to the bounding box of the filtered element (100% x 30px).
+
+  Thus, the 1x1 green pixel feImage rendering should scale up to the 600x600
+  primitive subregion and then be clipped by the 100% x 30px filter region.
+  Assuming the browser window is more than 600px wide, the final rendering
+  should be a 600x30 green rectangle.
+-->
+<head>
+  <style>
+    .filtered {
+      filter: url(#f);
+      height: 30px;
+      background: red;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a long horizontal green rectangle.</p>
+  <div class="filtered"></div>
+  <svg>
+    <defs>
+      <filter id="f" x="0" y="0" width="1" height="1">
+        <!-- Data URI represents a 1x1 green pixel. -->
+        <feImage width="600" height="600"
+                 xlink:href="data:image/gif;base64,R0lGODlhAQABAIAAAAD/AAAAACwAAAAAAQABAAACAkQBADs="/>
+      </filter>
+    </defs>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/feMerge-1-ref.svg b/layout/reftests/svg/filters/feMerge-1-ref.svg
new file mode 100644
index 0000000000..080cb98645
--- /dev/null
+++ b/layout/reftests/svg/filters/feMerge-1-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="10" width="30" height="80" fill="#00ff00"/>
+<rect x="40" y="10" width="50" height="80" fill="#0000ff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMerge-1.svg b/layout/reftests/svg/filters/feMerge-1.svg
new file mode 100644
index 0000000000..b4c05d2ba2
--- /dev/null
+++ b/layout/reftests/svg/filters/feMerge-1.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feFlood x="0" y="0" width="50%" height="100%" flood-color="#00ff00" result="left"/>
+  <feFlood x="40%" y="0" width="60%" height="100%" flood-color="#0000ff" result="right"/>
+  <feMerge x="10%" y="10%" width="80%" height="80%">
+    <feMergeNode in="left"/>
+    <feMergeNode in="right"/>
+  </feMerge>
+</filter>
+<g filter="url(#f1)">
+  <rect x="0" y="0" width="100" height="100" fill="#000000"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMerge-2-ref.svg b/layout/reftests/svg/filters/feMerge-2-ref.svg
new file mode 100644
index 0000000000..a42ad06263
--- /dev/null
+++ b/layout/reftests/svg/filters/feMerge-2-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<rect x="0" y="0" width="40%" height="100%" fill="#00ff00"/>
+<rect x="40%" y="0" width="60%" height="100%" fill="#0000ff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMerge-2.svg b/layout/reftests/svg/filters/feMerge-2.svg
new file mode 100644
index 0000000000..278b52f39e
--- /dev/null
+++ b/layout/reftests/svg/filters/feMerge-2.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feFlood x="0" y="0" width="50%" height="100%" flood-color="#00ff00" result="left"/>
+  <feFlood x="40%" y="0" width="60%" height="100%" flood-color="#0000ff" result="right"/>
+  <feMerge>
+    <feMergeNode in="left"/>
+    <feMergeNode in="right"/>
+  </feMerge>
+</filter>
+<g filter="url(#f1)">
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-1-ref.svg b/layout/reftests/svg/filters/feMorphology-1-ref.svg
new file mode 100644
index 0000000000..ac4fd4ed72
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-1-ref.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="20" y="20" width="60" height="60" fill="#00ff00"/>
+
+<rect x="135" y="45" width="30" height="10" fill="#00ff00"/>
+
+<rect x="10" y="110" width="80" height="80" fill="#00ff00"/>
+<rect x="30" y="130" width="40" height="40" fill="#000000"/>
+
+<rect x="125" y="115" width="50" height="70" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-1.svg b/layout/reftests/svg/filters/feMorphology-1.svg
new file mode 100644
index 0000000000..cdf91fc01b
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-1.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feMorphology operator="erode" radius="0.2 0.2" x="10%" y="10%" width="80%" height="80%"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feMorphology operator="erode" radius="0.3 0.4" x="10%" y="10%" width="80%" height="80%"/>
+</filter>
+<g filter="url(#f2)">
+  <rect x="100" y="0" width="100" height="100" fill="#00ff00" fill-opacity="0"/>
+  <rect x="105" y="5" width="90" height="90" fill="#00ff00"/>
+</g>
+
+<filter id="f3" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feMorphology operator="dilate" radius="0.2 0.2" x="10%" y="10%" width="80%" height="80%"/>
+</filter>
+<g filter="url(#f3)">
+  <rect x="0" y="100" width="100" height="100" fill="#00ff00"/>
+  <rect x="10" y="110" width="80" height="80" fill="#000000"/>
+</g>
+
+<filter id="f4" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feMorphology operator="dilate" radius="0.2 0.3" x="10%" y="10%" width="80%" height="80%"/>
+</filter>
+<g filter="url(#f4)">
+  <rect x="100" y="100" width="100" height="100" fill="#00ff00" fill-opacity="0"/>
+  <rect x="145" y="145" width="10" height="10" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-2-ref.svg b/layout/reftests/svg/filters/feMorphology-2-ref.svg
new file mode 100644
index 0000000000..27b0336e94
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-2-ref.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="20" y="20" width="60" height="60" fill="#00ff00"/>
+
+<rect x="135" y="45" width="30" height="10" fill="#00ff00"/>
+
+<rect x="-20" y="80" width="140" height="140" fill="#00ff00"/>
+<rect x="30" y="130" width="40" height="40" fill="#000000"/>
+
+<rect x="125" y="115" width="50" height="70" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-2.svg b/layout/reftests/svg/filters/feMorphology-2.svg
new file mode 100644
index 0000000000..7b19aa2458
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-2.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feMorphology operator="erode" radius="20 20"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feMorphology operator="erode" radius="30 40"/>
+</filter>
+<g filter="url(#f2)">
+  <rect x="105" y="5" width="90" height="90" fill="#00ff00"/>
+</g>
+
+<filter id="f3" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feMorphology operator="dilate" radius="20 20"/>
+</filter>
+<g filter="url(#f3)">
+  <rect x="0" y="100" width="100" height="100" fill="#00ff00"/>
+  <rect x="10" y="110" width="80" height="80" fill="#000000"/>
+</g>
+
+<filter id="f4" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feMorphology operator="dilate" radius="20 30"/>
+</filter>
+<g filter="url(#f4)">
+  <rect x="145" y="145" width="10" height="10" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-radius-negative-01.svg b/layout/reftests/svg/filters/feMorphology-radius-negative-01.svg
new file mode 100644
index 0000000000..40a6b7d283
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-radius-negative-01.svg
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <title>Test 'feMorphology' with a negative value for its 'radius'</title>
+  <!--
+    From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and
+    https://bugzilla.mozilla.org/show_bug.cgi?id=1432250
+
+    The negative value should disable the primitive effect and output
+    the input image.
+  -->
+  <filter id="f1">
+    <feMorphology operator="erode" radius="-1"/>
+  </filter>
+  <filter id="f2">
+    <feMorphology operator="erode" radius="-1 50"/>
+  </filter>
+  <rect width="100%" height="100%" fill="red"/>
+  <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/>
+  <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-radius-negative-02.svg b/layout/reftests/svg/filters/feMorphology-radius-negative-02.svg
new file mode 100644
index 0000000000..ccf44aa844
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-radius-negative-02.svg
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <title>Test 'feMorphology' with a negative value for its 'radius'</title>
+  <!--
+    From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and
+    https://bugzilla.mozilla.org/show_bug.cgi?id=1432250
+
+    The negative value should disable the primitive effect and output
+    the input image.
+  -->
+  <filter id="f1">
+    <feMorphology operator="dilate" radius="-1"/>
+  </filter>
+  <filter id="f2">
+    <feMorphology operator="dilate" radius="-1 50"/>
+  </filter>
+  <rect width="100%" height="100%" fill="red"/>
+  <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/>
+  <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-radius-zero-01.svg b/layout/reftests/svg/filters/feMorphology-radius-zero-01.svg
new file mode 100644
index 0000000000..a6646b16f6
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-radius-zero-01.svg
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <title>Test 'feMorphology' with a zero value for its 'radius'</title>
+  <!--
+    From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and
+    https://bugzilla.mozilla.org/show_bug.cgi?id=1432250
+
+    The zero value should disable the primitive effect and output
+    the input image.
+  -->
+  <filter id="f1">
+    <feMorphology operator="erode" radius="0"/>
+  </filter>
+  <filter id="f2">
+    <feMorphology operator="erode" radius="0 50"/>
+  </filter>
+  <rect width="100%" height="100%" fill="red"/>
+  <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/>
+  <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-radius-zero-02.svg b/layout/reftests/svg/filters/feMorphology-radius-zero-02.svg
new file mode 100644
index 0000000000..a819e3b358
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-radius-zero-02.svg
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <title>Test 'feMorphology' with a zero value for its 'radius'</title>
+  <!--
+    From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and
+    https://bugzilla.mozilla.org/show_bug.cgi?id=1432250
+
+    The zero value should disable the primitive effect and output
+    the input image.
+  -->
+  <filter id="f1">
+    <feMorphology operator="dilate" radius="0"/>
+  </filter>
+  <filter id="f2">
+    <feMorphology operator="dilate" radius="0 50"/>
+  </filter>
+  <rect width="100%" height="100%" fill="red"/>
+  <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/>
+  <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feOffset-1-ref.svg b/layout/reftests/svg/filters/feOffset-1-ref.svg
new file mode 100644
index 0000000000..ab54616e89
--- /dev/null
+++ b/layout/reftests/svg/filters/feOffset-1-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="15" y="25" width="75" height="65" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feOffset-1.svg b/layout/reftests/svg/filters/feOffset-1.svg
new file mode 100644
index 0000000000..c94b2ba8eb
--- /dev/null
+++ b/layout/reftests/svg/filters/feOffset-1.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feOffset x="10%" y="10%" width="80%" height="80%" dx="0.15" dy="0.25"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feOffset-2-ref.svg b/layout/reftests/svg/filters/feOffset-2-ref.svg
new file mode 100644
index 0000000000..e54bb9be8d
--- /dev/null
+++ b/layout/reftests/svg/filters/feOffset-2-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="15" y="25" width="100" height="100" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feOffset-2.svg b/layout/reftests/svg/filters/feOffset-2.svg
new file mode 100644
index 0000000000..dc22641c97
--- /dev/null
+++ b/layout/reftests/svg/filters/feOffset-2.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feOffset dx="15" dy="25"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/fePointLight-zoomed-page-ref.svg b/layout/reftests/svg/filters/fePointLight-zoomed-page-ref.svg
new file mode 100644
index 0000000000..d201169a9a
--- /dev/null
+++ b/layout/reftests/svg/filters/fePointLight-zoomed-page-ref.svg
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter id="illuminate-center">
+            <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
+                <fePointLight x="100" y="100" z="100"/>
+            </feDiffuseLighting>
+            <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+        </filter>
+    </defs>
+    <rect width="200" height="200" fill="green" filter="url(#illuminate-center)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/fePointLight-zoomed-page.svg b/layout/reftests/svg/filters/fePointLight-zoomed-page.svg
new file mode 100644
index 0000000000..9bd24878cd
--- /dev/null
+++ b/layout/reftests/svg/filters/fePointLight-zoomed-page.svg
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that fePointLight stays in the right place when the user
+     zooms the page.
+
+     If the test passes, you should see a green box with its center illuminated
+     by a point light. If the test fails, the illumination will be off-center.
+
+     This test checks that SVG filters transform points in user space to points
+     in filter space correctly.
+
+     The root SVG element specifies a width and height to prevent scrollbars
+     from appearing when the page is zoomed.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     reftest-zoom="2.0" width="100" height="100">
+    <defs>
+        <filter id="illuminate-center">
+            <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
+                <fePointLight x="50" y="50" z="50"/>
+            </feDiffuseLighting>
+            <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+        </filter>
+    </defs>
+    <rect width="100" height="100" fill="green" filter="url(#illuminate-center)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feSpecularLighting-1-ref.svg b/layout/reftests/svg/filters/feSpecularLighting-1-ref.svg
new file mode 100644
index 0000000000..c57f91f06d
--- /dev/null
+++ b/layout/reftests/svg/filters/feSpecularLighting-1-ref.svg
@@ -0,0 +1,7 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
+  <image width='100' height='100' xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00d%00%00%00d%08%06%00%00%00p%E2%95T%00%00%17DiCCPICC%20Profile%00%00x%DA%D5yWTUK%B0m%AD%B5%D7N%C0%26%E7%9Cs%CE9%07I%92%B3%92s%DCl2(%02%02%12%14%04%14%11P%14TDT%10%25%8A%80%A8(%E2ADAET%82H%10%15%03%8A%8Ar%3F%F4%9Cs%C3%BB%1Fo%8C%F7%F3%E6G%8F9fU%CF%AA%FA%EA%D1%DD%00%3C%AB%01Tj4%CA%0C%10%13%9BHs%B62%15%F6%F4%F2%16%26N%01%3D%E0%80%0C8%40%02%82%12%A8%26%8E%8Ev%F0%BF%E2%CB%24%20%00%00%0F%15%02%A8%D4h%F8%BF%03KpHB%10%00%E2%08%00%81%C1%09A1%00%C8%15%00%D44%88JK%04%C0m%00%C0XJ%225%11%00%BB%03%00%EC4O%2Fo%00l%1A%00%D8%C3~%F35%00%60%0F%F4%F4%F2%06%C0c%00%C0Nsu6%03%C0s%03%90%18%02%02ha%00%14q%00%10N%0E%0AK%04%A0%98%03%10Xc%83%23b%01%D8%3C%01%08%86A%E1%01%C1%00%3CU%00%20%1F%13%13%17%0C%C0s%13%00%A4%03%FF%93O%D8%7F%F1%0C%FC%C73%20%20%EC%1F%FE%7B%16%00%00%20%99G%24P%A3%03%D2%E0%FF5b%A2%93%FE%AE%C1%0A%00%0C%B1%D1%DB%ED%00%80%13%00%96%82%03%CCm%01%80%1F%00~Q%A3%1D%ED~%E7%20%BC!%B1n.%7F%B8%7Cl%E0v%87%3F%DC0%94f%E9%FC%7B%2F%E2HM4u%06%00n%00%24%94%9A%E8%E8%FAG%CFL%0F7%DB%0E%00%0C%00%C8%A1%90%04%8B%BF%7DND%06%D88%02%00%23%00%D2FKrv%03%00q%00d%20!%D9%C5%02%00%98%01%90W%E9%E1%AE%1E%7Fr%3E%07%87%98%FF%D1Q44%C2%D2%FA%0Fg%8DH%B4v%05%00v%00T4*%CE%D6%F9w-T%13l!%1AB%20%09h%10%02%B1%A0%00v%60%06%E6%7FV%05%08%85%00%A0A2%84%40%02D%C1k%A0A%0C%D8B%1CDC%1C%D0%40%F8O%9E%D9%FFP%2C!%00h%10%06!%FF%CDQ%18%82%20%0E%92%FE%A9%F9%B7%FA%AFC%04%04C%DC%3Fz%C0%9F%18%0DB%20%C1%2F%22%E7%DF%0A%FF%D9%2F%1A%E2%80%A6%DC%AC%BC%AC%BC%F9w%1C%93%C4T1%0D%CC%143%C0%0C1%1D%10%C681%5EP%C0%D41m%CC%043%C2%F40%0DL%07%2C%E1%15%D0%20%EC%EF%1E%FD%22rh1m%A1%C9Uqi%BA%EE%E1%7Ff%08%FCg%02wx%054%88%F8%3FN%F4%A7%F7%D1%D5%CE%D5%7F%3A%84%C4%90%D4D%00%00%B38j%1A-%22%2C%3CQ%D8%84J%8D%0E%91%17%B6%8E%0DR%94%17VUVQ%86%FF%9F%E0%E9%E5-%FC%9B%7Dr%06%04%00%10%CE%FB%FFjq*%00%3AA%00%C8%DE%7F5%FFw%00%9D%91%00%24%D6%7F5%C9N%00%26U%80%E1%23AI%B4%E4%DF%1A%06%00%80%07%3A%60%02v%E0%01A%10%03iP%00U%D0%04%3D0%06%0B%B0%01%07p%05%2F%F0%85%20%08%87%18%A0A%0A%EC%82l%C8%87b8%08%87%A1%1A%EA%A0%01%CE%C2%05h%83N%E8%85%EB0%04%230%06%13%F0%0Cf%60%01%DE%C0%1A%7C%81%1F%08%82%10%11%0A%C2%86%F0%20B%88%04%22%87%A8%22%DA%88!b%81%D8!%CE%88%17%E2%8F%84!%B1H%12%B2%0B%D9%8B%14%23%E5H5r%12iB.!%DD%C8ud%18y%80%3CEf%91e%E4%23%F2%1D%C5%A1%0C(%3B*%80J%A2J%A86j%82%DA%A2%AE%E8N4%0C%8DG%D3%D1%5C%B4%04%ADB%EB%D1%F3h%07z%1D%1DA'%D0%19%F4%0D%BA%8E%03%1C%3D%8E%13'%82S%C0i%E3%CCp%0E8o%5C(%8E%86%CB%C4%15%E1*q%F5%B8%8B%B8%1E%DCm%DCC%DC%0Cn%15%F7%0D%23%60l%980%A6%80%E9a%DB07%2C%08%8B%C72%B1%FDX5v%16%EB%C0nb%0F%B1Yl%0D%FB%85%A7%E0%F9%F1rx%5D%BC5%DE%13%1F%86O%C1%E7%E3%2B%F1g%F0%ED%F8%5B%F8%09%FC%02%FE%0B%81%40%E0%24H%11%B4%08%DB%08%5E%84HB%06a%3F%E1%18%A1%850%40x%40%98'%AC%13%89D%1E%A2%1C%D1%80%E8%40%0C%20%26%12%F3%89G%89%E7%89%FD%C4q%E2%02q%83DO%12%22%A9%92%2CI%DE%A4XR%0E%A9%92t%8E%D4G%1A'-%92~%90%99%C9%12d%5D%B2%039%98%9CF.%25%9F%22%F7%90%EF%93%17%C8%3F%E8X%E8%A4%E8%0C%E8%5C%E9%22%E9%B2%E9%AA%E8.%D2%DD%A2%9B%A6%FBDOO%2FJ%AFC%EFD%1FA%9FE_E%DFJ%7F%87~%96%FE%1B%03%2B%83%2C%83%19%C3%0E%86%24%86%12%86F%86%01%86%A7%0C%9F(%14%8A%24%C5%98%E2MI%A4%94P%9A(7(%2F(%1B%8Cl%8C%8A%8C%D6%8C%C1%8C%7B%18k%18%3B%18%C7%19%DF1%91%99%24%98L%98%7C%99%D2%99*%99.3%DDgZe%263K2%9B1%070g2%D70w3%3Ff%5EgacQaq%60%89a%D9%CFr%8Ee%98e%89%95%C8*%C9j%C1%1A%CC%9A%CB%DA%C0z%83u%9E%0D%C7%26%C6f%C6%16%C4%B6%97%ED%14%DB-%B6%05v%02%BB%14%BB5%7B%24%7B1%FB%05%F6Q%F65%0EV%0Eu%0Ew%8ET%8E%1A%8Ek%1C3%9C8NINk%CEh%CER%CE6%CEI%CE%EF%5C%02%5C%26%5C!%5C%85%5C%17%B9%C6%B9%BEr%F3q%1Bs%87p%17q%B7pOp%7F%E7%11%E6%B1%E0%89%E2)%E3%E9%E4y%CE%8B%F1%CA%F2%3A%F1%A6%F0%1E%E7%BD%C5%BB%CA%C7%CE%A7%C7%17%C4W%C4%D7%C67%C5%8F%F2%CB%F2%3B%F3g%F07%F0%DF%E3_%17%10%14%B0%12%A0%0A%1C%15%B8!%B0*%C8)h%2C%18)xH%B0OpY%88M%C8P(B%E8%90P%BF%D0%8A0%87%B0%89p%B4p%95%F0M%E15%11~%91m%22I%22'EFE~%88J%89%BA%89%E6%88%B6%88%3E%17%A3%13%D3%16%0B%15%3B%246(%B6%26.%24n%2F%BEK%BCY%7CJ%82%2C%A1-%11.qD%E2%B6%C4WI)I%0F%C9%7D%92%9D%92KR%DCR%D6R%E9R%CDR%D3%D2%14i%23%E9x%E9z%E9G2%04%19m%99(%99c2c%B2%A8%AC%86l%B8l%8D%EC%7D9TNS.B%EE%98%DC%03y%BC%BC%8E%7C%AC%7C%BD%FCc%05%06%05%13%85d%85f%85YENE%3B%C5%1C%C5N%C5wJ%E2J%DEJeJ%B7%95~)k(G%2B%9FR~%A6%C2%AAb%A3%92%A3%D2%A3%F2QUV5H%B5F%F5%91%1AE%CDRm%8FZ%97%DA%07u9%F5%10%F5%E3%EAO4%D84%EC5%F6i%0Cj%FC%D4%D4%D2%A4i%5E%D4%5C%D6%12%D7%F2%D7%AA%D5z%AC%CD%AE%ED%A8%BD_%FB%8E%0E%5E%C7Tg%8FN%AF%CE7%5DM%DDD%DD6%DD%F7z%0AzQz%E7%F4%96%F4%A5%F4C%F4O%E9%CF%1B%88%1A%04%18%9C4%981%146%F47%3Ca8c%24b%14%60To4g%2Cf%1Cl%7C%C6x%D1D%C6%24%D2%E4%BC%C9%3BSeS%9Ai%BB%E9W3%5D%B3%DDf%03%E68s%2B%F3%22%F3Q%0BV%0B7%8Bj%8B%17%96%A2%96a%96%CD%96kV%1AV%19V%03%DB%F0%DBl%B7%95m%7Bl-%60%1Dd%DDd%BDf%A3e%B3%DB%E6%A6-%83%AD%8Bm%B5%ED%9C%9D%AC%1D%CD%AE%C7%1E%B5%B7%B1%AF%B0%9F%DE.%B1%3Dv%7B%A7%038X%3BT8%3Cw%94r%8Cw%BC%EADprt%AAqz%ED%AC%E2%BC%CB%F9%B6%0B%9B%8B%9F%CB9%97%2F%AE%A6%AE%A5%AE%CF%DC%A4%DD%92%DC%06%DD%99%DCw%B87%B9%7F%F50%F7(%F7%98%F1T%F2%DC%ED9%E2%C5%EB%15%E1%D5%E5M%F4v%F7%3E%E3%BD%EEc%E1s%D8ga%87%C6%8E%FC%1D%93%3B%A5v%A6%EE%1C%F6%E5%F5%8D%F6%BD%E6%C7%E4%17%E0w%D9%1F%EF%EF%E1%7F%CE%7F3%C0!%A0%3E%60%3D%D0%3A%B06p-%C8%2C%E8H%D0%9B%60%E3%E0C%C1%CB!%06!%E5!%8B%A1%06%A1%E5%A1Ka%06a%15a%CB%E1F%E1%95%E1%AB%11f%11%D5%11%1F%22%B7E%D6E~%8Dr%88j%8C%DA%8A%F6%88n%89!%C5%F8%C7t%C7%B2%C6F%C5%DE%8C%13%8CK%8D%7B%40%95%A3%E6Sg%E2u%E3%0F%C7%AF%D1lig%12%90%84%9D%09%5D%89%EC%89%D4%C4%7BI%D2IyI%B3%C9%86%C95%C9%1B)%EE)%97SYRcS%EF%A5%C9%A6%15%A6-%A6%5B%A6%9F%CE%C02%822%06w%89%EC%CA%DE5%BB%DBd%F7%C9L%2430sp%8F%D8%9E%DC%3D%0BYVYg%B3%E9%B2%A3%B2%FF%CAQ%CE)%CF%F9%BC%D7coO%AE%40nV%EE%7C%9EU%5Es%3Ec%3E-%FF%F1%3E%BD%7Du%05XAD%C1h%A1Z%E1%D1%C2_E%C1Ew%8B%95%8B%2B%8B7%F7%07%ED%BF%7B%40%E5%40%D5%81%AD%92%D0%92%D1R%CD%D2%E3%07%09%07c%0FN%96%19%95%9D-g)O%2F%9F%AF%B0%AF%E88%24%7C%A8%E8%D0%E7%C3~%87%87%2B%D5%2B%EB%8E%D0%1DI%3A2SeW%D5uT%FC%E8%C1%A3%9B%D5%E1%D5%135%A65-%B5%FC%B5%85%B5_%8F%05%1F%1B%3Fn%7C%FCb%9D%40%5Dq%DD%F7%13%11'%9E%9C%B4%3A%D9Q%2FY_%D9%40hHnx%7D%CA%FD%D4%ED%D3%DA%A7%9B%CE%F0%9E)%3E%F3%B31%B6q%E6%AC%F3%D9%9BMZMM%E7%F8%CF%956%A3%CDI%CD%CB%E7w%9C%1F%BB%60~%A1%EB%A2%C2%C5%93-%9C-%C5%AD%D0%9A%D4%BAr%C9%FF%D2d%9Bm%DB%E0e%ED%CB%17%AFH%5C%A9mgk%2F%EA%40%3A%D2%3A%D6%3A%C3%3Bg%BA%BC%BA%1Et%DBt%0F%F6%E8%F5%B4_U%BC%DA%D8%2B%D2%5Bs%8D%E3Zi%1F%5D_n%DFV%7Fz%FF%FA%00u%60%F5z%D8%F5%F9A%BF%C1g7%3Co%3C%BA%E9ts%F4%96%ED%AD%3BC%96C7n%9B%DC%EE%BFcp%A7wXw%B8%FB%AE%F6%DD%CE%11%CD%91%8E%7B%1A%F7%DA%FF%D2%F8%AB%7DTs%B4%E3%BE%D6%FD%AE1%9D%B1%9E%07%FA%0F%FA%C6%8D%C6%AF%3F4%7F8%F4%C8%FA%D1%C8%C4%F6%89%07%93n%93O%1E%EFx%3C%F3%24%F8%C9%D2%D3%E8%A7%1F%A6%92%A7~%3C%CB%9A%C6O%17%3Dg~%5E%F9%82%FFE%FDK%99%97-3%9A3%D7f%CDg%EF%CD%B9%CC%3D%9B%0F%9A%7F%F3*%E1%D5%E6B%EEk%CA%EB%CAE%A1%C5%A6%25%D5%A5%DEe%CB%E5%B1%15%9F%95%857%D47%3FV%F3%DF%B2%BC%AD%7D'%FD%EE%CA%7B%E3%F7%F7%D6%3C%D7%16%3E%D0%3El%7D%DC%FF%89%E7S%E3g%F5%CF%83%EB%8E%EB%2F%BE%C4%7C%F9%F1%B5h%83g%E3%EC7%EDo%B7%BF%7B%7C_%FC%91%B2I%DC%AC%FA)%F3%B3%E7%97%ED%AF%E9%AD%98%AD-j%00-%00%00%00p%00%80%86%86%02%7Cl%04%A0x%01%B0%8D%01%D0%0D%FC%BES%FC%01%0E%01%40%01%80%08%82%60%03%C50%8F%C8%22%B1%C8%00%CA%83%26%A2S8k%DC%0D%CC%0A%7B%84%8F!%B0%10%06%89%BBH%86d%22%F99%5D7%7D-C)%A5%91q%9A%99%99%C5%96%B5%90m%98%83%85s%07%D7y%1E%8C7%80%EF%9A%80%B0%E0~%A1%0D%91%60%D1)%F1%ED%12%C3RJ%D2%252o%E4%AC%E5%EB%14%BE(%99)%1FP%19S%A3%A8%9Bj%24h%D6j%0Dh%CF%E8%FC%D4%E3%D2%973%D01%B40r6%0E2I0%CD5%3Bb%DEl%D1o%F9%D0jy%DB%96%0D%87%AD%BC%9D%99%BD%CF%F6%08%87d%C7%3C%A7r%E7%3A%97f%D7N%B7A%F7%11%8Fq%CF%A7%5E%2F%BD%E7%7D%96v%BC%DD%B9%E4%3B%ED7%EA%DF%1F%D0%12x%3C%E8%40pzHh%A8S%98%5E%B8x%04c%C4%97%C8%97QC%D1M1%07b%A9q.T%ADx%DE%F8M%DA%8B%84%81%C4%86%A4%BC%E4%D0%14%EBT%B94%BA%B4%95%F4%7B%19%AD%BB%AAv%E7f%A6%EC%89%CF%A2e%A7%E7%14%ED%3D%99%7B-%EF%E5%3Er%81~!%B5%A8%A1x%F2%00%5D%89~i%CC%C1%E3e%A3%E5%3F%0F%C9%1F%F6%A9%2C%3A%D2Q5SM_%A3Q%EBw%AC%F0x%5B%DD%B3%93X%BDB%83%FB%A9%3D%A7%CF%9Ey%D0%B8%D1%24%7C%CE%AEy%D7%F9%B6%0B%1FZt%5BK%2F%BD%BF%ECs%E5~%87C%E7%A3n%FD%9E%C4%ABM%BD%D3%7D%F4%FDj%03%EE%D7%E3%07%F3n%94%DD%AC%BCU9Tv%BB%E0%CE%DE%E1%7Dw%0F%8C%1C%B8%97%F7W%E2%A8%C7%7D%C5%FB%3F%C6%06%1Ed%8Ck%8E%7Fy%F8%F8Q%F7D%F5%E4%EE%C7~OL%9FJL%91%A7%DE%3E%7B0%DD%FE%BC%FA%C5%EE%97%FE3%E6%B32s%CCs%DF%E6_%BF%9A%5C%18~%7D%7D%F1%EAR%F7r%F7%CA%E97%25%AB%C9o%7D%DFY%BC%97%5Bc%5E%5B%FF0%F5%B1%EF%D3%C9%CFy%EB%E1_l%BF*m%B0m%7C%FD6%FD%7D%E0G%FDf%EE%CF%90_%E6%5B%A2%5B%5B%00%40%00%5E0%86T%B8%85%B0!v%C8A%E4%25%AA%86%96%A0%9Fp~%B8I%CC%0D%7B%8E%A7%12%18%09%9D%C4%10%12%2Fi%8A%5CK%17Fo%CA%60%40qe%0Cg%CAb%3E%C1r%9Du%99%9D%83%C3%9C3%8D%AB%85%FB%3D%AF%22%1F%8D%BFW%90%5E%C8%5D%F8%9C%C8%96%98%89x%B6D%BF%E4%A6%B4%96L%A4%EC1%B9%11%F9%8F%8A%1CJj%CA%DBT%7CT%C3%D4%E2%D5%D34vk%A6kEj%FB%E8%D8%E9%1A%E8)%EB%8B%1Ap%18%92%0C%BF%1B%BD5%9E5%990%BDk%D6g~%D9%A2%D1%B2%CA%AA%60%5B%8Au%B8%8D%97%ED6%3Bm%7B%A9%ED%1C%0E%98%C3g%C79%A7%07%CE%03.%AD%AE%C7%DD%0A%DC%13%3C%7C%3D%AD%BD%D4%BC%05%7C%08%3E%EFvL%EE%BC%E6%DB%E0W%E4%1F%17%E0%1A%A8%1E%C4%104%17%DC%1DR%1A%1A%1A%A6%1F%CE%12%FE%3A%E2jdYTH%B4n%0CS%CC%7Clg%5C%01%D5%2B%5E.~%936%9Ap%22%91%96d%96%CC%91%BC%98%D2%9D%BA%3F%CD7%5D9%03%CDx%BC%ABewqf%CC%1E%B7%2C%F3l%DD%1C%9D%BD%06%B9%DB%F2%3C%F3c%F7%ED%2B8%5Dx%A3h%B6%F8%D7%01%FE%12%9DR%F7%83%09e%07%CB%CFW%0C%1Fz%5D%89%1E%E1%AF%D2%3C%EAT%1DSS%5C%7B%FE%D8%D8%F1%2F'DO%3A%D6%EFm%E8%3E%F5%E1%8Cbc%FC%D9%2BM_%9Bu%CE%EF%BA%D0%D7%02%AD%26%97%F6%B6%DD%BA%82o%B7%EA(%E8%BC%DDM%EC%B1%B8%9A%D3%7B%ED%DA%E7~%C9%01%97%EB%19%83%C7o%5C%BD9qky%E8%EB%1Dl%98%ED%AE%C8%88%D2%3D%83%BF%ECF%BD%EF%87%8F%A5%3C%C8%1F%3F%FC%B0%FEQ%CBD%EF%E4%F0%E3%C9'%0BO%3F%3F%C3M%B3%3F%97x%A1%FD%D2n%26l%B6an%F9%95%D4%82%F7%EB%FC%C5sK%B7%97gW6V%19%DFJ%BC3z%EF%B3%96%F5a%EC%93%DA%E7%8A%F5O_%9D7%AE%7C%E7%FE%91%B7%B9%F1%2Bek%0B%000%60%01Y%D8%0EY0%80%10%11%5D%24%11%E9DQ%D4%1E%3D%81%FE%C0%F9%E2%EEb%FAX%07%5E%1B%3FHp%24%CC%133H%7C%A4%DB%E4%03tA%F4%FA%0C%7C%0C%BF(s%8C%23L%ED%CC%A7Y%AAXK%D8%0A%D8%F38%F29%8B%B9*%B8%EBx%9Ay%BB%F8%AE%F1_%13%E8%13%EC%17%EA%13%BE*%D2.%DA%2CvL%BCX%22Ir%87%94%B1%B4%A8%0C%C8%3C%93%ED%94%2B%96wW%10VXQlW%CAR%B6U%E1T%99UmVKR7%D2%20k%3C%D4%3C%A6%15%AE%AD%AE%BD%A1%D3%A7%9B%A7g%AB%CF%AA%3FePo%18i%A4j%B4i%3CdRf%BA%D3L%D6%EC%AB%F9%0D%8BRK%1F%2B)%AB%8F%DB%FA%AC%8Bl%DCmEl%DF%D8u%D8gm%B7s%E0t%98ulvJp%D6sA%5D%EE%BA%96%BBy%BB%0B%BB%2Fz%5C%F4L%F2%D2%F3F%BD%87%7DJw%B8%EC%E4%DC%F9%D4%B7%C6o%A7%BF%80%FF%F3%80c%81%3B%83%F8%83%A6%82%ABB%DCC%D9B%EF%87%15%87%5BD%40%C4%D5%C8%E4(%95%A8%D5%E8%C6%98%C0X%FE%D8%C7q%15%D4%ED%F1%A4%F8%EB%B4%F4%04%B5%84%D5%C4%D3I%BE%C9%5C%C9%F7S%F6%A5%1A%A5n%A4%B5%A6Gd%08g%3C%DDuh%B7k%26O%E6%C2%9E%AE%ACC%D9i9%A1%7Bw%E4z%E5%F9%E4%87%ECK*%C8%2B%AC%2C%3AS%DC%B1%7F%E8%C0D%C9B%E9%E72%5C9%5B%85%E8!%E5%C3%BA%95fGl%AA%9C%8EzU%07%D6%C4%D5%EE9Vq%FC%7C%DD%C8%89%F7%F5%12%0Di%A7%C6%CEH5f%9E%9D%3C%A7%D0%9C%7B%FE%D9E%95%96%82%D6%17m%9A%97%8B%AF%BC%ECP%EB%DC%D75%DD%A3v%B5%A8w%AEO%BF%BFj%E0%CB%A0%EB%8D%F6%5BRC%A7%EE(%0C%DF%1A%89%FAK%7Ctu%EC%F6%F8%A5GM%93%ADO%AEO%3D%7F%0E%2F%95g%1B_%E5%2F%16%ADt%BEc%FAP%B0%CE%BD%D1%BE%E9%B1%B5%05%F0%FBm%09%00%80%A0%09pz%1E%C0%FD%24%80%93%0F%40%A3%1C%80D%0D%00%23%3B%80%23%05%C0U%07P%D3R%40%9E%1E%05%C4%EA%E2%3F%E7%07%05%A4%C0%12Ba%1F%9C%85ax%830%22*%88%1B%92%8E%1CCz%91g%C8%26*%80%1A%A1%81h%3Ez%0E%BD%8F~%C6%F1%E1Lp%E1%B8%83%B8n%DC%1CF%8Fi%60%FE%D8~%AC%0B%7B%85g%C5%1B%E1c%F1'%F1%13%04%3A%82%09!%95%D0FX%25J%13%C3%88%8D%C4e%92%22)%89%D4O%A6'%7B%93%CF%D3!t%9Etm%F4%8C%F4%B1%F4%E3%0C%DA%0C'(%24%0A%8D%F2%82%D1%86%B1%9BI%9A%A9%9A%99%C2%9C%CD%FC%95%25%8Ee%895%88%F5%25%5B%20%DB%22%7B%0C%FB%17%8ElNF%CEc%5CJ%5C7%B8%7D%B8%D7y%CAxUx%1F%F2%A5%F0%0B%F0%8F%09%EC%134%15%02%A1%EB%C2y%22%F6%A2%3C%A2KbW%C5%CB%24%22%25-%A5%24%A4%19%A4%D7e%E6d%C7%E5n%CA%F7(%5CVlUjQnS%E9R%1DP%1BQ%7F%A1%F1A%0B%D3%E6%D0%11%D3U%D0S%D1W6%905%146b5F%8D%DF%9B%3C3%ED7%AB7%2F%B0%88%B3%F4%B42%DD%A6d-h%C3d%8B%B3%DD%B0%5B%B3_%D9%BE%E00%E78%EB%F4%CA%F9%8D%CB'%D7%9F%EEd%0F.O)%2F%1Do%7B%9F%A0%1D%19%3B%0F%FB%B6%FA%8D%FA%BF%0Dd%0CR%0B%F6%0A%D9%13%DA%10v%2B%7C%3E%E2g%14k%B4H%8Cl%ACb%9C%02U%26%5E%94%C6%99%40N%F8%9E%B8%9C%CC%9Bb%9F%9A%9B%D6%9F%FEk%97%C5%EE%8A%CC7Y%F6%D9W%F7%AA%E7v%E7%5B%EF%9B%2F%DCW%2C%B2%FFb%89q%E9LYY%85%E7a%83%23%D6GSjn%1D%E7%3B%C1X%8F6%7C%3B%FD%B1%F1%5D%D3j%F3%EA%85%F7-%EB%97~%5E!u%F0u)%F5%98%F7z%F5E%0C%24%0Ff%DE%CC%1A%DA%7D'%F9n%F4%3D%FF%D1%E2%B1%AE%F1%95%09%91%C7%3B%9F%D6%3D%7B%FDBe%26%7BnbAn%B1%60yq%D5%EA%DD%B9%0F%CC%9F2%D6%DFn%84~_%FCI%DD%DA%02%00%26P%04'H%82j%E8%87W%08%3D%A2%8A%F8%20%B9H%132%82%BCG%D9Q%5D%D4%1F-%40%5B%D1%A78%1CN%01%E7%85%CB%C3%5D%C2%BD%C4(%98%3E%16%85%D5%60%7Fa%BF%F0*%F8%60%7C-~%82%C0D%B0%23%14%12%EE%10%E9%88%F6%C4r%E2%14I%82D%23%0D%929%C9%D1%E4!%3A1%BA%1C%BA%05z%1B%FA%1E%069%86%3A%0A%07e%3F%23%811%87%09%98%B2%99q%CC%05%2C%8C%2CGXEY%5B%D8%8C%D9%26%D8c8%08%1C%F5%9C%26%9Cs%5C%F9%DC%0A%DC%93%3C%D9%BC%CA%BC3%7C%15%FC%DB%040%81A%C1%BDB%96%C2%0C%C2%93%22%F5%A2%09b%96%E2%82%E2%1B%12%93%92%9DR'%A4%8F%C8%94%C9%96%C8%95%C8%97%2BT%2B%9EQjW%BE%A3%F2B%F5%AB%3A%87%86%AEf%90V%89%F65%9D%F7z%12%FA~%065%86%CF%8C%05M%82M%5B%CC~XXX%16%5B%8DX%E3m%B4l%03%ED%F2%ED%CFl%BF%EE0%E5%B8%E6%8C%B9p%BA%CA%BA%19%BB%7By%24x%96z%5D%F4%1E%F5%F9%B0%93%D3%D7%C0%2F%D4%BF%2C%A0%2F%F0%5D%B0X%88ghi%D8P%F8%CFH%F5%A8%88%E8%E31%0F%E2P%AAj%BC%3F%AD%24%E1j%E2R2S%8AV%AA%7FZqzW%C6%E2n%AEL%EB%3D%BB%B3%DA%B2W%F6%8A%E5%EE%CC%AB%CE%7FR%C0U%E8Ut%BC%F8%D5%01%85%92%D4%D2%A12%EE%F2%B8%8A%7B%87%95%2Bk%AA%18%8F%16%D60%D4%1E%3E.Uw%FBdD%03%C3%A9%B63%DEg%B1%A6%D6f%BF%0B%CC%17o%B4%A6%B6)%5D%5Ejo%EC%8C%E8V%E8%F9%D8%DB%D3%973%607%C8uc%FEV%EB%ED%5D%C36%23%3C%F7%C6F%DD%EE%CF%3FH%7F(%F8ht%B2%F8%89%CB%94%E44%F2%7C%EE%E5%D0l%F3%7C%E9%02m%D1e%99o%A5nU%EA%ED%A5%F7%86k%A3%1F%FD%3E%BD_%CF%FA%CA%B4q%F4%BB%E0%8F%BA%9F%BC%BFJ%B7%B6%00%80%0BL%80%0Aup%1F%B6%10U%24%149%8A%DCB%3E%A1%A2%A83%9A%8Bv%A2%AB8%11%9C'%EE%20n%18%C3a%86X%3A%D6%89%AD%E35%F0%C9%F8k%04%3C%C1%81PCX!%EA%11%0F%12%97H%E6%A4Sd%12%99J%9E%A6%B3%A3%1B%A0%D7%A2%EFa0e%B8G%F1%A2%AC0f2q0%B52%3B0%7F%60%A9d5d%5Df%3B%C6%EE%C2A%E1%B8%CBY%C8e%C7%CD%CA%3D%C5s%9A%97%C6g%C2%CF%C6%FFF%60H%F0%94P%BEp%94%88%AB%A8%89%98%AA%B8%94%84%90%24%9F%14%AF%B4%B0%8C%9C%AC%8E%9C%AD%7C%80%C2.%C5j%A5k%CA%AFT%19%D5%F4%D5i%1A%175%DFkk%E8d%EB%8E%EBK%1B%E4%1A%BE6%B63%E94%933%3Fe)b%D5%60-c%D3ngn%FF%C4%81%EA%C4%E0%DC%EA%EA%E3N%F6%B8%E6%95%EC%A3%BEc%C3w%C0%FF%40%A0o%B0f(C%D8%D3%88%EA(%EB%E8%E5%D8%B4%B8%CD%F8D%DAB%A2c%D2%E5%14%96TZ%DA%A3%0C%DD%5D'3%E9%F7%A4f-%E6x%EE%BD%97g%9A%DFS%A0%5E%D8Ql%B0%7F%B8%C4%AB%F4MYf%05%CB%A1%FAJ%A5%23%DDG%0D%AB%FBk%F5%8Fu%D4%E1O%D8%9D%3C%5C%FF%F2%94%EC%E9%943%B7%CEr4%85%9E%EB9%CFx!%F8bo%2B%C7%25j%DB%C8%15%E9%F6%A2%8E%B7%5DN%DD%9DW%05%7B%F3%AF%BD%EB%F7%18%B8%3E(w%E3%F0%CD%AD%A1%C8%DB%8F%86%8D%EF6%DF%E3%FC%2Ba%F4%EE%18%DF%83%F0%F1%F3%0FW%26%C4%26%3D%1E%E7%3C9%FB%F4%EE%D4%C2%B3%CD%E7%CC%2F%84%5E%CA%CDh%CC%EA%CE%19%CE%1B%BF2%5E0%7C%AD%BB%A8%B5%A4%B2%2C%BB%22%FA%86%F1%CD%F2j%F7%DB%94w%1A%EFV%DF%9F%5E%F3%FA%40%F7%A1%F7c%E8'%E6O%5D%9Fw%AC%C3z%FD%17%D3%2Fs_%F7l%F0ot%7Fs%FB%B6%F6%7D%FF%0F%A9%1F%83%9B%BE%9B%1B%3F%2B~)%FD%1A%DE%0A%DE%DA%02H%08US%05%00%00%84%C1%14%00%FFbk%EB%93%24%00%B1%1C%E0g%D9%D6%D6%8F%FA%AD%AD%9F%0D%00%B8i%80%81%E8%DF%FF%15%00%00%04f%80%DA%86%FF%ED%8D%F4%3F%00%BD%06~%C6%80N%5E%00%00%00%00%06bKGD%00%FF%00%FF%00%FF%A0%BD%A7%93%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%DA%0B%0F%12%004n%D47%05%00%00%01%1BIDATx%DA%ED%DC%B1%11%820%14%80%E1%87G%97%3B%98%22%0E%C0%0Ct%B2%1B%CB%E0Nl%11%0B%3B*%3D9%89%F2%FD5U%3E%1E%B9P%A4%89(%25TM%17K%00D%40%80%08%08%10%01%01%22%20%E7%AE%7D%F5%C1e%B9%5B%AD%0F%9A%A6%9B%09%F1%C9%12%10%20%02%02D%40%F4%E69D%DBs%C5%B49%A7-%F5%81%0C%C3%10)%A5X%D7%95X%0D%20)%A5%E8%FB.%22%3A%2B%5B%C3%1Eb2l%EA%07V%22%A2D%CEy%B7%FD%03%88%09%11%10%20%02%02D%40%80%08%88%80%00%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%1D%DEn7%5Bo%EFB%7F%DEk%2B%13%F2%ED7%BAm%EB%9C%90m9_O%811%8E%E3o%80%CC%F3l%7C%8E%04%D9%F3%FEs%7B%88%80%08%08%10%01%01%22%20%7F%5D%13Q%FCt2!%02%02D%40%80%08%08%10%01%01%A2Zz%00g%F8%1C%DE%87%AF%C0%09%00%00%00%00IEND%AEB%60%82"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feSpecularLighting-1.svg b/layout/reftests/svg/filters/feSpecularLighting-1.svg
new file mode 100644
index 0000000000..838a60b7e0
--- /dev/null
+++ b/layout/reftests/svg/filters/feSpecularLighting-1.svg
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns='http://www.w3.org/2000/svg'>
+  <!--
+    A basic test for the <feSpecularLighting> filter primitive.
+    Setting kernelUnitLength on the <feSpecularLighting> should allow us to
+    assume pixel perfection.
+    -->
+  <filter id='f' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'>
+    <feSpecularLighting kernelUnitLength='1' result='a'>
+      <feDistantLight azimuth='45'/>
+    </feSpecularLighting>
+    <feComposite in='a' in2='SourceAlpha' operator='in' result='b'/>
+    <feComposite in='SourceGraphic' in2='b' operator='arithmetic' k1='0' k2='1' k3='1' k4='0' x='10' y='10' width='80' height='80'/>
+  </filter>
+  <rect width='100' height='100' fill='blue'/>
+  <path d='M0,0 h100 v100 h-100 z M20,20 v60 h60 v-60 z' filter='url(#f)'/>
+
+  <!-- Cover two spots in the test whose rendering differs in opt builds
+       vs. debug builds (see Bug 610945). -->
+  <rect x='78' y='18' width='4' height='4'/>
+  <rect x='18' y='78' width='4' height='4'/>
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-1-ref.svg b/layout/reftests/svg/filters/feTile-1-ref.svg
new file mode 100644
index 0000000000..c0135fca35
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-1-ref.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="10" width="10" height="10" fill="#00ff00"/>
+<rect x="40" y="10" width="20" height="10" fill="#00ff00"/>
+<rect x="80" y="10" width="10" height="10" fill="#00ff00"/>
+
+<rect x="20" y="20" width="20" height="20" fill="#0000ff"/>
+<rect x="60" y="20" width="20" height="20" fill="#0000ff"/>
+
+<rect x="10" y="40" width="10" height="20" fill="#00ff00"/>
+<rect x="40" y="40" width="20" height="20" fill="#00ff00"/>
+<rect x="80" y="40" width="10" height="20" fill="#00ff00"/>
+
+<rect x="20" y="60" width="20" height="20" fill="#0000ff"/>
+<rect x="60" y="60" width="20" height="20" fill="#0000ff"/>
+
+<rect x="10" y="80" width="10" height="10" fill="#00ff00"/>
+<rect x="40" y="80" width="20" height="10" fill="#00ff00"/>
+<rect x="80" y="80" width="10" height="10" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-1.svg b/layout/reftests/svg/filters/feTile-1.svg
new file mode 100644
index 0000000000..c64ab37491
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-1.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/>
+  <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/>
+  <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/>
+  <feTile x="10%" y="10%" width="80%" height="80%" in="pair"/>
+</filter>
+<g filter="url(#f1)">
+  <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-2-ref.svg b/layout/reftests/svg/filters/feTile-2-ref.svg
new file mode 100644
index 0000000000..186d21cbcf
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-2-ref.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+<rect x="200" y="0" width="100" height="100" fill="#00ff00"/>
+<rect x="400" y="0" width="100" height="100" fill="#00ff00"/>
+
+<rect x="100" y="100" width="100" height="100" fill="#0000ff"/>
+<rect x="300" y="100" width="100" height="100" fill="#0000ff"/>
+
+<rect x="0" y="200" width="100" height="100" fill="#00ff00"/>
+<rect x="200" y="200" width="100" height="100" fill="#00ff00"/>
+<rect x="400" y="200" width="100" height="100" fill="#00ff00"/>
+
+<rect x="100" y="300" width="100" height="100" fill="#0000ff"/>
+<rect x="300" y="300" width="100" height="100" fill="#0000ff"/>
+
+<rect x="0" y="400" width="100" height="100" fill="#00ff00"/>
+<rect x="200" y="400" width="100" height="100" fill="#00ff00"/>
+<rect x="400" y="400" width="100" height="100" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-2.svg b/layout/reftests/svg/filters/feTile-2.svg
new file mode 100644
index 0000000000..7f137b8d4c
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-2.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+  <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/>
+  <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/>
+  <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/>
+  <feTile in="pair"/>
+</filter>
+<g filter="url(#f1)">
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-large-01.svg b/layout/reftests/svg/filters/feTile-large-01.svg
new file mode 100644
index 0000000000..c04c145295
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-large-01.svg
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Testcase for tile larger than surface</title>
+
+    <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=521207 -->
+    <defs>
+        <filter primitiveUnits="objectBoundingBox" filterUnits="objectBoundingBox" 
+                id="filter_1" x="-50%" y="-50%" width="200%" height="200%">
+            <feTile />
+        </filter>
+    </defs>
+
+    <rect width="100%" height="100%" fill="lime" />
+    <rect x="10" y="10" width="100" height="100" fill="red" />
+    <rect x="10" y="10" width="100" height="100" fill="lime" style="filter:url(#filter_1);"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-large-02-ref.svg b/layout/reftests/svg/filters/feTile-large-02-ref.svg
new file mode 100644
index 0000000000..cb6ed6047c
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-large-02-ref.svg
@@ -0,0 +1,26 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+<title>Reference for feTile filter with tile exceeding the bounds of the target area on all sides</title>
+
+<rect width="20" height="20" fill="#00ff00"/>
+<rect x="40" width="20" height="20" fill="#00ff00"/>
+<rect x="80" width="20" height="20" fill="#00ff00"/>
+
+<rect x="20" y="20" width="20" height="20" fill="#0000ff"/>
+<rect x="60" y="20" width="20" height="20" fill="#0000ff"/>
+
+<rect y="40" width="20" height="20" fill="#00ff00"/>
+<rect x="40" y="40" width="20" height="20" fill="#00ff00"/>
+<rect x="80" y="40" width="20" height="20" fill="#00ff00"/>
+
+<rect x="20" y="60" width="20" height="20" fill="#0000ff"/>
+<rect x="60" y="60" width="20" height="20" fill="#0000ff"/>
+
+<rect y="80" width="20" height="20" fill="#00ff00"/>
+<rect x="40" y="80" width="20" height="20" fill="#00ff00"/>
+<rect x="80" y="80" width="20" height="20" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-large-02.svg b/layout/reftests/svg/filters/feTile-large-02.svg
new file mode 100644
index 0000000000..aa41cf34f5
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-large-02.svg
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+<title>Test case for feTile filter with tile exceeding the bounds of the target area on all sides</title>
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/>
+  <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/>
+  <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/>
+  <feTile x="-10%" y="-10%" width="120%" height="120%" in="pair"/>
+</filter>
+<g filter="url(#f1)">
+  <rect width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-outside-01-ref.svg b/layout/reftests/svg/filters/feTile-outside-01-ref.svg
new file mode 100644
index 0000000000..f84634f7c0
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-outside-01-ref.svg
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+<title>Reference for feTile filter with x and y for feTile set to values outside the target area.</title>
+
+<rect width="20" height="20" fill="#00ff00"/>
+<rect x="40" width="20" height="20" fill="#00ff00"/>
+
+<rect x="20" y="20" width="20" height="20" fill="#0000ff"/>
+<rect x="60" y="20" width="10" height="20" fill="#0000ff"/>
+
+<rect x="00" y="40" width="20" height="20" fill="#00ff00"/>
+<rect x="40" y="40" width="20" height="20" fill="#00ff00"/>
+
+<rect x="20" y="60" width="20" height="10" fill="#0000ff"/>
+<rect x="60" y="60" width="10" height="10" fill="#0000ff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-outside-01.svg b/layout/reftests/svg/filters/feTile-outside-01.svg
new file mode 100644
index 0000000000..4f1f0b5c8a
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-outside-01.svg
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+<title>Test case for feTile filter with x and y for feTile set to values outside the target area.</title>
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" 
+         x="0" y="0" width="1" height="1">
+  <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/>
+  <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/>
+  <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/>
+  <feTile x="-10%" y="-10%" width="80%" height="80%" in="pair"/>
+</filter>
+<g filter="url(#f1)">
+  <rect width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTurbulence-offset-ref.svg b/layout/reftests/svg/filters/feTurbulence-offset-ref.svg
new file mode 100644
index 0000000000..fbfaf840af
--- /dev/null
+++ b/layout/reftests/svg/filters/feTurbulence-offset-ref.svg
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <!--
+    Place the filtered rect and the filter region at (0, 0) in user space.
+    Remove the filter output before (50, 50) using a clipPath.
+  -->
+  <filter id="f" x="0%" y="0%" width="100%" height="100%">
+    <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"></feTurbulence>
+  </filter>
+  <clipPath id="clip-top-left">
+    <rect x="50" y="50" width="100" height="100"/>
+  </clipPath>
+  <rect x="0" y="0" width="150" height="150" filter="url(#f)" clip-path="url(#clip-top-left)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feTurbulence-offset.svg b/layout/reftests/svg/filters/feTurbulence-offset.svg
new file mode 100644
index 0000000000..c48db258b3
--- /dev/null
+++ b/layout/reftests/svg/filters/feTurbulence-offset.svg
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that feTurbulence creates a noise image that remains
+     anchored at the user space origin, not the filter region origin. The filter
+     region should act as a viewport into the anchored noise image.
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <!--
+    Place the filtered rect at (75, 75) in user space.
+    Make the filter region start at (-25, -25) from the top left corner of the rect.
+    Thus, the filter output should start at (50, 50).
+  -->
+  <filter id="f" x="-25%" y="-25%" width="100%" height="100%">
+    <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"></feTurbulence>
+  </filter>
+  <rect x="75" y="75" width="100" height="100" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01-ref.svg b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01-ref.svg
new file mode 100644
index 0000000000..ec92fc28e1
--- /dev/null
+++ b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01-ref.svg
@@ -0,0 +1,13 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This is the reference image for feTurbulence-zero-baseFreq.svg.
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="400" height="100" fill="blue"/>
+  <rect x="0" y="100" width="400" height="100" fill="lime"/>
+  <!-- nothing in place of the type="turbulence" filter -->
+  <rect x="200" y="50" width="100" height="100" fill="rgba(128, 128, 128, 0.5)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01.svg b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01.svg
new file mode 100644
index 0000000000..c55cbf07a8
--- /dev/null
+++ b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01.svg
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that feTurbulence with baseFrequency="0" creates
+     a transparent black result for type="turbulence" and a 50% alpha
+     50% gray result for type="fractalNoise".
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <filter id="filterTurbulence" primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB">
+    <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1"
+                  x="0%" y="0%" width="100%" height="100%"/>
+  </filter>
+  <filter id="filterFractalNoise" primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB">
+    <feTurbulence type="fractalNoise" baseFrequency="0" numOctaves="1"
+                  x="0%" y="0%" width="100%" height="100%"/>
+  </filter>
+  <rect x="0" y="0" width="400" height="100" fill="blue"/>
+  <rect x="0" y="100" width="400" height="100" fill="lime"/>
+  <rect x="50" y="50" width="100" height="100" filter="url(#filterTurbulence)"/>
+  <rect x="200" y="50" width="100" height="100" filter="url(#filterFractalNoise)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-02.svg b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-02.svg
new file mode 100644
index 0000000000..2992737d16
--- /dev/null
+++ b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-02.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="a">
+      <feTurbulence baseFrequency="0 0.1"/>
+    </filter>
+  </defs>
+  <rect fill="#7989a6" height="400px" width="400px" filter="url(#a)"/>
+</svg>
+
diff --git a/layout/reftests/svg/filters/filter-clipped-rect-01.svg b/layout/reftests/svg/filters/filter-clipped-rect-01.svg
new file mode 100644
index 0000000000..0e339cf42a
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-clipped-rect-01.svg
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <desc>
+    This test checks that the filtering with a clipPath doesn't interact
+    badly with transforms.
+  </desc>
+  <defs>
+    <clipPath id="clipPath">
+      <rect x="100" width="100" height="100"/>
+    </clipPath>
+    <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+  </defs>
+  <rect width="100%" height="100%" fill="lime"/>
+  <g transform="translate(50, 0)">
+    <!-- This 3-rect setup is to show red *both* if too much or if too little is clipped. -->
+    <rect x="150" width="100" height="100" fill="red"/>
+    <g clip-path="url(#clipPath)" filter="url(#filter)" transform="translate(50, 0)">
+      <rect x="-20" y="-20" width="140" height="140" fill="red"/>
+      <rect x="100" width="100" height="100" fill="lime"/>
+    </g>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-giant.svg b/layout/reftests/svg/filters/filter-giant.svg
new file mode 100644
index 0000000000..e0a373a892
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-giant.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+<defs>
+<filter id="dropShadow" x="0" y="0" width="200%" height="200%">
+  <feOffset result="offOut" in="SourceAlpha" dx="1.5" dy="1.5"/>
+  <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2"/>
+  <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
+</filter>
+</defs>
+<g filter="url(#dropShadow)">
+  <rect x="-20000" y="-20000" width="40000" height="40000" fill="lime" />
+</g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-in-mask-01.svg b/layout/reftests/svg/filters/filter-in-mask-01.svg
new file mode 100644
index 0000000000..e73efd3796
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-in-mask-01.svg
@@ -0,0 +1,12 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 1 1" preserveAspectRatio="xMidYMid slice">
+  <!-- filter effects region covers whole viewbox -->
+  <filter id="myFilter" filterUnits="userSpaceOnUse" x="-1" y="-1" width="1" height="1">
+    <feGaussianBlur stdDeviation="0"/>
+  </filter>
+  <!-- mask effects region covers whole viewbox, opaque white mask -->
+  <mask id="myMask" maskUnits="userSpaceOnUse" x="-1" y="-1" width="1" height="1">
+    <rect filter="url(#myFilter)" x="-1" y="-1" width="1" height="1" fill="#FFFFFF"/>
+  </mask>
+  <rect x="-1" y="-1" width="1" height="1" fill="red"/>
+  <rect mask="url(#myMask)" x="-1" y="-1" width="1" height="1" fill="lime"/>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/svg/filters/filter-in-mask-02.svg b/layout/reftests/svg/filters/filter-in-mask-02.svg
new file mode 100644
index 0000000000..7c7fd86f1f
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-in-mask-02.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter x="0" y="0" width="1" height="1" id="solid">
+      <feFlood flood-color="black"/>
+    </filter>
+    <mask id="myMask">
+      <rect fill="white" width="100%" height="100%"/>
+      <g transform="translate(10000, 0)">
+        <rect fill="blue" width="100%" height="100%" filter="url(#solid)"/>
+      </g>
+    </mask>
+  </defs>
+  <!-- You should see pure lime color as background color of a whole page. -->
+  <rect fill="red" width="100%" height="100%"/>
+  <g mask="url(#myMask)">
+    <rect x="0" y="0" width="100%" height="100%" fill="lime"></rect>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/svg/filters/filter-in-pattern-01.svg b/layout/reftests/svg/filters/filter-in-pattern-01.svg
new file mode 100644
index 0000000000..e6df8d7627
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-in-pattern-01.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid slice">
+ <defs>
+  <filter id="blur">
+    <feGaussianBlur stdDeviation="0" />
+  </filter>
+  <pattern id="pattern1" patternUnits="userSpaceOnUse" width="10" height="10">
+    <rect width="10" height="10" fill="lime" filter="url(#blur)" />
+  </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" fill="url(#pattern1)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-in-pattern-02-ref.svg b/layout/reftests/svg/filters/filter-in-pattern-02-ref.svg
new file mode 100644
index 0000000000..a712134d6b
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-in-pattern-02-ref.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100">
+  <defs>
+    <filter id="blur-filter">
+      <feGaussianBlur stdDeviation="0.5"/>
+    </filter>
+    <pattern id="pattern1" width="8" height="8" patternUnits="userSpaceOnUse">
+      <path d="M-1,1 l2,-2" stroke="blue" filter="url(#blur-filter)" />
+    </pattern>
+  </defs>
+
+  <rect x="-20%" y="-20%" width="10%" height="10%" fill="url(#pattern1)"/>
+</svg>
+
diff --git a/layout/reftests/svg/filters/filter-in-pattern-02.svg b/layout/reftests/svg/filters/filter-in-pattern-02.svg
new file mode 100644
index 0000000000..ed4bae1020
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-in-pattern-02.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100">
+  <defs>
+    <filter id="blur-filter" filterUnits="userSpaceOnUse" x="0" y="0">
+      <feGaussianBlur stdDeviation="0.5"/>
+    </filter>
+    <pattern id="pattern1" width="8" height="8" patternUnits="userSpaceOnUse">
+      <path d="M-1,1 l2,-2" stroke="blue" filter="url(#blur-filter)" />
+    </pattern>
+  </defs>
+
+  <rect x="-20%" y="-20%" width="10%" height="10%" fill="url(#pattern1)"/>
+</svg>
+
diff --git a/layout/reftests/svg/filters/filter-inner-svg-01.svg b/layout/reftests/svg/filters/filter-inner-svg-01.svg
new file mode 100644
index 0000000000..e00bde4636
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-inner-svg-01.svg
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <desc>
+    The 'x' attribute on the inner 'svg' should not result in any of the lime 'circle'
+    it contains from being clipped when the inner 'svg' is filtered.
+  </desc>
+  <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+  <rect width="100%" height="100%" fill="lime"/>
+  <circle fill="red" cx="200" cy="100" r="98"/>
+  <svg x="100" width="200" height="200" filter="url(#filter)">
+    <circle fill="lime" r="100" cx="100" cy="100"/>
+  </svg>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-inner-svg-02.svg b/layout/reftests/svg/filters/filter-inner-svg-02.svg
new file mode 100644
index 0000000000..82809d9301
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-inner-svg-02.svg
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <desc>
+    The 'viewBox' attribute on the inner 'svg' should push the red 'rect' it
+    contains outside the viewport, so if transforms and clipping are working
+    correctly when the inner 'svg' is being filtered, then none of the red
+    'rect' should be visible.
+  </desc>
+  <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+  <!--circle fill="lime" r="100" cx="300" cy="100"/-->
+  <rect width="100%" height="100%" fill="lime"/>
+  <svg width="200" height="200" viewBox="-200 0 200 200" filter="url(#filter)">
+	<circle fill="red" r="98" cx="100" cy="100"/>
+  </svg>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-inner-svg-03.svg b/layout/reftests/svg/filters/filter-inner-svg-03.svg
new file mode 100644
index 0000000000..0ce543e157
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-inner-svg-03.svg
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <desc>
+    The 'transform' attribute on the 'g' parent of the inner 'svg' should
+    not cause the lime 'circle' inside the inner 'svg' to be clipped when
+    the inner 'svg' is filtered.
+  </desc>
+  <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+  <rect width="100%" height="100%" fill="lime"/>
+  <circle fill="red" r="98" cx="200" cy="100"/>
+  <g transform="translate(100, 0)">
+    <svg width="200" height="200" filter="url(#filter)">
+      <circle fill="lime" r="100" cx="100" cy="100"/>
+    </svg>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-kernelUnitLength-01-ref.svg b/layout/reftests/svg/filters/filter-kernelUnitLength-01-ref.svg
new file mode 100644
index 0000000000..e19dfe1f82
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-kernelUnitLength-01-ref.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <filter id="emboss">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
+      <!-- without kernelUnitLength attribute -->
+      <feSpecularLighting in="blur" result="spec" surfaceScale="-3"
+                          specularConstant="2" specularExponent="16"
+                          lighting-color="#ffb155">
+        <feDistantLight azimuth="45" elevation="45"/>
+      </feSpecularLighting>
+      <feComposite in="spec" in2="SourceGraphic" operator="in" result="specOut"/>
+    </filter>
+  </defs>
+  <path filter="url(#emboss)" d="M 44.408917,5.7095287 C 535.13945,101.91182 534.01725,101.52506 532.53904,101.52499 C 531.36871,101.52506 530.17420,101.85117 528.96683,102.49024 z "/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-kernelUnitLength-01.svg b/layout/reftests/svg/filters/filter-kernelUnitLength-01.svg
new file mode 100644
index 0000000000..9b192214f0
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-kernelUnitLength-01.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <filter id="emboss">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
+      <!-- with kernelUnitLength attribute -->
+      <feSpecularLighting in="blur" result="spec" surfaceScale="-3"
+                          specularConstant="2" specularExponent="16"
+                          lighting-color="#ffb155" kernelUnitLength="1">
+        <feDistantLight azimuth="45" elevation="45"/>
+      </feSpecularLighting>
+      <feComposite in="spec" in2="SourceGraphic" operator="in" result="specOut"/>
+    </filter>
+  </defs>
+  <path filter="url(#emboss)" d="M 44.408917,5.7095287 C 535.13945,101.91182 534.01725,101.52506 532.53904,101.52499 C 531.36871,101.52506 530.17420,101.85117 528.96683,102.49024 z "/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-lighting-region-ref.svg b/layout/reftests/svg/filters/filter-lighting-region-ref.svg
new file mode 100644
index 0000000000..d7337102b7
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-lighting-region-ref.svg
@@ -0,0 +1,11 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="300px">
+
+  <rect x="50" y="50" width="200" height="200" fill="black" />
+
+  <rect x="340" y="40" width="220" height="220" fill="grey" />
+  <rect x="350" y="50" width="200" height="200" fill="white" />
+</svg>
diff --git a/layout/reftests/svg/filters/filter-lighting-region.svg b/layout/reftests/svg/filters/filter-lighting-region.svg
new file mode 100644
index 0000000000..883b6d805d
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-lighting-region.svg
@@ -0,0 +1,30 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="300px">
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1203376 -->
+  <defs>
+    <!-- the filter lights are intentionally chosen to fill the entire area with
+         a solid color since we're only testing the extents of the filter region
+    -->
+    <filter id="diffuse" x="-50%" y="-50%" width="200%" height="200%">
+      <!-- gives a black filter region -->
+      <feDiffuseLighting lighting-color="black">
+        <feDistantLight />
+      </feDiffuseLighting>
+    </filter>
+
+    <filter id="specular" x="-50%" y="-50%" width="200%" height="200%">
+      <!-- gives a white filter region -->
+      <feSpecularLighting lighting-color="white" specularConstant="100">
+        <feDistantLight elevation="90"/>
+      </feSpecularLighting>
+    </filter>
+  </defs>
+
+  <rect x="100" y="100" width="100" height="100" filter="url(#diffuse)" />
+
+  <rect x="340" y="40" width="220" height="220" fill="grey" />
+  <rect x="400" y="100" width="100" height="100" filter="url(#specular)" />
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-01.svg b/layout/reftests/svg/filters/filter-marked-line-01.svg
new file mode 100644
index 0000000000..406615443c
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-01.svg
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <desc>
+    Filtering the 'line' should not cause the mark (lime 'circle') to be clipped.
+  </desc>
+  <defs>
+    <marker id="marker" markerWidth="200" markerHeight="200" refX="100" refY="100" 
+      markerUnits="userSpaceOnUse">
+      <circle fill="lime" r="100" cx="100" cy="100"/>
+    </marker>
+    <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+  </defs>
+  <rect width="100%" height="100%" fill="lime"/>
+  <circle fill="red" r="98" cx="100" cy="100"/>
+  <line x2="100" y2="100" marker-end="url(#marker)" filter="url(#filter)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-02.svg b/layout/reftests/svg/filters/filter-marked-line-02.svg
new file mode 100644
index 0000000000..76dea08b9c
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-02.svg
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <desc>
+    The 'transform' attribute on the 'path' should not cause the mark
+    (lime 'circle') to be clipped when the 'path' is filtered.
+  </desc>
+  <defs>
+    <marker id="marker" markerWidth="200" markerHeight="200" refX="100" refY="100" 
+      markerUnits="userSpaceOnUse">
+      <circle fill="lime" r="100" cx="100" cy="100"/>
+    </marker>
+    <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+  </defs>
+  <rect width="100%" height="100%" fill="lime"/>
+  <circle fill="red" r="98" cx="200" cy="100"/>
+  <path d="M0,0 L100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)" transform="translate(100, 0)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-03.svg b/layout/reftests/svg/filters/filter-marked-line-03.svg
new file mode 100644
index 0000000000..d59c71f49e
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-03.svg
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <desc>
+    The 'viewBox' attribute on the 'marker' should not cause the mark
+    (lime 'circle') to be clipped when the 'path' is filtered.
+  </desc>
+  <defs>
+    <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" 
+            markerUnits="userSpaceOnUse" viewBox="-100 0 200 200">
+      <circle fill="lime" r="100" cx="0" cy="100"/>
+    </marker>
+    <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+  </defs>
+  <rect width="100%" height="100%" fill="lime"/>
+  <circle fill="red" r="98" cx="200" cy="100"/>
+  <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-04.svg b/layout/reftests/svg/filters/filter-marked-line-04.svg
new file mode 100644
index 0000000000..0b90aaf557
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-04.svg
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <desc>
+    The 'transform' attribute on the 'circle' should not cause the mark
+    (lime 'circle') to be clipped when the 'path' is filtered.
+  </desc>
+  <defs>
+    <marker id="marker" markerWidth="200" markerHeight="200" refX="100" refY="100" 
+            markerUnits="userSpaceOnUse">
+      <circle fill="lime" r="100" cx="0" cy="100" transform="translate(100, 0)"/>
+    </marker>
+    <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+  </defs>
+  <rect width="100%" height="100%" fill="lime"/>
+  <circle fill="red" r="98" cx="200" cy="100"/>
+  <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-05.svg b/layout/reftests/svg/filters/filter-marked-line-05.svg
new file mode 100644
index 0000000000..6f3fc0938f
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-05.svg
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <desc>
+   The combination of the 'viewBox' attribute on the 'marker' and the 'transform'
+   attribute on the 'circle' element should not cause the mark (lime 'circle') to
+   be clipped when the 'path' is filtered.
+  </desc>
+  <defs>
+    <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" 
+            markerUnits="userSpaceOnUse" viewBox="-100 0 200 200">
+      <circle fill="lime" r="100" cx="-100" cy="100" transform="translate(100, 0)"/>
+    </marker>
+    <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+  </defs>
+  <rect width="100%" height="100%" fill="lime"/>
+  <circle fill="red" r="98" cx="200" cy="100"/>
+  <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-06.svg b/layout/reftests/svg/filters/filter-marked-line-06.svg
new file mode 100644
index 0000000000..147d3a2aa0
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-06.svg
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <desc>
+   The combination of the 'viewBox' attribute on the 'marker' and the 'transform'
+   attribute on the 'g' element should not cause the mark (lime 'circle') to be
+   clipped when the 'path' is filtered.
+  </desc>
+  <defs>
+    <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" 
+            markerUnits="userSpaceOnUse" viewBox="-100 0 200 200">
+      <g transform="translate(100, 0)">
+        <circle fill="lime" r="100" cx="-100" cy="100"/>
+      </g>
+    </marker>
+    <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+  </defs>
+  <rect width="100%" height="100%" fill="lime"/>
+  <circle fill="red" r="98" cx="200" cy="100"/>
+  <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-07.svg b/layout/reftests/svg/filters/filter-marked-line-07.svg
new file mode 100644
index 0000000000..94d1deca8e
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-07.svg
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <desc>
+   The combination of the 'viewBox' attribute on the 'marker' and the 'transform'
+   attributes on the 'g' and 'path' elements should not cause the mark (lime
+  'circle') to be clipped when the 'path' is filtered.
+  </desc>
+  <defs>
+    <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" 
+            markerUnits="userSpaceOnUse" viewBox="-100 0 200 200">
+      <g transform="translate(100, 0)">
+        <circle fill="lime" r="100" cx="-100" cy="100"/>
+      </g>
+    </marker>
+    <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+  </defs>
+  <rect width="100%" height="100%" fill="lime"/>
+  <circle fill="red" r="98" cx="200" cy="100"/>
+  <g transform="translate(100, 0)">
+    <path d="M-100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)" transform="translate(100, 0)"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-08.svg b/layout/reftests/svg/filters/filter-marked-line-08.svg
new file mode 100644
index 0000000000..58d4f9e983
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-08.svg
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <desc>
+    The combination of the 'viewBox' attribute on the 'marker' and the 'transform'
+    attributes on the 'g', 'path' and 'circle' elements should not cause the mark
+    (lime 'circle') to be clipped when the 'path' is filtered.
+  </desc>
+  <defs>
+    <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" 
+            markerUnits="userSpaceOnUse" viewBox="-100 0 200 200">
+      <g transform="translate(100, 0)">
+        <circle fill="lime" r="100" cx="-200" cy="100" transform="translate(100, 0)"/>
+      </g>
+    </marker>
+    <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+  </defs>
+  <rect width="100%" height="100%" fill="lime"/>
+  <circle fill="red" r="98" cx="200" cy="100"/>
+  <g transform="translate(100, 0)">
+    <path d="M-100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)" transform="translate(100, 0)"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-09.svg b/layout/reftests/svg/filters/filter-marked-line-09.svg
new file mode 100644
index 0000000000..55ff716067
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-09.svg
@@ -0,0 +1,27 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <desc>
+    The combination of the 'viewBox' attribute on the 'marker' and the 'transform'
+    attributes on the 'g', 'path' and 'circle' elements should not cause the mark
+    (lime 'circle') to be clipped when the 'path' is filtered.
+  </desc>
+  <defs>
+    <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" 
+            markerUnits="userSpaceOnUse" viewBox="-100 0 200 200">
+      <g transform="translate(100, 0)">
+        <circle fill="lime" r="100" cx="-200" cy="100" transform="translate(100, 0)"/>
+      </g>
+    </marker>
+    <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+  </defs>
+  <rect width="100%" height="100%" fill="lime"/>
+  <circle fill="red" r="98" cx="200" cy="100"/>
+  <g transform="translate(100, 0)">
+    <g filter="url(#filter)">
+     <path d="M-100,0 l100,100 200,200" marker-mid="url(#marker)" transform="translate(100, 0)"/>
+    </g>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-nested-filtering-01.svg b/layout/reftests/svg/filters/filter-nested-filtering-01.svg
new file mode 100644
index 0000000000..57e1d1a65b
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-nested-filtering-01.svg
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=461863 -->
+  <desc>
+    This test checks that transforms and filtering a descendant of a
+    filtered element interact correctly.
+  </desc>
+  <filter id="a"><feGaussianBlur stdDeviation="0.001"/></filter>
+  <filter id="b"><feGaussianBlur stdDeviation="0.001"/></filter>
+  <rect width="100%" height="100%" fill="lime"/>
+  <circle fill="red" cx="200" cy="200" r="98"/>
+  <g id="g" filter="url(#a)" transform="translate(100, 0)">
+    <circle fill="lime" filter="url(#b)" cx="100" cy="200" r="100"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-nested-filtering-02.svg b/layout/reftests/svg/filters/filter-nested-filtering-02.svg
new file mode 100644
index 0000000000..77de499799
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-nested-filtering-02.svg
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=461863 -->
+  <desc>
+    This test checks that transforms and filtering a decedent of a
+    filtered element interact correctly.
+  </desc>
+  <filter id="a"><feGaussianBlur stdDeviation="0.001"/></filter>
+  <filter id="b"><feGaussianBlur stdDeviation="0.001"/></filter>
+  <rect width="100%" height="100%" fill="lime"/>
+  <circle fill="red" cx="200" cy="200" r="98" transform="scale(1.2)"/>
+  <g id="g" filter="url(#a)" transform="scale(1.2) translate(100, 0)">
+    <circle fill="lime" filter="url(#b)" cx="100" cy="200" r="100"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-patterned-rect-01.svg b/layout/reftests/svg/filters/filter-patterned-rect-01.svg
new file mode 100644
index 0000000000..436d3648cf
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-patterned-rect-01.svg
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <desc>
+    Filtering the patterned 'rect' should not cause the pattern (lime
+    'circle') to be clipped or misplaced due to bad interaction with
+    the transforms.
+  </desc>
+  <defs>
+    <pattern id="pattern" patternUnits="userSpaceOnUse"
+             x="0" y="0" width="200" height="200">
+      <circle fill="lime" r="100" cx="100" cy="100"/>
+    </pattern>
+    <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+  </defs>
+  <rect width="100%" height="100%" fill="lime"/>
+  <circle fill="red" r="98" cx="200" cy="100"/>
+  <rect width="200" height="200" fill="url(#pattern)" filter="url(#filter)" transform="translate(100, 0)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-patterned-rect-02.svg b/layout/reftests/svg/filters/filter-patterned-rect-02.svg
new file mode 100644
index 0000000000..f15baa4afc
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-patterned-rect-02.svg
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
+  <desc>
+    Filtering the patterned 'rect' should not cause the pattern (lime
+    'circle') to be clipped or misplaced due to bad interaction with
+    the transforms.
+  </desc>
+  <defs>
+    <pattern id="pattern" patternUnits="userSpaceOnUse"
+             x="0" y="0" width="200" height="200">
+      <circle fill="lime" r="100" cx="100" cy="100"/>
+    </pattern>
+    <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+  </defs>
+  <rect width="100%" height="100%" fill="lime"/>
+  <circle fill="red" r="98" cx="300" cy="100"/>
+  <g transform="translate(100, 0)">
+    <rect width="200" height="200" fill="url(#pattern)" filter="url(#filter)" transform="translate(100, 0)"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-region-01a.html b/layout/reftests/svg/filters/filter-region-01a.html
new file mode 100644
index 0000000000..f66e9bd34d
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-region-01a.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<body style="background-color: lime;">
+<svg width="0" height="0">
+  <filter id="myFilter" filterUnits="objectBoundingBox" x="0" y="0" width="50%" height="50%">
+    <feMerge>
+      <feMergeNode/>
+    </feMerge>
+  </filter>
+</svg>
+
+<!-- This outer svg element should be totally covered by the next filtered outer svg element. -->
+<svg style="position: fixed;" x="0" y ="0" width="120" height="120">
+  <rect x="10" y="10" width="100" height="100" fill="red"/>
+</svg>
+
+<svg filter="url(#myFilter)" style="position: fixed;" x="0" y ="0" width="240" height="240">
+  <rect x="10" y="10" width="100" height="100" fill="lime"/>
+</svg>
+
+</body>
\ No newline at end of file
diff --git a/layout/reftests/svg/filters/filter-region-01b.html b/layout/reftests/svg/filters/filter-region-01b.html
new file mode 100644
index 0000000000..21d5add6e3
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-region-01b.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<body style="background-color: lime;">
+<svg width="0" height="0">
+  <filter id="myFilter" filterUnits="objectBoundingBox" x="0" y="0" width="50%" height="50%">
+    <feMerge>
+      <feMergeNode/>
+    </feMerge>
+  </filter>
+</svg>
+
+<svg style="position: fixed;" x="0" y ="0" width="400" height="400">
+  <!-- This filtered inner element should be covered by the next outer svg element. -->
+  <svg filter="url(#myFilter)" style="position: fixed;" x="0" y ="0" width="200" height="200">
+    <rect x="10" y="10" width="120" height="120" fill="red"/>
+  </svg>
+</svg>
+
+<svg style="position: fixed;" x="0" y ="0" width="120" height="120">
+  <rect x="10" y="10" width="100" height="100" fill="lime"/>
+</svg>
+
+</body>
\ No newline at end of file
diff --git a/layout/reftests/svg/filters/filter-transform-01.svg b/layout/reftests/svg/filters/filter-transform-01.svg
new file mode 100644
index 0000000000..5536a14020
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-transform-01.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="background-color:lime" viewBox="-50 -50 100 100">
+ <defs>
+   <filter id="blur">
+     <feGaussianBlur stdDeviation="1"/>
+   </filter>
+ </defs>
+
+ <circle r="15" fill="red" filter="url(#blur)" transform="rotate(45)"/>
+ <circle r="15" fill="red" filter="url(#blur)" transform="rotate(90)"/>
+ <circle r="15" fill="red" filter="url(#blur)" transform="skewX(0) skewY(0)"/>
+ <circle cx="-10" cy="-10" r="15" fill="red" filter="url(#blur)" transform="translate(10, 10)"/>
+ <circle cx="-10000" cy="-10000" r="15" fill="red" filter="url(#blur)" transform="translate(10000, 10000)"/>
+ <circle r="10" fill="red" filter="url(#blur)" transform="scale(1.5, 1.5)"/>
+
+ <!-- The circles above should be completely covered by the next one. -->
+ <circle r="20" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/filters/mozilla-banner.gif b/layout/reftests/svg/filters/mozilla-banner.gif
new file mode 100644
index 0000000000..dd0f077753
Binary files /dev/null and b/layout/reftests/svg/filters/mozilla-banner.gif differ
diff --git a/layout/reftests/svg/filters/nested-filter-ref.html b/layout/reftests/svg/filters/nested-filter-ref.html
new file mode 100644
index 0000000000..70ee403d7f
--- /dev/null
+++ b/layout/reftests/svg/filters/nested-filter-ref.html
@@ -0,0 +1,14 @@
+<html style="background: red">
+<body>
+  <svg height="100px" width="100px">
+    <g transform="translate(0, 25)">>
+      <defs>
+        <mask id="m" maskUnits="userSpaceOnUse">
+          <rect x=10 y=10 width=51 height=45 fill="white"></rect>
+        </mask>
+      </defs>
+      <rect fill="yellow" x=0 y=0 width=100 height=100 mask="url(#m)"></rect>
+    </g>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/nested-filter.html b/layout/reftests/svg/filters/nested-filter.html
new file mode 100644
index 0000000000..86407bc5c0
--- /dev/null
+++ b/layout/reftests/svg/filters/nested-filter.html
@@ -0,0 +1,23 @@
+<html style="background: red">
+<body>
+  <svg height="100px" width="100px">
+    <defs>
+      <filter filterUnits="userSpaceOnUse" id="merge" color-interpolation-filters="sRGB">
+        <feMerge>
+          <feMergeNode in="SourceGraphic"></feMergeNode>
+        </feMerge>
+      </filter>
+    </defs>
+    <g filter="url(#merge)">
+      <g transform="translate(0, 25)">>
+        <defs>
+          <mask id="m" maskUnits="userSpaceOnUse">
+            <rect x=10 y=10 width=51 height=45 fill="white"></rect>
+          </mask>
+        </defs>
+        <rect fill="yellow" x=0 y=0 width=100 height=100 mask="url(#m)"></rect>
+      </g>
+    </g>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-1.svg b/layout/reftests/svg/filters/outside-sourcegraphic-1.svg
new file mode 100644
index 0000000000..f360aa12fd
--- /dev/null
+++ b/layout/reftests/svg/filters/outside-sourcegraphic-1.svg
@@ -0,0 +1,10 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
+    <feFlood flood-color="lime"/>
+  </filter>
+  <rect width="100" height="100" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-2.svg b/layout/reftests/svg/filters/outside-sourcegraphic-2.svg
new file mode 100644
index 0000000000..6699d620b9
--- /dev/null
+++ b/layout/reftests/svg/filters/outside-sourcegraphic-2.svg
@@ -0,0 +1,13 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
+    <feColorMatrix type="matrix" values="0 0 0 0  0
+                                         0 0 0 0  1
+                                         0 0 0 0  0
+                                         0 0 0 0  1"/>
+  </filter>
+  <rect width="100" height="100" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-3.svg b/layout/reftests/svg/filters/outside-sourcegraphic-3.svg
new file mode 100644
index 0000000000..f8f6b36387
--- /dev/null
+++ b/layout/reftests/svg/filters/outside-sourcegraphic-3.svg
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
+    <feComponentTransfer>
+      <feFuncR type="table" tableValues="0 0" />
+      <feFuncG type="table" tableValues="1 1" />
+      <feFuncB type="table" tableValues="0 0" />
+      <feFuncA type="table" tableValues="1 1" />
+    </feComponentTransfer>
+  </filter>
+  <rect width="100" height="100" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-ref.svg b/layout/reftests/svg/filters/outside-sourcegraphic-ref.svg
new file mode 100644
index 0000000000..a336d22158
--- /dev/null
+++ b/layout/reftests/svg/filters/outside-sourcegraphic-ref.svg
@@ -0,0 +1,7 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect width="200" height="200" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/filters/pass.svg b/layout/reftests/svg/filters/pass.svg
new file mode 100644
index 0000000000..c09c6601e8
--- /dev/null
+++ b/layout/reftests/svg/filters/pass.svg
@@ -0,0 +1,8 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <title>Testcase reference file for generic pass condition</title>
+  <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/filters/reftest.list b/layout/reftests/svg/filters/reftest.list
new file mode 100644
index 0000000000..9975eb190d
--- /dev/null
+++ b/layout/reftests/svg/filters/reftest.list
@@ -0,0 +1,142 @@
+# In general, the fe*-1 tests test basic functionality clipped to a filter primitive
+# subregion. The fe*-2 tests test with no clipping (which stresses
+# the automatic optimal surface-size computation a bit more).
+
+# CSS filter tests
+include css-filters/reftest.list
+
+# CSS filter chain tests
+include css-filter-chains/reftest.list
+
+# Combined CSS and SVG filter chain tests
+include css-svg-filter-chains/reftest.list
+
+# SVG filter chain tests
+include svg-filter-chains/reftest.list
+
+== dynamic-filtered-foreignObject-01.svg pass.svg
+== dynamic-filter-invalidation-01.svg pass.svg
+== dynamic-filter-invalidation-02.svg pass.svg
+== dynamic-filter-invalidation-03.svg pass.svg
+== dynamic-filter-invalidation-04.svg pass.svg
+
+fuzzy(0-1,0-42500) == feBlend-1.svg feBlend-1-ref.svg
+== feBlend-2.svg feBlend-2-ref.svg
+
+fuzzy(0-1,0-6400) == feColorMatrix-1.svg feColorMatrix-1-ref.svg
+fuzzy(0-1,0-10000) == feColorMatrix-2.svg feColorMatrix-2-ref.svg
+
+== feComponentTransfer-1.svg feComponentTransfer-1-ref.svg
+== feComponentTransfer-2.svg feComponentTransfer-2-ref.svg
+
+fuzzy(0-1,0-9600) == feComposite-1.svg feComposite-1-ref.svg
+fuzzy(0-1,0-10000) == feComposite-2.svg feComposite-2-ref.svg
+
+== feConvolveMatrix-1.svg feConvolveMatrix-1-ref.svg
+== feConvolveMatrix-2.svg feConvolveMatrix-2-ref.svg
+
+== feDisplacementMap-1.svg feDisplacementMap-1-ref.svg
+== feDisplacementMap-2.svg feDisplacementMap-2-ref.svg
+
+fuzzy(0-1,0-1600) == feFlood-1.svg feFlood-1-ref.svg
+skip-if(d2d) fuzzy(0-1,0-6400) == feFlood-2.svg feFlood-2-ref.svg
+
+fuzzy(0-2,0-6404) fuzzy-if(Android&&device&&!swgl,6-6,6400-6400) == feGaussianBlur-1.svg feGaussianBlur-1-ref.svg
+fuzzy(0-2,0-304) == feGaussianBlur-2.svg feGaussianBlur-2-ref.svg
+# != feGaussianBlur-3.svg feGaussianBlur-3-ref.svg
+fuzzy-if(!useDrawSnapshot,2-5,4764-8168) fuzzy-if(Android&&device&&!swgl,5-5,8574-8574) == feGaussianBlur-4.svg feGaussianBlur-4-ref.svg
+fuzzy-if(geckoview,0-4,0-200) == feGaussianBlur-5.svg feGaussianBlur-5-ref.svg
+== feGaussianBlur-6.svg feGaussianBlur-6-ref.svg
+skip-if(d2d) == feGaussianBlur-cap-large-directional-radius-on-software.html feGaussianBlur-cap-large-directional-radius-on-software-ref.html
+
+!= feImage-1.svg about:blank # (Make sure our image renders at all)
+== feImage-1.svg feImage-1-ref.svg
+== feImage-scale-to-primitive-subregion.html feImage-scale-to-primitive-subregion-ref.html
+
+== feMerge-1.svg feMerge-1-ref.svg
+== feMerge-2.svg feMerge-2-ref.svg
+
+== feMorphology-1.svg feMorphology-1-ref.svg
+== feMorphology-2.svg feMorphology-2-ref.svg
+
+== feOffset-1.svg feOffset-1-ref.svg
+== feOffset-2.svg feOffset-2-ref.svg
+
+== feTile-1.svg feTile-1-ref.svg
+== feTile-2.svg feTile-2-ref.svg
+
+# no tests for feTurbulence
+
+fuzzy-if(geckoview,0-36,0-220) == filter-clipped-rect-01.svg pass.svg
+== filter-in-pattern-01.svg pass.svg
+fuzzy(0-5,0-67) != filter-in-pattern-02.svg filter-in-pattern-02-ref.svg
+random-if(winWidget) == filter-in-mask-01.svg pass.svg # bug 1356139
+== filter-in-mask-02.svg pass.svg
+== filter-inner-svg-01.svg pass.svg
+== filter-inner-svg-02.svg pass.svg
+== filter-inner-svg-03.svg pass.svg
+fails == filter-marked-line-01.svg pass.svg # bug 477704
+== filter-kernelUnitLength-01.svg filter-kernelUnitLength-01-ref.svg
+== filter-marked-line-02.svg pass.svg
+== filter-marked-line-03.svg pass.svg
+== filter-marked-line-04.svg pass.svg
+== filter-marked-line-05.svg pass.svg
+== filter-marked-line-06.svg pass.svg
+== filter-marked-line-07.svg pass.svg
+== filter-marked-line-08.svg pass.svg
+== filter-marked-line-09.svg pass.svg
+== filter-nested-filtering-01.svg pass.svg
+fuzzy(0-10,0-1200) == filter-nested-filtering-02.svg pass.svg
+== filter-patterned-rect-01.svg pass.svg
+== filter-patterned-rect-02.svg pass.svg
+== filter-region-01a.html pass.svg
+== filter-region-01b.html pass.svg
+== filter-transform-01.svg pass.svg
+
+== feColorMatrix-saturate-01.svg pass.svg
+
+== feComponentTransfer-03.svg pass.svg
+== feComponentTransfer-04.svg pass.svg
+== feComposite-arguments-01.svg pass.svg
+fuzzy-if(winWidget,0-1,0-39600) == feComposite-operator-lighter.svg feComposite-operator-lighter-ref.html
+fuzzy(0-85,0-28600) == feComposite-paint-01.svg feComposite-paint-01-ref.svg
+fuzzy(0-1,0-10000) == feConvolveMatrix-bias-01.svg feConvolveMatrix-bias-01-ref.svg
+== feConvolveMatrix-order-01.svg feConvolveMatrix-order-01-ref.svg
+
+fuzzy(0-1,0-400) == feDisplacementMap-alpha-01.svg pass.svg
+fuzzy(0-2,0-500) == feDisplacementMap-colour-01.svg feDisplacementMap-colour-01-ref.svg
+== feDisplacementMap-scale-01.svg pass.svg
+
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-2,0-25) fuzzy-if(!useDrawSnapshot,55-98,14033-16467) == feDropShadow-01.svg feDropShadow-01-ref.svg
+
+== feFlood-color-01.svg pass.svg
+
+fuzzy-if(!useDrawSnapshot||(winWidget&&isCoverageBuild),20-21,5540-5647) == feGaussianBlur-alpha-01.svg feGaussianBlur-alpha-01-ref.svg
+
+== feMorphology-radius-negative-01.svg pass.svg
+== feMorphology-radius-negative-02.svg pass.svg
+== feMorphology-radius-zero-01.svg pass.svg
+== feMorphology-radius-zero-02.svg pass.svg
+
+== feTile-large-01.svg pass.svg
+== feTile-large-02.svg feTile-large-02-ref.svg
+== feTile-outside-01.svg feTile-outside-01-ref.svg
+
+fuzzy(0-1,0-219) == feDiffuseLighting-1.svg feDiffuseLighting-1-ref.svg
+
+fuzzy(0-2,0-2659) skip-if(d2d) == feSpecularLighting-1.svg feSpecularLighting-1-ref.svg
+
+== filter-lighting-region.svg filter-lighting-region-ref.svg
+
+fails-if(useDrawSnapshot) == fePointLight-zoomed-page.svg fePointLight-zoomed-page-ref.svg
+
+== feTurbulence-offset.svg feTurbulence-offset-ref.svg
+fuzzy(0-1,0-10000) == feTurbulence-zero-baseFreq-01.svg feTurbulence-zero-baseFreq-01-ref.svg
+!= feTurbulence-zero-baseFreq-02.svg about:blank
+
+== outside-sourcegraphic-1.svg outside-sourcegraphic-ref.svg
+# These failures are caused by bug 1586055
+fails-if(!useDrawSnapshot) == outside-sourcegraphic-2.svg outside-sourcegraphic-ref.svg
+fails-if(!useDrawSnapshot) == outside-sourcegraphic-3.svg outside-sourcegraphic-ref.svg
+== nested-filter.html nested-filter-ref.html
+== filter-giant.svg pass.svg
diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-input-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-input-ref.svg
new file mode 100644
index 0000000000..4939ce12ae
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/clip-input-ref.svg
@@ -0,0 +1,26 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Clip Input Filter</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <metadata class="flags">namespace svg</metadata>
+  </g>
+
+  <g id="test-body-content">
+    <rect x="0" y="0" width="100" height="100" fill="green"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-input.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-input.svg
new file mode 100644
index 0000000000..8dd2841add
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/clip-input.svg
@@ -0,0 +1,52 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Clip Input Filter</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <link rel="match"
+          href="clip-input-ref.svg" />
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">
+      In an SVG filter chain, this test verifies that a filter region clips a
+      SourceGraphic input filter. If the test passes, you should see a green
+      square.
+    </desc>
+  </g>
+
+  <g id="test-body-content">
+    <filter id="f1" x="100" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+      <!-- Create a red square at x=100. -->
+      <feFlood flood-color="red"/>
+    </filter>
+    <filter id="f2" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+      <!-- Create a green square at x=0. -->
+      <feFlood result="green" flood-color="green"/>
+      <!--
+          Attempt to offset the red square left to cover up the green square.
+          However, this filter's filter region should clip away the red square,
+          and only transparent pixels should be offset left, leaving the green
+          square intact.
+      -->
+      <feOffset result="red" in="SourceGraphic" dx="-100" x="0" y="0" width="200" height="100"/>
+      <feMerge>
+          <feMergeNode in="green"/>
+          <feMergeNode in="red"/>
+      </feMerge>
+    </filter>
+    <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic-ref.svg
new file mode 100644
index 0000000000..048dc64687
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic-ref.svg
@@ -0,0 +1,26 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Clip Original SourceGraphic</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <metadata class="flags">namespace svg</metadata>
+  </g>
+
+  <g id="test-body-content">
+    <rect x="0" y="0" width="100" height="100" fill="green"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic.svg
new file mode 100644
index 0000000000..f6349768ed
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic.svg
@@ -0,0 +1,50 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Clip Original SourceGraphic</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <link rel="match"
+          href="clip-original-SourceGraphic-ref.svg" />
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">
+      In an SVG filter chain, this test verifies that the filter region of the
+      first filter clips the original SourceGraphic. If the test passes, you
+      should see a green square.
+    </desc>
+  </g>
+
+  <g id="test-body-content">
+    <!--
+      Use a filter region less wide than the red rectangle SourceGraphic. This
+      should clip the red rectangle, resulting in a red square.
+    -->
+    <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+      <!-- Create a green square at x=0. -->
+      <feFlood result="green" flood-color="green" x="0" y="0" width="100" height="100"/>
+      <!--
+        Offset the red SourceGraphic left. If it wasn't clipped properly, it
+        will cover up the green square. If it was clipped properly, it won't.
+      -->
+      <feOffset result="offset-red" in="SourceGraphic" dx="-100" x="0" y="0" width="200" height="100"/>
+      <feMerge>
+        <feMergeNode in="green"/>
+        <feMergeNode in="offset-red"/>
+      </feMerge>
+    </filter>
+    <rect x="0" y="0" width="200" height="100" filter="url(#f1)" fill="red"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-output-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-output-ref.svg
new file mode 100644
index 0000000000..26b6cc7f03
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/clip-output-ref.svg
@@ -0,0 +1,30 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Clip Filter Output</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <metadata class="flags">namespace svg</metadata>
+  </g>
+
+  <g id="test-body-content">
+    <filter id="hue-rotate">
+      <!-- Turn the red square green. -->
+      <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/>
+    </filter>
+    <rect x="0" y="0" width="100" height="100" filter="url(#hue-rotate)" fill="red"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-output.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-output.svg
new file mode 100644
index 0000000000..94d3a953ab
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/clip-output.svg
@@ -0,0 +1,52 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Clip Filter Output</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <link rel="match"
+          href="clip-output-ref.svg" />
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">
+      In an SVG filter chain, this test verifies a filter region clips its
+      filter's output into the next filter. If the test passes, you should see a
+      green square.
+    </desc>
+  </g>
+
+  <g id="test-body-content">
+    <filter id="flood" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+      <!--
+        Create a red square followed by a blue square. The blue square should be
+        clipped away due to this filter's filter region.
+      -->
+      <feFlood result="red" flood-color="red" x="0" y="0" width="100" height="100"/>
+      <feFlood result="blue" flood-color="blue" x="100" y="0" width="100" height="100"/>
+      <feMerge>
+          <feMergeNode in="red"/>
+          <feMergeNode in="blue"/>
+      </feMerge>
+    </filter>
+    <filter id="hue-rotate" x="0" y="0" width="200" height="100" filterUnits="userSpaceOnUse">
+      <!--
+        Turn the red square green. If the blue square wasn't clipped by the
+        previous filter's filter region, it will turn red.
+       -->
+      <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/>
+    </filter>
+    <rect x="0" y="0" width="100" height="100" filter="url(#flood) url(#hue-rotate)"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/default-subregion-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/default-subregion-ref.svg
new file mode 100644
index 0000000000..86d77e2008
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/default-subregion-ref.svg
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Default Filter Primitive Subregion</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <metadata class="flags">namespace svg</metadata>
+  </g>
+
+  <g id="test-body-content">
+    <filter id="f1" x="50" y="50" width="200" height="200" filterUnits="userSpaceOnUse">
+      <feGaussianBlur stdDeviation="10"/>
+    </filter>
+    <rect x="100" y="100" width="100" height="100" filter="url(#f1)" fill="green"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/default-subregion.svg b/layout/reftests/svg/filters/svg-filter-chains/default-subregion.svg
new file mode 100644
index 0000000000..b175fe0a31
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/default-subregion.svg
@@ -0,0 +1,48 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Default Filter Primitive Subregion</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <link rel="match"
+          href="default-subregion-ref.svg" />
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">
+      In an SVG filter chain, this test verifies that the default filter
+      primitive subregion is equal to the filter region. If the test passes,
+      you should see a blurred green square.
+    </desc>
+  </g>
+
+  <g id="test-body-content">
+    <filter id="f1" x="100" y="100" width="100" height="100" filterUnits="userSpaceOnUse">
+      <!-- Fill a 100x100 square with green. -->
+      <feFlood flood-color="green"/>
+    </filter>
+    <filter id="f2" x="50" y="50" width="200" height="200" filterUnits="userSpaceOnUse">
+      <!--
+        This feGaussianBlur primitive blurs the 100x100 green square from the
+        previous filter. It does not explicitly define a filter primitive
+        subregion, so its subregion should equal the filter region. The filter
+        region has plenty of space for the blur outsets, so the blur should not
+        appear clipped. If the blur incorrectly uses a primitive subregion or
+        filter region from a previous filter, the blur may appear clipped.
+      -->
+      <feGaussianBlur stdDeviation="10"/>
+    </filter>
+    <rect x="100" y="100" width="100" height="100" filter="url(#f1) url(#f2)" fill="red"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions-ref.svg
new file mode 100644
index 0000000000..fb405de255
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions-ref.svg
@@ -0,0 +1,30 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Use Same FillPaint Input with Different Filter Regions</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <metadata class="flags">namespace svg</metadata>
+  </g>
+
+  <g id="test-body-content">
+    <filter id="f1">
+      <!-- Turn the red square into a green square. -->
+      <feColorMatrix type="hueRotate" values="90"/>
+    </filter>
+    <rect x="0" y="0" width="200" height="200" filter="url(#f1)" fill="red"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions.svg b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions.svg
new file mode 100644
index 0000000000..57277b62d6
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions.svg
@@ -0,0 +1,43 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Use Same FillPaint Input with Different Filter Regions</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <link rel="match"
+          href="different-FillPaint-filter-regions-ref.svg" />
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">
+      In an SVG filter chain, this test verifies that a FillPaint input is large
+      enough to cover the largest filter region in the chain. If the test
+      passes, you should see a green square.
+    </desc>
+  </g>
+
+  <g id="test-body-content">
+    <!-- Use a small filter region. -->
+    <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+      <!-- Turn the red square into a blue square. -->
+      <feColorMatrix in="FillPaint" type="hueRotate" values="180"/>
+    </filter>
+    <!-- Use a large filter region. -->
+    <filter id="f2" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
+      <!-- Turn the red square into a green square. -->
+      <feColorMatrix in="FillPaint" type="hueRotate" values="90"/>
+    </filter>
+    <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)" fill="red"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions-ref.svg
new file mode 100644
index 0000000000..ecdff269c0
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions-ref.svg
@@ -0,0 +1,30 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Use Same StrokePaint Input with Different Filter Regions</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <metadata class="flags">namespace svg</metadata>
+  </g>
+
+  <g id="test-body-content">
+    <filter id="f1">
+      <!-- Turn the red square into a green square. -->
+      <feColorMatrix type="hueRotate" values="90"/>
+    </filter>
+    <rect x="0" y="0" width="200" height="200" filter="url(#f1)" fill="red"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions.svg b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions.svg
new file mode 100644
index 0000000000..2e0d1adb2b
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions.svg
@@ -0,0 +1,43 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Use Same StrokePaint Input with Different Filter Regions</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <link rel="match"
+          href="different-StrokePaint-filter-regions-ref.svg" />
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">
+      In an SVG filter chain, this test verifies that a StrokePaint input is large
+      enough to cover the largest filter region in the chain. If the test
+      passes, you should see a green square.
+    </desc>
+  </g>
+
+  <g id="test-body-content">
+    <!-- Use a small filter region. -->
+    <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+      <!-- Turn the red square into a blue square. -->
+      <feColorMatrix in="StrokePaint" type="hueRotate" values="180"/>
+    </filter>
+    <!-- Use a large filter region. -->
+    <filter id="f2" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
+      <!-- Turn the red square into a green square. -->
+      <feColorMatrix in="StrokePaint" type="hueRotate" values="90"/>
+    </filter>
+    <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)" stroke="red"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives-ref.svg
new file mode 100644
index 0000000000..214be69ea2
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives-ref.svg
@@ -0,0 +1,30 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Don't Clip Primitives in Previous Filters to Subsequent Filter Regions</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <metadata class="flags">namespace svg</metadata>
+  </g>
+
+  <g id="test-body-content">
+    <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+      <!-- Turn the red square into a green square. -->
+      <feColorMatrix type="hueRotate" values="90"/>
+    </filter>
+    <rect x="0" y="0" width="100" height="100" filter="url(#f1)" fill="red"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives.svg b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives.svg
new file mode 100644
index 0000000000..50b2be3a62
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives.svg
@@ -0,0 +1,51 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Don't Clip Primitives in Previous Filters to Subsequent Filter Regions</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <link rel="match"
+          href="dont-clip-previous-primitives.svg" />
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">
+      In an SVG filter chain, this test verifies that a second filter's filter
+      region does not clip the primitives inside a first filter. If the test
+      passes, you should see a green square.
+    </desc>
+  </g>
+
+  <g id="test-body-content">
+    <!-- Use a wide filter region. -->
+    <filter id="f1" x="0" y="0" width="200" height="100" filterUnits="userSpaceOnUse">
+      <!-- Create a red square at x=100. -->
+      <feFlood flood-color="red" x="100" y="0" width="100" height="100"/>
+      <!-- Offset the red square left to x=0. -->
+      <feOffset dx="-100" x="0" y="0" width="200" height="100"/>
+    </filter>
+    <!--
+      Use a less wide filter region. The intermediate results of the previous
+      filter do not fit in this filter region, but that shouldn't matter. The
+      previous filter's intermediate results should not be affected by this
+      filter region. The final result of the previous filter should fit in this
+      filter region.
+    -->
+    <filter id="f2" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+      <!-- Turn the red square into a green square. -->
+      <feColorMatrix type="hueRotate" values="90"/>
+    </filter>
+    <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)" fill="blue"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions-ref.svg
new file mode 100644
index 0000000000..2f97ca88ad
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions-ref.svg
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Intersecting Filter Regions</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <metadata class="flags">namespace svg</metadata>
+  </g>
+
+  <g id="test-body-content">
+    <filter id="hue-rotate">
+      <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/>
+    </filter>
+    <rect x="100" y="100" width="100" height="100" filter="url(#hue-rotate)" fill="red"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions.svg b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions.svg
new file mode 100644
index 0000000000..f9ff60aa2f
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions.svg
@@ -0,0 +1,45 @@
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Intersecting Filter Regions</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <link rel="match"
+          href="intersecting-filter-regions-ref.svg" />
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">
+      In an SVG filter chain, this test verifies that filters with intersecting
+      filter regions render properly. If the test passes, you should see a green
+      square.
+    </desc>
+  </g>
+
+  <g id="test-body-content">
+    <filter id="flood" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
+      <!--
+        This filter clips the SourceGraphic to its top left corner and fills it
+        with red.
+      -->
+      <feFlood flood-color="red"/>
+    </filter>
+    <filter id="hue-rotate" x="100" y="100" width="200" height="200" filterUnits="userSpaceOnUse">
+      <!--
+        This filter clips the output of the previous filter to the bottom right
+        corner, and it changes red into green. If the previous filter didn't run
+        or it didn't clip the SourceGraphic, this filter will change the
+        SourceGraphic's blue fill into red.
+      -->
+      <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/>
+    </filter>
+    <rect x="0" y="0" width="300" height="300" filter="url(#flood) url(#hue-rotate)" fill="blue"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/long-chain.svg b/layout/reftests/svg/filters/svg-filter-chains/long-chain.svg
new file mode 100644
index 0000000000..00f0c9dc62
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/long-chain.svg
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <filter id="flood-with-yellow">
+    <!-- Turn the black rect into a yellow rect. -->
+    <feFlood x="20" y="20" width="100" height="100" flood-color="#ffff00"/>
+  </filter>
+  <filter id="extract-red-channel">
+    <!-- Turn the yellow rect into a red rect. -->
+    <feComponentTransfer x="0" y="0" width="120" height="120">
+      <feFuncR type="identity"/>
+      <feFuncG type="table" tableValues="0 0"/>
+      <feFuncB type="table" tableValues="0 0"/>
+      <feFuncA type="identity"/>
+    </feComponentTransfer>
+  </filter>
+  <filter id="blur">
+    <!-- Blur the red rect. -->
+    <feGaussianBlur stdDeviation="3" x="10" y="10" width="120" height="120"/>
+  </filter>
+  <filter id="hue-rotate">
+    <!-- Turn the red rect into a green rect. -->
+    <feColorMatrix type="hueRotate" values="90"/>
+  </filter>
+  <rect x="20" y="20" width="100" height="100" filter="url(#flood-with-yellow) url(#extract-red-channel) url(#blur) url(#hue-rotate)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/multiple-primitives-per-filter.svg b/layout/reftests/svg/filters/svg-filter-chains/multiple-primitives-per-filter.svg
new file mode 100644
index 0000000000..9bdf8fe2c0
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/multiple-primitives-per-filter.svg
@@ -0,0 +1,24 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <filter id="flood-with-red">
+    <!-- Turn the black rect into a yellow rect. -->
+    <feFlood x="20" y="20" width="100" height="100" flood-color="#ffff00"/>
+    <!-- Turn the yellow rect into a red rect. -->
+    <feComponentTransfer x="0" y="0" width="120" height="120">
+        <feFuncR type="identity"/>
+        <feFuncG type="table" tableValues="0 0"/>
+        <feFuncB type="table" tableValues="0 0"/>
+        <feFuncA type="identity"/>
+    </feComponentTransfer>
+  </filter>
+  <filter id="blur-and-hue-rotate">
+    <!-- Blur the red rect. -->
+    <feGaussianBlur stdDeviation="3" x="10" y="10" width="120" height="120"/>
+    <!-- Turn the red rect into a green rect. -->
+    <feColorMatrix type="hueRotate" values="90"/>
+  </filter>
+  <rect x="20" y="20" width="100" height="100" filter="url(#flood-with-red) url(#blur-and-hue-rotate)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/reftest.list b/layout/reftests/svg/filters/svg-filter-chains/reftest.list
new file mode 100644
index 0000000000..12ddf9d8bb
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/reftest.list
@@ -0,0 +1,16 @@
+# These tests verify that SVG filter chains behave properly.
+# e.g. filter: url(#f1) url(#f2) url(#f3)
+
+== clip-input.svg clip-input-ref.svg
+== clip-original-SourceGraphic.svg clip-original-SourceGraphic-ref.svg
+== clip-output.svg clip-output-ref.svg
+fuzzy(0-5,0-20300) fuzzy-if(Android&&device&&!swgl,5-5,21751-21751) == default-subregion.svg default-subregion-ref.svg
+== different-FillPaint-filter-regions.svg different-FillPaint-filter-regions-ref.svg
+== different-StrokePaint-filter-regions.svg different-StrokePaint-filter-regions-ref.svg
+== dont-clip-previous-primitives.svg dont-clip-previous-primitives-ref.svg
+== intersecting-filter-regions.svg intersecting-filter-regions-ref.svg
+fuzzy-if(!useDrawSnapshot,9-9,5168-5536) fuzzy-if(!useDrawSnapshot&&swgl,7-7,13170-13184) fuzzy-if(Android&&device&&!swgl,8-8,12391-12391) == long-chain.svg simple-chain-ref.svg
+fuzzy-if(!useDrawSnapshot,9-9,5168-5536) fuzzy-if(!useDrawSnapshot&&swgl,7-7,13170-13184) fuzzy-if(Android&&device&&!swgl,8-8,12391-12391) == multiple-primitives-per-filter.svg simple-chain-ref.svg
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-173) fuzzy-if(!useDrawSnapshot||(winWidget&&isCoverageBuild),9-9,5128-5496) fuzzy-if(!useDrawSnapshot&&swgl,7-7,12820-12830) fuzzy-if(Android&&device&&!swgl,8-8,12355-12355) == second-filter-uses-SourceAlpha.svg second-filter-uses-SourceAlpha-ref.svg
+fuzzy-if(!useDrawSnapshot,9-9,5168-5536) fuzzy-if(!useDrawSnapshot&&swgl,7-7,13170-13180) fuzzy-if(Android&&device&&!swgl,8-8,12391-12391) == second-filter-uses-SourceGraphic.svg simple-chain-ref.svg
+== simple-chain.svg simple-chain-ref.svg
diff --git a/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha-ref.svg
new file mode 100644
index 0000000000..e809e55bb3
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha-ref.svg
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Second Filter Uses SourceAlpha</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <metadata class="flags">namespace svg</metadata>
+  </g>
+
+  <g id="test-body-content">
+    <filter id="blur">
+      <feGaussianBlur stdDeviation="3"/>
+    </filter>
+    <rect x="100" y="100" width="100" height="100" filter="url(#blur)" fill="#00ff00"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha.svg b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha.svg
new file mode 100644
index 0000000000..474c9da14c
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha.svg
@@ -0,0 +1,49 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <g id="testmeta">
+    <title>SVG Filter Chains: Second Filter Uses SourceAlpha</title>
+    <link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <link rel="author"
+          title="Max Vujovic"
+          href="mailto:mvujovic@adobe.com"/>
+    <link rel="help"
+          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+    <link rel="match"
+          href="second-filter-uses-SourceAlpha.svg" />
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">
+      In an SVG filter chain, this test verifies that a filter receives the
+      correct SourceAlpha input from the previous filter in the chain. If the
+      test passes, you should see a blurred green square.
+    </desc>
+  </g>
+
+  <g id="test-body-content">
+    <filter id="blur">
+      <feGaussianBlur stdDeviation="3"/>
+    </filter>
+    <filter id="add-green">
+      <!--
+        This filter receives transparent black and the alpha channel of the
+        previous blur filter. Then, it adds to the green channel where the alpha
+        channel is set, resulting in a blurred green square.
+      -->
+      <feComponentTransfer in="SourceAlpha">
+        <feFuncR type="identity"/>
+        <feFuncG type="table" tableValues="1 1"/>
+        <feFuncB type="identity"/>
+        <feFuncA type="identity"/>
+      </feComponentTransfer>
+    </filter>
+    <rect x="100" y="100" width="100" height="100" filter="url(#blur) url(#add-green)" fill="red"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceGraphic.svg b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceGraphic.svg
new file mode 100644
index 0000000000..f8dc040b83
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceGraphic.svg
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <filter id="blur">
+    <!-- Blur the red rect. -->
+    <feGaussianBlur stdDeviation="3"/>
+  </filter>
+  <filter id="hue-rotate">
+    <feFlood flood-color="#0000ff"/>
+    <!-- Turn the red rect into a green rect. feColorMatrix should use the
+         result of the #blur filter, not feFlood, as its SourceGraphic. -->
+    <feColorMatrix in="SourceGraphic" type="hueRotate" values="90"/>
+  </filter>
+  <rect x="20" y="20" width="100" height="100" fill="#ff0000" filter="url(#blur) url(#hue-rotate)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/simple-chain-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/simple-chain-ref.svg
new file mode 100644
index 0000000000..4194849054
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/simple-chain-ref.svg
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <!-- Test multiple SVG filters chained together against a single SVG filter. -->
+  <filter id="blur-and-hue-rotate">
+    <!-- Blur the red rect. -->
+    <feGaussianBlur stdDeviation="3"/>
+    <!-- Turn the red rect into a green rect. -->
+    <feColorMatrix type="hueRotate" values="90"/>
+  </filter>
+  <rect x="20" y="20" width="100" height="100" fill="#ff0000" filter="url(#blur-and-hue-rotate)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/simple-chain.svg b/layout/reftests/svg/filters/svg-filter-chains/simple-chain.svg
new file mode 100644
index 0000000000..e391bf8e03
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/simple-chain.svg
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <filter id="blur">
+    <!-- Blur the red rect. -->
+    <feGaussianBlur stdDeviation="3"/>
+  </filter>
+  <filter id="hue-rotate">
+    <!-- Turn the red rect into a green rect. -->
+    <feColorMatrix type="hueRotate" values="90"/>
+  </filter>
+  <rect x="20" y="20" width="100" height="100" fill="#ff0000" filter="url(#blur) url(#hue-rotate)"/>
+</svg>
-- 
cgit v1.2.3