Bug 841601 - Add a second batch of tests for background-blending which tests each blend mode. r=roc
authorHoria Iosif Olaru <olaru@adobe.com>
Fri, 08 Nov 2013 10:09:08 -0500
changeset 154145 a712c9fec54f78453055f0e64998e6146781625a
parent 154144 cea821ee6e174e939e752b31e80a01738ed54774
child 154146 0fdbc3f4d34ee6df5da20f76e3c2fe81828e6b49
child 154180 4d7480679baaad6320aef4698300449f935a55ed
push id35991
push userryanvm@gmail.com
push dateFri, 08 Nov 2013 15:10:00 +0000
treeherdermozilla-inbound@a712c9fec54f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersroc
bugs841601
milestone28.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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.
layout/reftests/css-blending/background-blending-color-burn-ref.svg
layout/reftests/css-blending/background-blending-color-burn.html
layout/reftests/css-blending/background-blending-color-dodge-ref.svg
layout/reftests/css-blending/background-blending-color-dodge.html
layout/reftests/css-blending/background-blending-color-ref.svg
layout/reftests/css-blending/background-blending-color.html
layout/reftests/css-blending/background-blending-darken-ref.svg
layout/reftests/css-blending/background-blending-darken.html
layout/reftests/css-blending/background-blending-difference-ref.svg
layout/reftests/css-blending/background-blending-difference.html
layout/reftests/css-blending/background-blending-exclusion-ref.svg
layout/reftests/css-blending/background-blending-exclusion.html
layout/reftests/css-blending/background-blending-hard-light-ref.svg
layout/reftests/css-blending/background-blending-hard-light.html
layout/reftests/css-blending/background-blending-hue-ref.svg
layout/reftests/css-blending/background-blending-hue.html
layout/reftests/css-blending/background-blending-lighten-ref.svg
layout/reftests/css-blending/background-blending-lighten.html
layout/reftests/css-blending/background-blending-luminosity-ref.svg
layout/reftests/css-blending/background-blending-luminosity.html
layout/reftests/css-blending/background-blending-multiply-ref.svg
layout/reftests/css-blending/background-blending-multiply.html
layout/reftests/css-blending/background-blending-normal-ref.svg
layout/reftests/css-blending/background-blending-normal.html
layout/reftests/css-blending/background-blending-overlay-ref.svg
layout/reftests/css-blending/background-blending-overlay.html
layout/reftests/css-blending/background-blending-saturation-ref.svg
layout/reftests/css-blending/background-blending-saturation.html
layout/reftests/css-blending/background-blending-screen-ref.svg
layout/reftests/css-blending/background-blending-screen.html
layout/reftests/css-blending/background-blending-soft-light-ref.svg
layout/reftests/css-blending/background-blending-soft-light.html
layout/reftests/css-blending/blend-modes.css
layout/reftests/css-blending/reftest.list
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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
--- a/layout/reftests/css-blending/reftest.list
+++ b/layout/reftests/css-blending/reftest.list
@@ -11,8 +11,26 @@ fuzzy-if(azureSkiaGL,2,7174) fuzzy-if(az
 fuzzy-if(azureQuartz,2,10000) fuzzy-if(azureSkia||d2d||gtk2Widget,1,10000) pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-color-jpg.html background-blending-image-color-ref.html
 pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-color-png.html background-blending-image-color-ref.html
 pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-color-svg.html background-blending-image-color-ref.html
 fuzzy-if(azureSkiaGL,2,7174) fuzzy-if(azureQuartz,2,7174) pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-gradient.html background-blending-gradient-color-ref.html
 pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-image.html background-blending-image-color-ref.html
 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