From f2ff499ef765f701980a65a1063f765fecab8573 Mon Sep 17 00:00:00 2001
From: Horia Iosif Olaru <olaru@adobe.com>
Date: Fri, 8 Nov 2013 10:09:08 -0500
Subject: [PATCH] Bug 841601 - Add a second batch of tests for
 background-blending which tests each blend mode. r=roc

The reference results are copied over from the svg tests.
---
 .../background-blending-color-burn-ref.svg    | 22 ++++++++++++++++
 .../background-blending-color-burn.html       | 16 ++++++++++++
 .../background-blending-color-dodge-ref.svg   | 22 ++++++++++++++++
 .../background-blending-color-dodge.html      | 14 ++++++++++
 .../background-blending-color-ref.svg         | 22 ++++++++++++++++
 .../background-blending-color.html            | 14 ++++++++++
 .../background-blending-darken-ref.svg        | 22 ++++++++++++++++
 .../background-blending-darken.html           | 14 ++++++++++
 .../background-blending-difference-ref.svg    | 22 ++++++++++++++++
 .../background-blending-difference.html       | 14 ++++++++++
 .../background-blending-exclusion-ref.svg     | 22 ++++++++++++++++
 .../background-blending-exclusion.html        | 14 ++++++++++
 .../background-blending-hard-light-ref.svg    | 22 ++++++++++++++++
 .../background-blending-hard-light.html       | 14 ++++++++++
 .../background-blending-hue-ref.svg           | 22 ++++++++++++++++
 .../css-blending/background-blending-hue.html | 14 ++++++++++
 .../background-blending-lighten-ref.svg       | 22 ++++++++++++++++
 .../background-blending-lighten.html          | 14 ++++++++++
 .../background-blending-luminosity-ref.svg    | 22 ++++++++++++++++
 .../background-blending-luminosity.html       | 14 ++++++++++
 .../background-blending-multiply-ref.svg      | 22 ++++++++++++++++
 .../background-blending-multiply.html         | 14 ++++++++++
 .../background-blending-normal-ref.svg        | 22 ++++++++++++++++
 .../background-blending-normal.html           | 14 ++++++++++
 .../background-blending-overlay-ref.svg       | 22 ++++++++++++++++
 .../background-blending-overlay.html          | 14 ++++++++++
 .../background-blending-saturation-ref.svg    | 22 ++++++++++++++++
 .../background-blending-saturation.html       | 14 ++++++++++
 .../background-blending-screen-ref.svg        | 22 ++++++++++++++++
 .../background-blending-screen.html           | 14 ++++++++++
 .../background-blending-soft-light-ref.svg    | 22 ++++++++++++++++
 .../background-blending-soft-light.html       | 14 ++++++++++
 layout/reftests/css-blending/blend-modes.css  | 26 +++++++++++++++++++
 layout/reftests/css-blending/reftest.list     | 18 +++++++++++++
 34 files changed, 622 insertions(+)
 create mode 100644 layout/reftests/css-blending/background-blending-color-burn-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-color-burn.html
 create mode 100644 layout/reftests/css-blending/background-blending-color-dodge-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-color-dodge.html
 create mode 100644 layout/reftests/css-blending/background-blending-color-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-color.html
 create mode 100644 layout/reftests/css-blending/background-blending-darken-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-darken.html
 create mode 100644 layout/reftests/css-blending/background-blending-difference-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-difference.html
 create mode 100644 layout/reftests/css-blending/background-blending-exclusion-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-exclusion.html
 create mode 100644 layout/reftests/css-blending/background-blending-hard-light-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-hard-light.html
 create mode 100644 layout/reftests/css-blending/background-blending-hue-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-hue.html
 create mode 100644 layout/reftests/css-blending/background-blending-lighten-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-lighten.html
 create mode 100644 layout/reftests/css-blending/background-blending-luminosity-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-luminosity.html
 create mode 100644 layout/reftests/css-blending/background-blending-multiply-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-multiply.html
 create mode 100644 layout/reftests/css-blending/background-blending-normal-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-normal.html
 create mode 100644 layout/reftests/css-blending/background-blending-overlay-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-overlay.html
 create mode 100644 layout/reftests/css-blending/background-blending-saturation-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-saturation.html
 create mode 100644 layout/reftests/css-blending/background-blending-screen-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-screen.html
 create mode 100644 layout/reftests/css-blending/background-blending-soft-light-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-soft-light.html
 create mode 100644 layout/reftests/css-blending/blend-modes.css

