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>
---
 .../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 +++++++++
 133 files changed, 3523 insertions(+)
 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

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

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>
-- 
cgit v1.2.3