diff --git a/layout/reftests/css-blending/background-blending-color-burn-ref.svg b/layout/reftests/css-blending/background-blending-color-burn-ref.svg
new file mode 100644
index 00000000000..48191f349e5
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-color-burn-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-color-burn.html b/layout/reftests/css-blending/background-blending-color-burn.html
new file mode 100644
index 00000000000..b6307608dc7
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-color-burn.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: color-burn;
+}
+</style>
+
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-color-dodge-ref.svg b/layout/reftests/css-blending/background-blending-color-dodge-ref.svg
new file mode 100644
index 00000000000..724a4e184bc
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-color-dodge-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(255,127,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(127,255,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(253,253,0,1)"></rect>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-color-dodge.html b/layout/reftests/css-blending/background-blending-color-dodge.html
new file mode 100644
index 00000000000..51efd478f00
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-color-dodge.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: color-dodge;
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-color-ref.svg b/layout/reftests/css-blending/background-blending-color-ref.svg
new file mode 100644
index 00000000000..29360156175
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-color-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,105,105,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(93,0,0,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(255,52,52,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(0,131,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,48,0,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(0,192,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(55,55,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(137,137,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(95,95,255,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(86,86,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(164,164,37,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(31,31,0,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-color.html b/layout/reftests/css-blending/background-blending-color.html
new file mode 100644
index 00000000000..6e00e094f1c
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-color.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: color;
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-darken-ref.svg b/layout/reftests/css-blending/background-blending-darken-ref.svg
new file mode 100644
index 00000000000..d4d16a54bef
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-darken-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg> 
\ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-darken.html b/layout/reftests/css-blending/background-blending-darken.html
new file mode 100644
index 00000000000..a4286d16724
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-darken.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: darken;
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-difference-ref.svg b/layout/reftests/css-blending/background-blending-difference-ref.svg
new file mode 100644
index 00000000000..c04c51e0aba
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-difference-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(128,127,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(127,128,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(128,127,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(127,128,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-difference.html b/layout/reftests/css-blending/background-blending-difference.html
new file mode 100644
index 00000000000..647d5d8cbea
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-difference.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: difference;
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-exclusion-ref.svg b/layout/reftests/css-blending/background-blending-exclusion-ref.svg
new file mode 100644
index 00000000000..b4edd89076a
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-exclusion-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(128,127,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(127,128,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(128,127,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(127,128,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-exclusion.html b/layout/reftests/css-blending/background-blending-exclusion.html
new file mode 100644
index 00000000000..f1a9f81e1a9
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-exclusion.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: exclusion;
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-hard-light-ref.svg b/layout/reftests/css-blending/background-blending-hard-light-ref.svg
new file mode 100644
index 00000000000..21afb50c38f
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-hard-light-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(254,0,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(0,254,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-hard-light.html b/layout/reftests/css-blending/background-blending-hard-light.html
new file mode 100644
index 00000000000..61ac1533bac
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-hard-light.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: hard-light;
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-hue-ref.svg b/layout/reftests/css-blending/background-blending-hue-ref.svg
new file mode 100644
index 00000000000..907064b5434
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-hue-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,105,105,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(93,0,0,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(202,75,75,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(0,131,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,48,0,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(38,165,38,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(55,55,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(137,137,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(99,99,226,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(87,87,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(169,169,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(31,31,0,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-hue.html b/layout/reftests/css-blending/background-blending-hue.html
new file mode 100644
index 00000000000..8ae44e5d2ac
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-hue.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: hue;
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-lighten-ref.svg b/layout/reftests/css-blending/background-blending-lighten-ref.svg
new file mode 100644
index 00000000000..4ec1bf08a06
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-lighten-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(255,127,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(127,255,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(255,127,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(127,255,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-lighten.html b/layout/reftests/css-blending/background-blending-lighten.html
new file mode 100644
index 00000000000..cd69c4c6093
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-lighten.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: lighten;
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-luminosity-ref.svg b/layout/reftests/css-blending/background-blending-luminosity-ref.svg
new file mode 100644
index 00000000000..8dc3c2247fd
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-luminosity-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(0,131,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(55,55,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(86,86,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,105,105,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(137,137,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(164,164,37,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(93,0,0,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,48,0,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(31,31,0,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(255,52,52,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(0,192,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(95,95,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-luminosity.html b/layout/reftests/css-blending/background-blending-luminosity.html
new file mode 100644
index 00000000000..4c530c91327
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-luminosity.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: luminosity;
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-multiply-ref.svg b/layout/reftests/css-blending/background-blending-multiply-ref.svg
new file mode 100644
index 00000000000..0addf25093c
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-multiply-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(63,63,0,1)"></rect>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-multiply.html b/layout/reftests/css-blending/background-blending-multiply.html
new file mode 100644
index 00000000000..2174ed5b448
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-multiply.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: multiply;
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-normal-ref.svg b/layout/reftests/css-blending/background-blending-normal-ref.svg
new file mode 100644
index 00000000000..8b86b744877
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-normal-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-normal.html b/layout/reftests/css-blending/background-blending-normal.html
new file mode 100644
index 00000000000..f860846c7b9
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-normal.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: normal;
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-overlay-ref.svg b/layout/reftests/css-blending/background-blending-overlay-ref.svg
new file mode 100644
index 00000000000..320697f7106
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-overlay-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(254,0,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(0,254,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(126,126,0,1)"></rect>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-overlay.html b/layout/reftests/css-blending/background-blending-overlay.html
new file mode 100644
index 00000000000..a5be65fa987
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-overlay.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: overlay;
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-saturation-ref.svg b/layout/reftests/css-blending/background-blending-saturation-ref.svg
new file mode 100644
index 00000000000..a8fb06a5a86
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-saturation-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(166,39,39,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(76,203,76,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(14,14,141,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-saturation.html b/layout/reftests/css-blending/background-blending-saturation.html
new file mode 100644
index 00000000000..ed5173346aa
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-saturation.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: saturation;
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-screen-ref.svg b/layout/reftests/css-blending/background-blending-screen-ref.svg
new file mode 100644
index 00000000000..d99af71dc90
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-screen-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(255,127,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(127,255,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(255,127,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(127,255,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(190,190,0,1)"></rect>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-screen.html b/layout/reftests/css-blending/background-blending-screen.html
new file mode 100644
index 00000000000..5f5fe0f56be
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-screen.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: screen;
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-soft-light-ref.svg b/layout/reftests/css-blending/background-blending-soft-light-ref.svg
new file mode 100644
index 00000000000..485314e389c
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-soft-light-ref.svg
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
+    <rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+    <rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+    <rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+    <rect x="120" y="0" width="40" height="40" fill="rgba(190,63,0,1)"></rect>
+    <rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+    <rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+    <rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+    <rect x="120" y="40" width="40" height="40" fill="rgba(64,190,0,1)"></rect>
+    <rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+    <rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+    <rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+    <rect x="120" y="80" width="40" height="40" fill="rgba(63,63,0,1)"></rect>
+    <rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+    <rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+    <rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+    <rect x="120" y="120" width="40" height="40" fill="rgba(126,126,0,1)"></rect>
+</svg>
diff --git a/layout/reftests/css-blending/background-blending-soft-light.html b/layout/reftests/css-blending/background-blending-soft-light.html
new file mode 100644
index 00000000000..13cf76fce41
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-soft-light.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<link rel="stylesheet" href="blend-modes.css" type="text/css" />
+
+<style>
+.blend {
+  background-blend-mode: soft-light;
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/blend-modes.css b/layout/reftests/css-blending/blend-modes.css
new file mode 100644
index 00000000000..9a827c7bd03
--- /dev/null
+++ b/layout/reftests/css-blending/blend-modes.css
@@ -0,0 +1,26 @@
+body {
+  margin: 0;
+}
+
+.reftest {
+  width: 160px;
+  height: 160px;
+  background-size:
+    160px 40px, 160px 40px, 160px 40px, 160px 40px,
+    40px 160px, 40px 160px, 40px 160px, 40px 160px;
+
+  background-position:
+    0px 0px, 0px 40px, 0px 80px, 0px 120px,
+    0px 0px, 40px 0px, 80px 0, 120px 0;
+
+
+  background-repeat: no-repeat;
+  background-image: url(as-image/red100x100.png),
+                    url(as-image/green100x100.png),
+                    url(as-image/blue100x100.png),
+                    url(as-image/brown100x100.png),
+                    url(as-image/red100x100.png),
+                    url(as-image/green100x100.png),
+                    url(as-image/blue100x100.png),
+                    url(as-image/brown100x100.png);
+}
\ No newline at end of file
diff --git a/layout/reftests/css-blending/reftest.list b/layout/reftests/css-blending/reftest.list
index 81b6f7719b7..b44b7b57cce 100644
--- a/layout/reftests/css-blending/reftest.list
+++ b/layout/reftests/css-blending/reftest.list
@@ -16,3 +16,21 @@ pref(layout.css.background-blend-mode.enabled,true) == background-blending-image
 pref(layout.css.background-blend-mode.enabled,true) == background-blending-isolation.html background-blending-isolation-ref.html
 pref(layout.css.background-blend-mode.enabled,true) == background-blending-list-repeat.html background-blending-list-repeat-ref.html
 pref(layout.css.background-blend-mode.enabled,true) == background-blending-multiple-images.html background-blending-multiple-images-ref.html
+
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-color-burn.html background-blending-color-burn-ref.svg
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-color-dodge.html background-blending-color-dodge-ref.svg
+# need to investigate why these tests are fuzzy - first suspect is a possible color space conversion on some platforms; same for mix-blend-mode tests
+fuzzy-if(azureQuartz,2,8000) fuzzy-if(azureSkia||gtk2Widget,2,9600) fuzzy-if(d2d,1,8000) pref(layout.css.background-blend-mode.enabled,true) == background-blending-color.html background-blending-color-ref.svg
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-darken.html background-blending-darken-ref.svg
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-difference.html background-blending-difference-ref.svg
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-exclusion.html background-blending-exclusion-ref.svg
+fuzzy-if(azureQuartz||d2d,1,1600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-hard-light.html background-blending-hard-light-ref.svg
+fuzzy-if(azureQuartz,2,8000) fuzzy-if(d2d,1,9600) fuzzy-if(azureSkia||gtk2Widget,2,9600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-hue.html background-blending-hue-ref.svg
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-lighten.html background-blending-lighten-ref.svg
+fuzzy-if(azureQuartz,2,8000) fuzzy-if(d2d,1,8000) fuzzy-if(azureSkia||gtk2Widget,2,9600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-luminosity.html background-blending-luminosity-ref.svg
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-multiply.html background-blending-multiply-ref.svg
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-normal.html background-blending-normal-ref.svg
+fuzzy-if(azureSkia||gtk2Widget,1,1600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-overlay.html background-blending-overlay-ref.svg
+fuzzy-if(d2d,1,1600) fuzzy-if(azureSkia||gtk2Widget,2,12800) fuzzy-if(OSX==10.6,1,1600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-saturation.html background-blending-saturation-ref.svg
+fuzzy-if(d2d||azureSkia||gtk2Widget,1,1600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-screen.html background-blending-screen-ref.svg
+fuzzy-if(azureQuartz,1,1600) fuzzy-if(d2d||azureSkia||gtk2Widget,10,4800) pref(layout.css.background-blend-mode.enabled,true) == background-blending-soft-light.html background-blending-soft-light-ref.svg