summaryrefslogtreecommitdiffstats
path: root/layout/reftests/css-blending
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/css-blending
parentInitial commit. (diff)
downloadfirefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/css-blending')
-rw-r--r--layout/reftests/css-blending/as-image/black100x100.pngbin0 -> 15438 bytes
-rw-r--r--layout/reftests/css-blending/as-image/blue100x100.pngbin0 -> 47176 bytes
-rw-r--r--layout/reftests/css-blending/as-image/brown100x100.pngbin0 -> 47836 bytes
-rw-r--r--layout/reftests/css-blending/as-image/green100x100.jpgbin0 -> 3595 bytes
-rw-r--r--layout/reftests/css-blending/as-image/green100x100.pngbin0 -> 47813 bytes
-rw-r--r--layout/reftests/css-blending/as-image/green100x100_alpha.pngbin0 -> 47847 bytes
-rw-r--r--layout/reftests/css-blending/as-image/green_square.svg3
-rw-r--r--layout/reftests/css-blending/as-image/red100x100.pngbin0 -> 47519 bytes
-rw-r--r--layout/reftests/css-blending/as-image/red_green.gifbin0 -> 317 bytes
-rw-r--r--layout/reftests/css-blending/as-image/white_square.svg3
-rw-r--r--layout/reftests/css-blending/background-blend-mode-body-fixed-ref.html11
-rw-r--r--layout/reftests/css-blending/background-blend-mode-body-fixed.html18
-rw-r--r--layout/reftests/css-blending/background-blend-mode-body-image-ref.html8
-rw-r--r--layout/reftests/css-blending/background-blend-mode-body-image.html10
-rw-r--r--layout/reftests/css-blending/background-blend-mode-body-transparent-image-ref.html8
-rw-r--r--layout/reftests/css-blending/background-blend-mode-body-transparent-image.html9
-rw-r--r--layout/reftests/css-blending/background-blending-alpha-ref.html62
-rw-r--r--layout/reftests/css-blending/background-blending-alpha.html22
-rw-r--r--layout/reftests/css-blending/background-blending-background-attachement-fixed-ref.html19
-rw-r--r--layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll-ref.html23
-rw-r--r--layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll.html40
-rw-r--r--layout/reftests/css-blending/background-blending-background-attachement-fixed.html20
-rw-r--r--layout/reftests/css-blending/background-blending-background-clip-content-box-ref.html19
-rw-r--r--layout/reftests/css-blending/background-blending-background-clip-content-box.html20
-rw-r--r--layout/reftests/css-blending/background-blending-background-clip-padding-box-ref.html21
-rw-r--r--layout/reftests/css-blending/background-blending-background-clip-padding-box.html22
-rw-r--r--layout/reftests/css-blending/background-blending-background-origin-border-box.html20
-rw-r--r--layout/reftests/css-blending/background-blending-background-origin-content-box.html21
-rw-r--r--layout/reftests/css-blending/background-blending-background-origin-ref.html19
-rw-r--r--layout/reftests/css-blending/background-blending-background-position-percentage-ref.html19
-rw-r--r--layout/reftests/css-blending/background-blending-background-position-percentage.html20
-rw-r--r--layout/reftests/css-blending/background-blending-background-repeat-no-repeat-ref.html19
-rw-r--r--layout/reftests/css-blending/background-blending-background-repeat-no-repeat.html21
-rw-r--r--layout/reftests/css-blending/background-blending-background-size-contain.html20
-rw-r--r--layout/reftests/css-blending/background-blending-background-size-cover.html20
-rw-r--r--layout/reftests/css-blending/background-blending-background-size-percentage.html20
-rw-r--r--layout/reftests/css-blending/background-blending-background-size-pixels.html20
-rw-r--r--layout/reftests/css-blending/background-blending-background-size-ref.html18
-rw-r--r--layout/reftests/css-blending/background-blending-color-burn-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-color-burn.html16
-rw-r--r--layout/reftests/css-blending/background-blending-color-dodge-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-color-dodge.html14
-rw-r--r--layout/reftests/css-blending/background-blending-color-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-color.html14
-rw-r--r--layout/reftests/css-blending/background-blending-darken-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-darken.html14
-rw-r--r--layout/reftests/css-blending/background-blending-difference-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-difference.html14
-rw-r--r--layout/reftests/css-blending/background-blending-exclusion-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-exclusion.html14
-rw-r--r--layout/reftests/css-blending/background-blending-gradient-color-ref.html20
-rw-r--r--layout/reftests/css-blending/background-blending-gradient-color.html22
-rw-r--r--layout/reftests/css-blending/background-blending-gradient-gradient-ref.html20
-rw-r--r--layout/reftests/css-blending/background-blending-gradient-gradient.html22
-rw-r--r--layout/reftests/css-blending/background-blending-gradient-image-ref.html20
-rw-r--r--layout/reftests/css-blending/background-blending-gradient-image.html21
-rw-r--r--layout/reftests/css-blending/background-blending-hard-light-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-hard-light.html14
-rw-r--r--layout/reftests/css-blending/background-blending-hue-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-hue.html14
-rw-r--r--layout/reftests/css-blending/background-blending-image-color-959674-ref.html15
-rw-r--r--layout/reftests/css-blending/background-blending-image-color-959674.html26
-rw-r--r--layout/reftests/css-blending/background-blending-image-color-gif-ref.html14
-rw-r--r--layout/reftests/css-blending/background-blending-image-color-gif.html29
-rw-r--r--layout/reftests/css-blending/background-blending-image-color-jpg.html26
-rw-r--r--layout/reftests/css-blending/background-blending-image-color-png.html25
-rw-r--r--layout/reftests/css-blending/background-blending-image-color-ref.html21
-rw-r--r--layout/reftests/css-blending/background-blending-image-color-svg-as-data-uri.html26
-rw-r--r--layout/reftests/css-blending/background-blending-image-color-svg.html25
-rw-r--r--layout/reftests/css-blending/background-blending-image-color-transform3d.html28
-rw-r--r--layout/reftests/css-blending/background-blending-image-gradient.html21
-rw-r--r--layout/reftests/css-blending/background-blending-image-image-ref.html20
-rw-r--r--layout/reftests/css-blending/background-blending-image-image.html22
-rw-r--r--layout/reftests/css-blending/background-blending-isolation-parent-child-color.html29
-rw-r--r--layout/reftests/css-blending/background-blending-isolation-parent-child-image.html29
-rw-r--r--layout/reftests/css-blending/background-blending-isolation-parent-child-ref.html19
-rw-r--r--layout/reftests/css-blending/background-blending-isolation-ref.html27
-rw-r--r--layout/reftests/css-blending/background-blending-isolation.html31
-rw-r--r--layout/reftests/css-blending/background-blending-lighten-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-lighten.html14
-rw-r--r--layout/reftests/css-blending/background-blending-list-repeat-ref.html33
-rw-r--r--layout/reftests/css-blending/background-blending-list-repeat.html24
-rw-r--r--layout/reftests/css-blending/background-blending-luminosity-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-luminosity.html14
-rw-r--r--layout/reftests/css-blending/background-blending-moz-element-ref.html22
-rw-r--r--layout/reftests/css-blending/background-blending-moz-element.html29
-rw-r--r--layout/reftests/css-blending/background-blending-multiple-images-ref.html33
-rw-r--r--layout/reftests/css-blending/background-blending-multiple-images.html24
-rw-r--r--layout/reftests/css-blending/background-blending-multiply-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-multiply.html14
-rw-r--r--layout/reftests/css-blending/background-blending-normal-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-normal.html14
-rw-r--r--layout/reftests/css-blending/background-blending-overlay-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-overlay.html14
-rw-r--r--layout/reftests/css-blending/background-blending-saturation-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-saturation.html14
-rw-r--r--layout/reftests/css-blending/background-blending-screen-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-screen.html14
-rw-r--r--layout/reftests/css-blending/background-blending-soft-light-ref.svg22
-rw-r--r--layout/reftests/css-blending/background-blending-soft-light.html14
-rw-r--r--layout/reftests/css-blending/blend-canvas-ref.html28
-rw-r--r--layout/reftests/css-blending/blend-canvas.html29
-rw-r--r--layout/reftests/css-blending/blend-constant-background-color-ref.html22
-rw-r--r--layout/reftests/css-blending/blend-constant-background-color.html23
-rw-r--r--layout/reftests/css-blending/blend-difference-stacking-ref.html30
-rw-r--r--layout/reftests/css-blending/blend-difference-stacking.html30
-rw-r--r--layout/reftests/css-blending/blend-gradient-background-color-ref.html22
-rw-r--r--layout/reftests/css-blending/blend-gradient-background-color.html23
-rw-r--r--layout/reftests/css-blending/blend-image-ref.html20
-rw-r--r--layout/reftests/css-blending/blend-image.html21
-rw-r--r--layout/reftests/css-blending/blend-isolation-ref.html15
-rw-r--r--layout/reftests/css-blending/blend-isolation.html28
-rw-r--r--layout/reftests/css-blending/blend-modes.css26
-rw-r--r--layout/reftests/css-blending/bug1281593-ref.html40
-rw-r--r--layout/reftests/css-blending/bug1281593.html40
-rw-r--r--layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff-ref.html57
-rw-r--r--layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff.html51
-rw-r--r--layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode-ref.html49
-rw-r--r--layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode.html50
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-952051-ref.html32
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-952051.html37
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-and-filter-ref.html41
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-and-filter-ref.svg14
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-and-filter.html37
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-and-filter.svg21
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity-ref.html40
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity.html45
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-culling-1207041-ref.html22
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-culling-1207041.html23
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271-ref.html21
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271.html22
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-nested-976533-ref.html47
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-nested-976533.html45
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-soft-light-ref.html21
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-soft-light.html25
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-transformed-ref.html26
-rw-r--r--layout/reftests/css-blending/mix-blend-mode-transformed.html30
-rw-r--r--layout/reftests/css-blending/reftest.list103
138 files changed, 3132 insertions, 0 deletions
diff --git a/layout/reftests/css-blending/as-image/black100x100.png b/layout/reftests/css-blending/as-image/black100x100.png
new file mode 100644
index 0000000000..061e686c15
--- /dev/null
+++ b/layout/reftests/css-blending/as-image/black100x100.png
Binary files differ
diff --git a/layout/reftests/css-blending/as-image/blue100x100.png b/layout/reftests/css-blending/as-image/blue100x100.png
new file mode 100644
index 0000000000..79f972cd5f
--- /dev/null
+++ b/layout/reftests/css-blending/as-image/blue100x100.png
Binary files differ
diff --git a/layout/reftests/css-blending/as-image/brown100x100.png b/layout/reftests/css-blending/as-image/brown100x100.png
new file mode 100644
index 0000000000..f1a2d6d849
--- /dev/null
+++ b/layout/reftests/css-blending/as-image/brown100x100.png
Binary files differ
diff --git a/layout/reftests/css-blending/as-image/green100x100.jpg b/layout/reftests/css-blending/as-image/green100x100.jpg
new file mode 100644
index 0000000000..5b920f7c06
--- /dev/null
+++ b/layout/reftests/css-blending/as-image/green100x100.jpg
Binary files differ
diff --git a/layout/reftests/css-blending/as-image/green100x100.png b/layout/reftests/css-blending/as-image/green100x100.png
new file mode 100644
index 0000000000..0eea75c96a
--- /dev/null
+++ b/layout/reftests/css-blending/as-image/green100x100.png
Binary files differ
diff --git a/layout/reftests/css-blending/as-image/green100x100_alpha.png b/layout/reftests/css-blending/as-image/green100x100_alpha.png
new file mode 100644
index 0000000000..1402d81f45
--- /dev/null
+++ b/layout/reftests/css-blending/as-image/green100x100_alpha.png
Binary files differ
diff --git a/layout/reftests/css-blending/as-image/green_square.svg b/layout/reftests/css-blending/as-image/green_square.svg
new file mode 100644
index 0000000000..7cb1675e38
--- /dev/null
+++ b/layout/reftests/css-blending/as-image/green_square.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
+ <rect width="100%" height="100%" fill="#00FF00"/>
+</svg>
diff --git a/layout/reftests/css-blending/as-image/red100x100.png b/layout/reftests/css-blending/as-image/red100x100.png
new file mode 100644
index 0000000000..adb1bed7f0
--- /dev/null
+++ b/layout/reftests/css-blending/as-image/red100x100.png
Binary files differ
diff --git a/layout/reftests/css-blending/as-image/red_green.gif b/layout/reftests/css-blending/as-image/red_green.gif
new file mode 100644
index 0000000000..c86b56d412
--- /dev/null
+++ b/layout/reftests/css-blending/as-image/red_green.gif
Binary files differ
diff --git a/layout/reftests/css-blending/as-image/white_square.svg b/layout/reftests/css-blending/as-image/white_square.svg
new file mode 100644
index 0000000000..f9b0367c79
--- /dev/null
+++ b/layout/reftests/css-blending/as-image/white_square.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
+ <rect width="100%" height="100%" fill="#FFFFFF"/>
+</svg>
diff --git a/layout/reftests/css-blending/background-blend-mode-body-fixed-ref.html b/layout/reftests/css-blending/background-blend-mode-body-fixed-ref.html
new file mode 100644
index 0000000000..b668ceba78
--- /dev/null
+++ b/layout/reftests/css-blending/background-blend-mode-body-fixed-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Reference for: Blend a background image and a background color on the root, specifying background-attachment: fixed</title>
+
+<style>
+
+html {
+ background: #777777;
+}
+
+</style>
diff --git a/layout/reftests/css-blending/background-blend-mode-body-fixed.html b/layout/reftests/css-blending/background-blend-mode-body-fixed.html
new file mode 100644
index 0000000000..facbbc0ecb
--- /dev/null
+++ b/layout/reftests/css-blending/background-blend-mode-body-fixed.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Blend a background image and a background color on the root, specifying background-attachment: fixed</title>
+
+<style>
+
+html {
+ scrollbar-width: none;
+}
+
+body {
+ background: url('as-image/white_square.svg'), #777777;
+ background-attachment: fixed ;
+ height: 20000px;
+ background-blend-mode: multiply;
+}
+
+</style>
diff --git a/layout/reftests/css-blending/background-blend-mode-body-image-ref.html b/layout/reftests/css-blending/background-blend-mode-body-image-ref.html
new file mode 100644
index 0000000000..e51dcd4392
--- /dev/null
+++ b/layout/reftests/css-blending/background-blend-mode-body-image-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color: green;
+}
+</style>
+<p>This test will check that a background-image set on body does not blend with the browser's white background color.<br/>
+The test passes if the page has a green background.</p>
diff --git a/layout/reftests/css-blending/background-blend-mode-body-image.html b/layout/reftests/css-blending/background-blend-mode-body-image.html
new file mode 100644
index 0000000000..9447e5b2d3
--- /dev/null
+++ b/layout/reftests/css-blending/background-blend-mode-body-image.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-image: linear-gradient(green, green);
+ background-color: transparent;
+ background-blend-mode: screen;
+}
+</style>
+<p>This test will check that a background-image set on body does not blend with the browser's white background color.<br/>
+The test passes if the page has a green background.</p>
diff --git a/layout/reftests/css-blending/background-blend-mode-body-transparent-image-ref.html b/layout/reftests/css-blending/background-blend-mode-body-transparent-image-ref.html
new file mode 100644
index 0000000000..14514171b5
--- /dev/null
+++ b/layout/reftests/css-blending/background-blend-mode-body-transparent-image-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-image: linear-gradient(transparent, transparent 10%, green 10%, green 90%, transparent 90%, transparent);
+}
+</style>
+<p>This test will check that a transparent background-image set on body does not blend with the browser's white background color.<br/>
+The test passes if the page has a green background with white horizontal lines.</p>
diff --git a/layout/reftests/css-blending/background-blend-mode-body-transparent-image.html b/layout/reftests/css-blending/background-blend-mode-body-transparent-image.html
new file mode 100644
index 0000000000..1947e9eafd
--- /dev/null
+++ b/layout/reftests/css-blending/background-blend-mode-body-transparent-image.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-image: linear-gradient(transparent, transparent 10%, green 10%, green 90%, transparent 90%, transparent);
+ background-blend-mode: screen;
+}
+</style>
+<p>This test will check that a transparent background-image set on body does not blend with the browser's white background color.<br/>
+The test passes if the page has a green background with white horizontal lines.</p>
diff --git a/layout/reftests/css-blending/background-blending-alpha-ref.html b/layout/reftests/css-blending/background-blending-alpha-ref.html
new file mode 100644
index 0000000000..6a7055938d
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-alpha-ref.html
@@ -0,0 +1,62 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ background-color: rgba(0, 255, 0, 0.5);
+}
+
+.child {
+ width: 100px;
+ height: 100px;
+ opacity: 0.5;
+ background-color: rgb(0, 127, 0);
+}
+
+.topleft {
+ float:left;
+
+ width: 100px;
+ height: 100px;
+
+ /*First blend black rect with green in place*/
+ /* Cs = (1 - αb) x Cs + αb x B(Cb, Cs)*/
+ /* B(Cb, Cs) = | Cb - Cs | = (0, 0, 0) */
+ /* 0.5 * (0, 255, 0) + 0.5 * (0, 0, 0) = (0, 127.5, 0)*/
+
+ /* Now, composite the resulting color with src-over; the alpha is the original alpha for the top layer
+ while the color is the blending result*/
+ /* co = αs x Fa x Cs + αb x Fb x Cb - this is premultiplied */
+ /* αo = αs + αb x (1 – αs) */
+ /* Source over: Fa = 1; Fb = 1 – αs */
+ /*co = 0.5 * 1 * (0, 127.5, 0) + 0.5 * 0.5 * (0, 255, 0) = (0, 63.5, 0) + 0.25 * (0, 255, 0) = (0, 127.5, 0)*/
+ /*ao = 0.5 + 0.5 * 0.5 = 0.75*/
+ /* Co = co/ao = (0, 127.5, 0) / 0.75*/
+
+ /* Now alpha composite on white background */
+ /*co = 0.75 * 1 * (0, 127.5, 0) / 0.75 + 1 * 0.25 * (255, 255, 255) = (0, 127.5, 0) + (63.75, 63.75, 63.75) = (63.75, 159, 63.75) = (64, 191, 64) */
+
+ background-color: rgb(64, 191, 64);
+}
+
+.topright {
+ float:left;
+ width: 100px;
+ height: 100px;
+}
+
+.bottom {
+ width:200px;
+ height: 100px;
+ clear:both;
+}
+
+</style>
+
+<div class="topleft"></div>
+<div class="reftest topright"></div>
+<div class="reftest bottom"></div>
+
+</html>
diff --git a/layout/reftests/css-blending/background-blending-alpha.html b/layout/reftests/css-blending/background-blending-alpha.html
new file mode 100644
index 0000000000..ba17205b8f
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-alpha.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-image: url(as-image/green100x100_alpha.png);
+ background-color: rgba(0, 255, 0, 0.5);
+ background-blend-mode: difference;
+}
+
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-background-attachement-fixed-ref.html b/layout/reftests/css-blending/background-blending-background-attachement-fixed-ref.html
new file mode 100644
index 0000000000..fded2192dd
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-attachement-fixed-ref.html
@@ -0,0 +1,19 @@
+<!-- Blend a background image and a background color specifying background-attachment: fixed -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: #777777;
+ background-attachment: fixed ;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll-ref.html b/layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll-ref.html
new file mode 100644
index 0000000000..2f5d424b7d
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll-ref.html
@@ -0,0 +1,23 @@
+<!-- Blend two background images having background-attachment: fixed and scroll respectively -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ width: 200px;
+ height: 200px;
+ background: url('as-image/black100x100.png'), url('as-image/green100x100.png');
+ background-size: 100px 100px, 200px 100px;
+ background-repeat: no-repeat;
+}
+
+body {
+ margin: 0px;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll.html b/layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll.html
new file mode 100644
index 0000000000..91a72aeeab
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll.html
@@ -0,0 +1,40 @@
+<!-- Blend two background images having background-attachment: fixed and scroll respectively -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+#parent {
+ width: 200px;
+ height: 200px;
+ overflow: hidden;
+}
+
+#child {
+ background: url('as-image/green100x100.png'), url('as-image/green100x100.png');
+ background-attachment: fixed, scroll;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: no-repeat no-repeat;
+ background-blend-mode: difference;
+
+ height: 400px;
+}
+
+body {
+ margin: 0px;
+}
+</style>
+<script>
+ function onLoad() {
+ var parent = document.getElementById("parent");
+ parent.scrollTop = 100;
+ }
+</script>
+</head>
+
+<body onload="onLoad()">
+ <div id="parent">
+ <div id="child">
+ </div>
+ </div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-attachement-fixed.html b/layout/reftests/css-blending/background-blending-background-attachement-fixed.html
new file mode 100644
index 0000000000..2439d9a238
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-attachement-fixed.html
@@ -0,0 +1,20 @@
+<!-- Blend a background image and a background color specifying background-attachment: fixed -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: url('as-image/white_square.svg'), #777777;
+ background-attachment: fixed ;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ background-blend-mode: multiply;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-clip-content-box-ref.html b/layout/reftests/css-blending/background-blending-background-clip-content-box-ref.html
new file mode 100644
index 0000000000..a860deb063
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-clip-content-box-ref.html
@@ -0,0 +1,19 @@
+<!-- Blend a background image and a background color specifying background-clip: content-box -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: #777777;
+ background-clip: content-box;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-clip-content-box.html b/layout/reftests/css-blending/background-blending-background-clip-content-box.html
new file mode 100644
index 0000000000..5793259e19
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-clip-content-box.html
@@ -0,0 +1,20 @@
+<!-- Blend a background image and a background color specifying background-clip: content-box -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: url('as-image/white_square.svg'), #777777;
+ background-clip: content-box;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ background-blend-mode: multiply;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-clip-padding-box-ref.html b/layout/reftests/css-blending/background-blending-background-clip-padding-box-ref.html
new file mode 100644
index 0000000000..da516d82d7
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-clip-padding-box-ref.html
@@ -0,0 +1,21 @@
+<!-- Blend a background image and a background color specifying background-clip: padding-box -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ padding: 8.5px;
+ margin: 0 0 9px;
+ background: #777777;
+ background-clip: padding-box;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-clip-padding-box.html b/layout/reftests/css-blending/background-blending-background-clip-padding-box.html
new file mode 100644
index 0000000000..95c20bdd40
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-clip-padding-box.html
@@ -0,0 +1,22 @@
+<!-- Blend a background image and a background color specifying background-clip: padding-box -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ padding: 8.5px;
+ margin: 0 0 9px;
+ background: url('as-image/white_square.svg'), #777777;
+ background-clip: padding-box;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ background-blend-mode: multiply;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-origin-border-box.html b/layout/reftests/css-blending/background-blending-background-origin-border-box.html
new file mode 100644
index 0000000000..9c732e2a01
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-origin-border-box.html
@@ -0,0 +1,20 @@
+<!-- Blend a background image and a background color specifying background-origin: border-box -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: url('as-image/white_square.svg'), #777777;
+ background-origin: border-box;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ background-blend-mode: multiply;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-origin-content-box.html b/layout/reftests/css-blending/background-blending-background-origin-content-box.html
new file mode 100644
index 0000000000..ccb6fd235c
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-origin-content-box.html
@@ -0,0 +1,21 @@
+<!-- Blend a background image and a background color specifying background-origin: content-box -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: url('as-image/white_square.svg'), #777777;
+ background-origin: content-box;
+ width: 180px;
+ height: 180px;
+ margin: 10px;
+ padding: 10px;
+ background-blend-mode: multiply
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-origin-ref.html b/layout/reftests/css-blending/background-blending-background-origin-ref.html
new file mode 100644
index 0000000000..55bdb862ec
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-origin-ref.html
@@ -0,0 +1,19 @@
+<!-- Blend a background image and a background color specifying background-origin -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: #777777;
+ background-origin: border-box;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-position-percentage-ref.html b/layout/reftests/css-blending/background-blending-background-position-percentage-ref.html
new file mode 100644
index 0000000000..af22521f94
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-position-percentage-ref.html
@@ -0,0 +1,19 @@
+<!-- Blend a background image and a background color specifying background-position in percentage, such as 50% 50% -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background-color: #777777;
+ background-position: 10% 10%;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-position-percentage.html b/layout/reftests/css-blending/background-blending-background-position-percentage.html
new file mode 100644
index 0000000000..2b9de1cb5f
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-position-percentage.html
@@ -0,0 +1,20 @@
+<!-- Blend a background image and a background color specifying background-position in percentage, such as 50% 50% -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: url('as-image/white_square.svg'), #777777;
+ background-position: 10% 10%;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ background-blend-mode: multiply;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-repeat-no-repeat-ref.html b/layout/reftests/css-blending/background-blending-background-repeat-no-repeat-ref.html
new file mode 100644
index 0000000000..686ce93b93
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-repeat-no-repeat-ref.html
@@ -0,0 +1,19 @@
+<!-- Blend a background image and a background color specifying background-repeat: no-repeat -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background-color: #777777;
+ background-repeat: no-repeat;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-repeat-no-repeat.html b/layout/reftests/css-blending/background-blending-background-repeat-no-repeat.html
new file mode 100644
index 0000000000..3b66f50e2a
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-repeat-no-repeat.html
@@ -0,0 +1,21 @@
+<!-- Blend a background image and a background color specifying background-repeat: no-repeat -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background-image: url('as-image/white_square.svg');
+ background-color: #777777;
+ background-repeat: no-repeat;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ background-blend-mode: multiply;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-size-contain.html b/layout/reftests/css-blending/background-blending-background-size-contain.html
new file mode 100644
index 0000000000..417f6d984f
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-size-contain.html
@@ -0,0 +1,20 @@
+<!-- Blend a background image and a background color specifying background-size: contain -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: url('as-image/white_square.svg'), #777777;
+ background-size: contain;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ background-blend-mode: multiply;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-size-cover.html b/layout/reftests/css-blending/background-blending-background-size-cover.html
new file mode 100644
index 0000000000..0a942d901b
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-size-cover.html
@@ -0,0 +1,20 @@
+<!-- Blend a background image and a background color specifying background-size: cover -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: url('as-image/white_square.svg'), #777777;
+ background-size: cover;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ background-blend-mode: multiply;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-size-percentage.html b/layout/reftests/css-blending/background-blending-background-size-percentage.html
new file mode 100644
index 0000000000..d8aebef845
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-size-percentage.html
@@ -0,0 +1,20 @@
+<!-- Blend a background image and a background color specifying background-size in percentage -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: url('as-image/white_square.svg'), #777777;
+ background-size: 50% 50%;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ background-blend-mode: multiply;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-size-pixels.html b/layout/reftests/css-blending/background-blending-background-size-pixels.html
new file mode 100644
index 0000000000..73b5c28a4c
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-size-pixels.html
@@ -0,0 +1,20 @@
+<!-- Blend a background image and a background color specifying background-size in pixels -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: url('as-image/white_square.svg'), #777777;
+ background-size: 100px 100px;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ background-blend-mode: multiply;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-background-size-ref.html b/layout/reftests/css-blending/background-blending-background-size-ref.html
new file mode 100644
index 0000000000..fa512a6ce2
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-background-size-ref.html
@@ -0,0 +1,18 @@
+<!-- Blend a background image and a background color specifying background-size -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: #777777;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html> \ No newline at end of file
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 0000000000..48191f349e
--- /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 0000000000..b6307608dc
--- /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 0000000000..724a4e184b
--- /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 0000000000..51efd478f0
--- /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 0000000000..2936015617
--- /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 0000000000..6e00e094f1
--- /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 0000000000..d4d16a54be
--- /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 0000000000..a4286d1672
--- /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 0000000000..c04c51e0ab
--- /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 0000000000..647d5d8cbe
--- /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 0000000000..b4edd89076
--- /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 0000000000..f1a9f81e1a
--- /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-gradient-color-ref.html b/layout/reftests/css-blending/background-blending-gradient-color-ref.html
new file mode 100644
index 0000000000..09dd590607
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-gradient-color-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-image: linear-gradient(rgb(0,255,255), rgb(255,255,0));
+ background-color: rgb(0,255,0);
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-gradient-color.html b/layout/reftests/css-blending/background-blending-gradient-color.html
new file mode 100644
index 0000000000..b5df02bca9
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-gradient-color.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-image: linear-gradient(rgb(0,0,255), rgb(255,0,0));
+ background-color: rgb(0,255,0);
+ background-blend-mode: difference;
+}
+
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-gradient-gradient-ref.html b/layout/reftests/css-blending/background-blending-gradient-gradient-ref.html
new file mode 100644
index 0000000000..6dd4b18397
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-gradient-gradient-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-image: url(as-image/black100x100.png),
+ linear-gradient(rgb(0,0,255), rgb(255,0,0), rgb(0, 0, 255));
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-gradient-gradient.html b/layout/reftests/css-blending/background-blending-gradient-gradient.html
new file mode 100644
index 0000000000..f8d9dc6d76
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-gradient-gradient.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-image: linear-gradient(rgb(0,0,255), rgb(255,0,0)),
+ linear-gradient(rgb(0,0,255), rgb(255,0,0), rgb(0,0,255));
+ background-blend-mode: difference;
+}
+
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-gradient-image-ref.html b/layout/reftests/css-blending/background-blending-gradient-image-ref.html
new file mode 100644
index 0000000000..09dd590607
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-gradient-image-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-image: linear-gradient(rgb(0,255,255), rgb(255,255,0));
+ background-color: rgb(0,255,0);
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-gradient-image.html b/layout/reftests/css-blending/background-blending-gradient-image.html
new file mode 100644
index 0000000000..0ffe44d829
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-gradient-image.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-image: linear-gradient(rgb(0,0,255), rgb(255,0,0)), url(as-image/green_square.svg);
+ background-blend-mode: difference;
+}
+
+</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 0000000000..21afb50c38
--- /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 0000000000..61ac1533ba
--- /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 0000000000..907064b543
--- /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 0000000000..8ae44e5d2a
--- /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-image-color-959674-ref.html b/layout/reftests/css-blending/background-blending-image-color-959674-ref.html
new file mode 100644
index 0000000000..319e455d21
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-image-color-959674-ref.html
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-color: rgb(0,0,0);
+}
+
+</style>
+<div class="reftest"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-image-color-959674.html b/layout/reftests/css-blending/background-blending-image-color-959674.html
new file mode 100644
index 0000000000..21876a6478
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-image-color-959674.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: repeat; /* set this explicitly for the test clarity */
+}
+
+.blend {
+ background-color: rgb(0,255,0);
+ background-blend-mode: difference;
+}
+
+.jpg {
+ background-image: url(as-image/green100x100.jpg);
+}
+
+</style>
+<div class="reftest blend jpg"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-image-color-gif-ref.html b/layout/reftests/css-blending/background-blending-image-color-gif-ref.html
new file mode 100644
index 0000000000..ed0cad8ea8
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-image-color-gif-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+<style>
+div {
+ width: 100px;
+ height: 100px;
+ background-color: rgb(0,255,0);
+}
+
+</style>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-image-color-gif.html b/layout/reftests/css-blending/background-blending-image-color-gif.html
new file mode 100644
index 0000000000..c68d617322
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-image-color-gif.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<style>
+.reftest {
+ width: 100px;
+ height: 100px;
+ background-size: 100px 100px, 100px 100px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-color: rgb(255,255,0);
+ background-blend-mode: difference;
+}
+
+.gif {
+ background-image: url('as-image/red_green.gif');
+}
+
+</style>
+
+<body>
+ <div class="reftest blend gif"></div>
+</body>
+</html>
+
+
+
+
diff --git a/layout/reftests/css-blending/background-blending-image-color-jpg.html b/layout/reftests/css-blending/background-blending-image-color-jpg.html
new file mode 100644
index 0000000000..2832caeb53
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-image-color-jpg.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-color: rgb(0,255,0);
+ background-blend-mode: difference;
+}
+
+.jpg {
+ background-image: url(as-image/green100x100.jpg);
+}
+
+</style>
+<div class="reftest blend jpg"></div>
+</html>
+
diff --git a/layout/reftests/css-blending/background-blending-image-color-png.html b/layout/reftests/css-blending/background-blending-image-color-png.html
new file mode 100644
index 0000000000..6ded901a31
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-image-color-png.html
@@ -0,0 +1,25 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-color: rgb(0,255,0);
+ background-blend-mode: difference;
+}
+
+.png {
+ background-image: url(as-image/green100x100.png);
+}
+
+</style>
+<div class="reftest blend png"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-image-color-ref.html b/layout/reftests/css-blending/background-blending-image-color-ref.html
new file mode 100644
index 0000000000..d9ebe355ea
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-image-color-ref.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-image: url(as-image/black100x100.png);
+ background-color: rgb(0,255,0);
+}
+
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-image-color-svg-as-data-uri.html b/layout/reftests/css-blending/background-blending-image-color-svg-as-data-uri.html
new file mode 100644
index 0000000000..6f2ac24a34
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-image-color-svg-as-data-uri.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE HTML>
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-color: rgb(0,255,0);
+ background-blend-mode: difference;
+}
+
+.svg {
+ background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20version%3D%271.1%27%20viewBox%3D%270%200%20100%20100%27%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27%2300FF00%27%2F%3E%3C%2Fsvg%3E");
+}
+
+</style>
+<div class="reftest blend svg"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-image-color-svg.html b/layout/reftests/css-blending/background-blending-image-color-svg.html
new file mode 100644
index 0000000000..8a3f05d463
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-image-color-svg.html
@@ -0,0 +1,25 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-color: rgb(0,255,0);
+ background-blend-mode: difference;
+}
+
+.svg {
+ background-image: url(as-image/green_square.svg);
+}
+
+</style>
+<div class="reftest blend svg"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-image-color-transform3d.html b/layout/reftests/css-blending/background-blending-image-color-transform3d.html
new file mode 100644
index 0000000000..9980418d5c
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-image-color-transform3d.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE HTML>
+<html>
+<style>
+.reftest {
+ width: 400px;
+ height: 200px;
+ background-size: 200px 100px, 400px 200px;
+ background-repeat: no-repeat;
+ transform-origin: 0 0;
+ transform: rotateY(60deg);
+}
+
+.blend {
+ background-color: rgb(0,255,0);
+ background-blend-mode: difference;
+}
+
+.png {
+ background-image: url(as-image/green100x100.png);
+}
+
+</style>
+<div class="reftest blend png"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-image-gradient.html b/layout/reftests/css-blending/background-blending-image-gradient.html
new file mode 100644
index 0000000000..6b9e48d461
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-image-gradient.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 200px 200px, 100px 100px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-image: url(as-image/green_square.svg), linear-gradient(rgb(0,0,255), rgb(255,0,0));
+ background-blend-mode: difference;
+}
+
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-image-image-ref.html b/layout/reftests/css-blending/background-blending-image-image-ref.html
new file mode 100644
index 0000000000..b123024a78
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-image-image-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-image: url(as-image/black100x100.png);
+ background-color: rgb(0, 255, 0);
+}
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-image-image.html b/layout/reftests/css-blending/background-blending-image-image.html
new file mode 100644
index 0000000000..846f7cd10b
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-image-image.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 200px;
+ height: 200px;
+ background-size: 100px 100px, 200px 200px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-image: url(as-image/green100x100.png),
+ url(as-image/green_square.svg);
+ background-blend-mode: difference;
+}
+
+</style>
+<div class="reftest blend"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-isolation-parent-child-color.html b/layout/reftests/css-blending/background-blending-isolation-parent-child-color.html
new file mode 100644
index 0000000000..0a8ca887f7
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-isolation-parent-child-color.html
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE HTML>
+<html>
+<style>
+.reftest {
+ width: 100px;
+ height: 100px;
+}
+
+.parent {
+ background-color: rgb(255, 255, 0);
+ background-blend-mode: screen;
+}
+
+.child {
+ background-color: rgb(0, 255, 0);
+ background-blend-mode: difference;
+}
+
+</style>
+<body>
+ <div class="reftest parent">
+ <div class="reftest child"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-isolation-parent-child-image.html b/layout/reftests/css-blending/background-blending-isolation-parent-child-image.html
new file mode 100644
index 0000000000..00629b1f13
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-isolation-parent-child-image.html
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE HTML>
+<html>
+<style>
+.reftest {
+ width: 100px;
+ height: 100px;
+}
+
+.parent {
+ background-color: rgb(255, 255, 0);
+ background-blend-mode: screen;
+}
+
+.child {
+ background-image: url(as-image/green100x100.png);
+ background-blend-mode: difference;
+}
+
+</style>
+<body>
+ <div class="reftest parent">
+ <div class="reftest child"></div>
+ </div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/background-blending-isolation-parent-child-ref.html b/layout/reftests/css-blending/background-blending-isolation-parent-child-ref.html
new file mode 100644
index 0000000000..d1becbc8c8
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-isolation-parent-child-ref.html
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE HTML>
+<html>
+<style>
+.reftest {
+ width: 100px;
+ height: 100px;
+}
+
+.color {
+ background-color: rgb(0, 255, 0);
+}
+
+</style>
+<div class="reftest color"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-isolation-ref.html b/layout/reftests/css-blending/background-blending-isolation-ref.html
new file mode 100644
index 0000000000..8b1a50d534
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-isolation-ref.html
@@ -0,0 +1,27 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 100px;
+ height: 100px;
+}
+
+.image {
+ background-image: url(as-image/green100x100.png);
+}
+
+.color {
+ background-color: rgb(0, 255, 0);
+}
+
+body {
+ background-color: rgb(0, 0, 255);
+}
+
+</style>
+<div class="reftest image"></div>
+<div class="reftest color"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-isolation.html b/layout/reftests/css-blending/background-blending-isolation.html
new file mode 100644
index 0000000000..80ead0163b
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-isolation.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 100px;
+ height: 100px;
+}
+
+.image {
+ background-image: url(as-image/green100x100.png);
+ background-blend-mode: difference;
+}
+
+.color {
+ background-color: rgb(0, 255, 0);
+ background-blend-mode: difference;
+}
+
+body {
+ background-color: rgb(0, 0, 255);
+}
+
+</style>
+<body>
+ <div class="reftest image"></div>
+ <div class="reftest color"></div>
+</body>
+</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 0000000000..4ec1bf08a0
--- /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 0000000000..cd69c4c609
--- /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-list-repeat-ref.html b/layout/reftests/css-blending/background-blending-list-repeat-ref.html
new file mode 100644
index 0000000000..e87329c0c4
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-list-repeat-ref.html
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 100px;
+ height: 100px;
+ float:left;
+}
+
+.first {
+ background-color: rgb(0, 0, 0);
+}
+.second {
+ background-color: rgb(0, 255, 0);
+}
+
+.third {
+ background-color: rgb(0, 0, 0);
+}
+
+.fourth {
+ background-color: rgb(0, 255, 0);
+}
+
+</style>
+<div class="reftest first"></div>
+<div class="reftest second"></div>
+<div class="reftest third"></div>
+<div class="reftest fourth"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-list-repeat.html b/layout/reftests/css-blending/background-blending-list-repeat.html
new file mode 100644
index 0000000000..53eb0f040e
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-list-repeat.html
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 400px;
+ height: 100px;
+ background-size: 100px 100px, 200px 100px, 300px 100px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-color: rgb(0, 255, 0);
+ background-blend-mode: multiply, screen;
+ background-image: url(as-image/red100x100.png),
+ url(as-image/green100x100.png),
+ url(as-image/red100x100.png);
+}
+
+</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 0000000000..8dc3c2247f
--- /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 0000000000..4c530c9132
--- /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-moz-element-ref.html b/layout/reftests/css-blending/background-blending-moz-element-ref.html
new file mode 100644
index 0000000000..70298325c4
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-moz-element-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>
+<style>
+
+.c {
+ height: 10px;
+ background: rgba(0,255,0,.5);
+}
+
+</style>
+</head>
+<body>
+<div class="c"></div>
+<div class="c"></div>
+</body>
+</html>
+
diff --git a/layout/reftests/css-blending/background-blending-moz-element.html b/layout/reftests/css-blending/background-blending-moz-element.html
new file mode 100644
index 0000000000..11272a70f6
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-moz-element.html
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+div {
+ height: 10px;
+}
+
+#b {
+ background: rgba(0,255,0,.5);
+}
+#c {
+ background: -moz-element(#b);
+ background-blend-mode: difference;
+}
+
+</style>
+</head>
+<body>
+<div id="b"></div>
+<div id="c"></div>
+</body>
+</html>
+
diff --git a/layout/reftests/css-blending/background-blending-multiple-images-ref.html b/layout/reftests/css-blending/background-blending-multiple-images-ref.html
new file mode 100644
index 0000000000..e15793e7ba
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-multiple-images-ref.html
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 100px;
+ height: 100px;
+ float:left;
+}
+
+.first {
+ background-color: rgb(255, 0, 255);
+}
+.second {
+ background-color: rgb(0, 0, 255);
+}
+
+.third {
+ background-color: rgb(0, 255, 255);
+}
+
+.fourth {
+ background-color: rgb(0, 255, 0);
+}
+
+</style>
+<div class="reftest first"></div>
+<div class="reftest second"></div>
+<div class="reftest third"></div>
+<div class="reftest fourth"></div>
+</html>
diff --git a/layout/reftests/css-blending/background-blending-multiple-images.html b/layout/reftests/css-blending/background-blending-multiple-images.html
new file mode 100644
index 0000000000..274ab18c09
--- /dev/null
+++ b/layout/reftests/css-blending/background-blending-multiple-images.html
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.reftest {
+ width: 400px;
+ height: 100px;
+ background-size: 100px 100px, 200px 100px, 300px 100px;
+ background-repeat: no-repeat;
+}
+
+.blend {
+ background-color: rgb(0, 255, 0);
+ background-blend-mode: difference, exclusion, screen;
+ background-image: url(as-image/red100x100.png),
+ url(as-image/green100x100.png),
+ url(as-image/blue100x100.png);
+}
+
+</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 0000000000..0addf25093
--- /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 0000000000..2174ed5b44
--- /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 0000000000..8b86b74487
--- /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 0000000000..f860846c7b
--- /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 0000000000..320697f710
--- /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 0000000000..a5be65fa98
--- /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 0000000000..a8fb06a5a8
--- /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 0000000000..ed5173346a
--- /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 0000000000..d99af71dc9
--- /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 0000000000..5f5fe0f56b
--- /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 0000000000..485314e389
--- /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 0000000000..13cf76fce4
--- /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-canvas-ref.html b/layout/reftests/css-blending/blend-canvas-ref.html
new file mode 100644
index 0000000000..fd74b7a282
--- /dev/null
+++ b/layout/reftests/css-blending/blend-canvas-ref.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<script type="text/javascript">
+window.onload = function() {
+ var c = document.getElementById("b");
+ var ctx = c.getContext("2d");
+ ctx.fillStyle = "rgb(0,0,0)";
+ ctx.fillRect(0,0,100,100);
+}
+</script>
+<style>
+#a {
+ width: 200px;
+ height: 200px;
+ background-color: rgb(0,255,0);
+}
+#b {
+ width: 100px;
+ height: 100px;
+}
+</style>
+<div id="a">
+ <canvas width="100" height="100" id="b"/>
+</div>
+</html>
diff --git a/layout/reftests/css-blending/blend-canvas.html b/layout/reftests/css-blending/blend-canvas.html
new file mode 100644
index 0000000000..4989e35dba
--- /dev/null
+++ b/layout/reftests/css-blending/blend-canvas.html
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<script type="text/javascript">
+window.onload = function() {
+ var c = document.getElementById("b");
+ var ctx = c.getContext("2d");
+ ctx.fillStyle = "rgb(0,255,0)";
+ ctx.fillRect(0,0,100,100);
+}
+</script>
+<style>
+#a {
+ width: 200px;
+ height: 200px;
+ background-color: rgb(0,255,0);
+}
+#b {
+ width: 100px;
+ height: 100px;
+ mix-blend-mode:difference;
+}
+</style>
+<div id="a">
+ <canvas width="100" height="100" id="b"/>
+</div>
+</html>
diff --git a/layout/reftests/css-blending/blend-constant-background-color-ref.html b/layout/reftests/css-blending/blend-constant-background-color-ref.html
new file mode 100644
index 0000000000..4fbe7d3dec
--- /dev/null
+++ b/layout/reftests/css-blending/blend-constant-background-color-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+#a {
+ width: 200px;
+ height: 200px;
+ background-color: rgb(0,255,0);
+}
+#b {
+ width: 100px;
+ height: 100px;
+ background-color: rgb(0,0,0);
+}
+</style>
+<div id="a">
+<div id="b">
+</div>
+</div>
+</html>
diff --git a/layout/reftests/css-blending/blend-constant-background-color.html b/layout/reftests/css-blending/blend-constant-background-color.html
new file mode 100644
index 0000000000..e9e3e1c6aa
--- /dev/null
+++ b/layout/reftests/css-blending/blend-constant-background-color.html
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+#a {
+ width: 200px;
+ height: 200px;
+ background-color: rgb(0,255,0);
+}
+#b {
+ width: 100px;
+ height: 100px;
+ background-color: rgb(0,255,0);
+ mix-blend-mode:difference;
+}
+</style>
+<div id="a">
+<div id="b">
+</div>
+</div>
+</html>
diff --git a/layout/reftests/css-blending/blend-difference-stacking-ref.html b/layout/reftests/css-blending/blend-difference-stacking-ref.html
new file mode 100644
index 0000000000..34dd86e82d
--- /dev/null
+++ b/layout/reftests/css-blending/blend-difference-stacking-ref.html
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+#a {
+ background-color: rgb(0,255,0);
+ width: 200px;
+ height: 210px;
+}
+#b {
+ position: absolute;
+ top:80px;
+ filter:url(#f);
+}
+</style>
+ <svg height="0">
+ <filter id="f">
+ <feColorMatrix values="1 1 1 0 0
+ 1 1 1 0 0
+ 1 1 1 0 0
+ 0 0 0 1 0"/>
+
+ </filter>
+ </svg>
+<div id="a">
+<div id="b">.</div>
+</div>
+</html>
diff --git a/layout/reftests/css-blending/blend-difference-stacking.html b/layout/reftests/css-blending/blend-difference-stacking.html
new file mode 100644
index 0000000000..3c1e55de3e
--- /dev/null
+++ b/layout/reftests/css-blending/blend-difference-stacking.html
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.a {
+ background-color: rgb(0,255,0);
+}
+#b {
+ width: 200px;
+ height: 210px;
+}
+.c {
+ width: 100px;
+ height: 100px;
+ mix-blend-mode: difference;
+}
+#d {
+ z-index: 1;
+ position: absolute;
+ top:80px;
+}
+</style>
+<div id="b" class="a">
+ <div id="d">.
+ <div class="a c"></div>
+ </div>
+</div>
+</html>
diff --git a/layout/reftests/css-blending/blend-gradient-background-color-ref.html b/layout/reftests/css-blending/blend-gradient-background-color-ref.html
new file mode 100644
index 0000000000..53b2f65468
--- /dev/null
+++ b/layout/reftests/css-blending/blend-gradient-background-color-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+#a {
+ width: 200px;
+ height: 200px;
+ background-color: rgb(0,255,0);
+}
+#b {
+ width: 100px;
+ height: 100px;
+ background: linear-gradient(rgb(0,255,255), rgb(255,255,0));
+}
+</style>
+<div id="a">
+<div id="b">
+</div>
+</div>
+</html>
diff --git a/layout/reftests/css-blending/blend-gradient-background-color.html b/layout/reftests/css-blending/blend-gradient-background-color.html
new file mode 100644
index 0000000000..10a938cc79
--- /dev/null
+++ b/layout/reftests/css-blending/blend-gradient-background-color.html
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+#a {
+ width: 200px;
+ height: 200px;
+ background-color: rgb(0,255,0);
+}
+#b {
+ width: 100px;
+ height: 100px;
+ background: linear-gradient(rgb(0,0,255), rgb(255,0,0));
+ mix-blend-mode:difference;
+}
+</style>
+<div id="a">
+<div id="b">
+</div>
+</div>
+</html>
diff --git a/layout/reftests/css-blending/blend-image-ref.html b/layout/reftests/css-blending/blend-image-ref.html
new file mode 100644
index 0000000000..b8a85f2360
--- /dev/null
+++ b/layout/reftests/css-blending/blend-image-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+#a {
+ width: 200px;
+ height: 200px;
+ background-color: rgb(0,255,0);
+}
+#b {
+ width: 100px;
+ height: 100px;
+}
+</style>
+<div id="a">
+<img src="as-image/black100x100.png" id="b"/>
+</div>
+</html> \ No newline at end of file
diff --git a/layout/reftests/css-blending/blend-image.html b/layout/reftests/css-blending/blend-image.html
new file mode 100644
index 0000000000..ac0b2c1670
--- /dev/null
+++ b/layout/reftests/css-blending/blend-image.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+#a {
+ width: 200px;
+ height: 200px;
+ background-color: rgb(0,255,0);
+}
+#b {
+ width: 100px;
+ height: 100px;
+ mix-blend-mode:difference;
+}
+</style>
+<div id="a">
+<img src="as-image/green100x100.png" id="b"/>
+</div>
+</html>
diff --git a/layout/reftests/css-blending/blend-isolation-ref.html b/layout/reftests/css-blending/blend-isolation-ref.html
new file mode 100644
index 0000000000..e4d76e534d
--- /dev/null
+++ b/layout/reftests/css-blending/blend-isolation-ref.html
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+#a {
+ background-color: rgb(0,255,0);
+ width: 200px;
+ height: 210px;
+}
+</style>
+<div id="a">
+</div>
+</html>
diff --git a/layout/reftests/css-blending/blend-isolation.html b/layout/reftests/css-blending/blend-isolation.html
new file mode 100644
index 0000000000..802d7fd97d
--- /dev/null
+++ b/layout/reftests/css-blending/blend-isolation.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+.a {
+ background-color: rgb(0,255,0);
+}
+#b {
+ width: 200px;
+ height: 210px;
+}
+.c {
+ width: 100px;
+ height: 100px;
+ mix-blend-mode: difference;
+}
+#d {
+ isolation: isolate;
+}
+</style>
+<div id="b" class="a">
+ <div id="d">
+ <div class="a c"></div>
+ </div>
+</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 0000000000..9a827c7bd0
--- /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/bug1281593-ref.html b/layout/reftests/css-blending/bug1281593-ref.html
new file mode 100644
index 0000000000..2f3933c03f
--- /dev/null
+++ b/layout/reftests/css-blending/bug1281593-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+
+<html>
+ <head>
+ <title>Transform and Blend Mode</title>
+ <style>
+ body {
+ background: cornflowerblue;
+ }
+ .box-blend-mode {
+ width: 64px;
+ height: 64px;
+ margin-bottom: 1em;
+ background-color: hsla(0,0%,0%,.25);
+ mix-blend-mode: multiply;
+ }
+ .box-blend-mode-inner {
+ width: 48px;
+ height: 48px;
+ background-image: url("../backgrounds/transparent-32x32.png");
+ background-position: center center;
+ background-repeat: no-repeat;
+ mix-blend-mode: multiply;
+ }
+
+ .box-blend-mode-inner.transformed {
+ transform: rotate(45deg);
+ }
+
+ </style>
+ </head>
+ <body>
+ <div class="box-blend-mode">
+ <div class="box-blend-mode-inner"></div>
+ </div>
+ <div class="box-blend-mode">
+ <div class="box-blend-mode-inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/css-blending/bug1281593.html b/layout/reftests/css-blending/bug1281593.html
new file mode 100644
index 0000000000..ecd589675f
--- /dev/null
+++ b/layout/reftests/css-blending/bug1281593.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+
+<html>
+ <head>
+ <title>Transform and Blend Mode</title>
+ <style>
+ body {
+ background: cornflowerblue;
+ }
+ .box-blend-mode {
+ width: 64px;
+ height: 64px;
+ margin-bottom: 1em;
+ background-color: hsla(0,0%,0%,.25);
+ mix-blend-mode: multiply;
+ }
+ .box-blend-mode-inner {
+ width: 48px;
+ height: 48px;
+ background-image: url("../backgrounds/transparent-32x32.png");
+ background-position: center center;
+ background-repeat: no-repeat;
+ mix-blend-mode: multiply;
+ }
+
+ .box-blend-mode-inner.transformed {
+ transform: rotate(45deg);
+ }
+
+ </style>
+ </head>
+ <body>
+ <div class="box-blend-mode">
+ <div class="box-blend-mode-inner"></div>
+ </div>
+ <div class="box-blend-mode">
+ <div class="box-blend-mode-inner transformed"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff-ref.html b/layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff-ref.html
new file mode 100644
index 0000000000..71b215e1bc
--- /dev/null
+++ b/layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Blend mode items shouldn't clip unclipped children to their own clip</title>
+
+<style>
+
+body {
+ margin: 0;
+ background: white; /* this shouldn't be necessary, bug ??????? */
+}
+
+.content {
+ box-sizing: border-box;
+ border: 10px solid yellow;
+ width: 100px;
+ height: 100px;
+}
+
+.clip {
+ box-sizing: border-box;
+ width: 300px;
+ height: 200px;
+ border: 10px solid black;
+ background-color: white;
+ overflow: hidden;
+}
+
+.absolutelyPositioned {
+ position: absolute;
+ top: 20px;
+ left: 250px;
+}
+
+.inner {
+ margin-left: auto;
+ border-color: magenta;
+}
+
+.blendedOverlay {
+ position: absolute;
+ top: 20px;
+ left: 290px;
+ width: 10px;
+ border-left: 0;
+ border-right: 0;
+ border-color: blue;
+}
+
+</style>
+
+<div class="clip">
+ <div class="absolutelyPositioned content"></div>
+ <div class="inner content"></div>
+</div>
+
+<div class="blendedOverlay content"></div>
diff --git a/layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff.html b/layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff.html
new file mode 100644
index 0000000000..f82b50b617
--- /dev/null
+++ b/layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Blend mode items shouldn't clip unclipped children to their own clip</title>
+
+<style>
+
+body {
+ margin: 0;
+ background: white; /* this shouldn't be necessary, bug ??????? */
+}
+
+.content {
+ box-sizing: border-box;
+ border: 10px solid blue;
+ width: 100px;
+ height: 100px;
+}
+
+.clip {
+ box-sizing: border-box;
+ width: 300px;
+ height: 200px;
+ border: 10px solid black;
+ background-color: white;
+ overflow: hidden;
+}
+
+.mixBlendMode {
+ mix-blend-mode: exclusion;
+}
+
+.absolutelyPositioned {
+ position: absolute;
+ top: 20px;
+ left: 250px;
+}
+
+.inner {
+ margin-left: auto;
+ border-color: lime;
+}
+
+</style>
+
+<div class="clip">
+ <div class="mixBlendMode">
+ <div class="absolutelyPositioned content"></div>
+ <div class="inner content"></div>
+ </div>
+</div>
diff --git a/layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode-ref.html b/layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode-ref.html
new file mode 100644
index 0000000000..307483ac6b
--- /dev/null
+++ b/layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Blend mode containers shouldn't clip unclipped children to their own clip</title>
+
+<style>
+
+body {
+ margin: 0;
+}
+
+.content {
+ box-sizing: border-box;
+ border: 10px solid black;
+ width: 100px;
+ height: 100px;
+}
+
+.clip {
+ box-sizing: border-box;
+ width: 300px;
+ height: 200px;
+ border: 10px solid black;
+ overflow: hidden;
+}
+
+.opacity {
+ opacity: 0.5;
+}
+
+.absolutelyPositioned {
+ position: absolute;
+ top: 20px;
+ left: 250px;
+}
+
+.mixBlendMode {
+ border-color: blue;
+ margin-left: auto;
+}
+
+</style>
+
+<div class="clip">
+ <div class="opacity">
+ <div class="absolutelyPositioned content"></div>
+ <div class="mixBlendMode content"></div>
+ </div>
+</div>
diff --git a/layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode.html b/layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode.html
new file mode 100644
index 0000000000..444116feeb
--- /dev/null
+++ b/layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Blend mode containers shouldn't clip unclipped children to their own clip</title>
+
+<style>
+
+body {
+ margin: 0;
+}
+
+.content {
+ box-sizing: border-box;
+ border: 10px solid black;
+ width: 100px;
+ height: 100px;
+}
+
+.clip {
+ box-sizing: border-box;
+ width: 300px;
+ height: 200px;
+ border: 10px solid black;
+ overflow: hidden;
+}
+
+.opacity {
+ opacity: 0.5;
+}
+
+.absolutelyPositioned {
+ position: absolute;
+ top: 20px;
+ left: 250px;
+}
+
+.mixBlendMode {
+ mix-blend-mode: multiply;
+ border-color: blue;
+ margin-left: auto;
+}
+
+</style>
+
+<div class="clip">
+ <div class="opacity">
+ <div class="absolutelyPositioned content"></div>
+ <div class="mixBlendMode content"></div>
+ </div>
+</div>
diff --git a/layout/reftests/css-blending/mix-blend-mode-952051-ref.html b/layout/reftests/css-blending/mix-blend-mode-952051-ref.html
new file mode 100644
index 0000000000..3a3e4328f5
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-952051-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ .parent {
+ width: 200px;
+ height: 200px;
+ overflow: hidden;
+ border-radius: 0px 0px 20px 0px;
+
+ position: absolute;
+ z-index: 0;
+ background-color: #00ff00;
+ }
+
+ .child {
+ width: 300px;
+ height: 300px;
+ margin-left: 100px;
+ background-color: #ffff00;
+ }
+
+ body {
+ margin: 0;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="parent">
+ <div class="child"></div>
+ </div>
+</body>
diff --git a/layout/reftests/css-blending/mix-blend-mode-952051.html b/layout/reftests/css-blending/mix-blend-mode-952051.html
new file mode 100644
index 0000000000..4895a6f721
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-952051.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ .parent {
+ width: 200px;
+ height: 200px;
+ overflow: hidden;
+ border-radius: 0px 0px 20px 0px;
+ position: absolute;
+ z-index: 0;
+ background-color: #00ff00;
+ }
+
+ .child {
+ width: 300px;
+ height: 300px;
+ margin-left: 100px;
+ background-color: #ff0000;
+ mix-blend-mode: difference;
+ }
+
+ body {
+ margin: 0;
+ }
+
+ </style>
+ <!-- Rounded rect clipping seems to not yield the same results when clipping
+ the parent and child elements individually. The reference rendering will show
+ some of the parent green color around the child's clipped corner.
+ The reftests, on the other hand, shows some gray pixels around the same area.
+ This may somehow be related to antialiasing. -->
+</head>
+<body>
+ <div class="parent">
+ <div class="child"></div>
+ </div>
+</body>
diff --git a/layout/reftests/css-blending/mix-blend-mode-and-filter-ref.html b/layout/reftests/css-blending/mix-blend-mode-and-filter-ref.html
new file mode 100644
index 0000000000..ef56627380
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-and-filter-ref.html
@@ -0,0 +1,41 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE HTML>
+<html>
+<head>
+ <style>
+ .parent {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ }
+
+ .child {
+ filter: blur(3px);
+ background: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+
+ .black-rect {
+ position: absolute;
+ top: 50px;
+ width: 100px;
+ height: 50px;
+ background: #000;
+ }
+ </style>
+</head>
+<body>
+ <!--
+ You should see a blurred green square, with its bottom half mostly
+ covered by a black rectangle.
+ -->
+ <div class="parent">
+ <div class="child"></div>
+ <div class="black-rect"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/css-blending/mix-blend-mode-and-filter-ref.svg b/layout/reftests/css-blending/mix-blend-mode-and-filter-ref.svg
new file mode 100644
index 0000000000..f9aa828666
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-and-filter-ref.svg
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <filter id="blur">
+ <feGaussianBlur stdDeviation="3"/>
+ </filter>
+ </defs>
+ <rect x="0" y="0" width="100" height="50" fill="#fff"/>
+ <rect x="0" y="0" width="100" height="100" fill="#0f0" filter="url(#blur)"/>
+ <rect x="0" y="50" width="100" height="50" fill="#000"/>
+</svg>
diff --git a/layout/reftests/css-blending/mix-blend-mode-and-filter.html b/layout/reftests/css-blending/mix-blend-mode-and-filter.html
new file mode 100644
index 0000000000..80f2dd46e9
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-and-filter.html
@@ -0,0 +1,37 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE HTML>
+<html>
+<head>
+ <style>
+ .parent {
+ /*
+ With the darken blend mode, green will overwrite white parts of this
+ background, while black parts of this background will show through.
+ */
+ background: linear-gradient(#fff 0%, #fff 50%, #000 50%, #000 100%);
+ width: 100px;
+ height: 100px;
+ }
+
+ .child {
+ filter: blur(3px);
+ mix-blend-mode: darken;
+ background: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <!--
+ You should see a blurred green square, with its bottom half mostly
+ covered by a black rectangle.
+ -->
+ <div class="parent">
+ <div class="child"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/css-blending/mix-blend-mode-and-filter.svg b/layout/reftests/css-blending/mix-blend-mode-and-filter.svg
new file mode 100644
index 0000000000..49c1f5fea7
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-and-filter.svg
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <filter id="blur">
+ <feGaussianBlur stdDeviation="3"/>
+ </filter>
+ </defs>
+ <!-- Background consists of a white rect and a black rect. -->
+ <rect x="0" y="0" width="100" height="50" fill="#fff"/>
+ <rect x="0" y="50" width="100" height="50" fill="#000"/>
+ <!--
+ Foreground consists of a blurred green square, blended with the background
+ using the darken blend mode. Green should overwrite the white rect, while
+ the black rect should show through.
+ -->
+ <rect x="0" y="0" width="100" height="100" fill="#0f0" filter="url(#blur)"
+ style="mix-blend-mode: darken;"/>
+</svg>
diff --git a/layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity-ref.html b/layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity-ref.html
new file mode 100644
index 0000000000..89f580bbb7
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com">
+ <style>
+ .parent {
+ opacity: 0.9;
+ background: yellow;/*rgb(255,255,0);*/
+ margin: 30px;
+ width: 120px;
+ height: 120px;
+ display: inline-block;
+ }
+ .blended {
+ width: 100px;
+ height: 100px;
+ background: aqua;/*rgb(0,255,255);*/
+ display: inline-block;
+ margin-top: 10px;
+ margin-left: 10px;
+ }
+ .childBlended {
+ background: lime;/*rgb(0,255,0);*/
+ width: 80px;
+ height: 80px;
+ margin-top: 10px;
+ margin-left: 10px;
+ opacity: 0.99;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="parent">
+ <div class="blended">
+ <div class="childBlended"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity.html b/layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity.html
new file mode 100644
index 0000000000..8ed9be7f25
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: blending between an element and the child with opacity</title>
+ <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com">
+ <link rel="help" href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test checks that an element with mix-blend-mode and his child with opacity blends as a group(no blending between the element with mix-blend-mode and the child element)">
+ <link rel="match" href="reference/mix-blend-mode-child-of-blended-has-opacity-ref.html">
+ <style>
+ .parent {
+ opacity: 0.9;
+ background: yellow;/*rgb(255,255,0);*/
+ margin: 30px;
+ width: 120px;
+ height: 120px;
+ display: inline-block;
+ }
+ .blended {
+ width: 100px;
+ height: 100px;
+ background: fuchsia; /* rgb(255, 0, 255);*/
+ display: inline-block;
+ mix-blend-mode: difference;
+ margin-top: 10px;
+ margin-left: 10px;
+ }
+ .childBlended {
+ background: red;/*rgb(255,0,0);*/
+ width: 80px;
+ height: 80px;
+ margin-top: 10px;
+ margin-left: 10px;
+ opacity: 0.99;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="parent">
+ <div class="blended">
+ <div class="childBlended"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/css-blending/mix-blend-mode-culling-1207041-ref.html b/layout/reftests/css-blending/mix-blend-mode-culling-1207041-ref.html
new file mode 100644
index 0000000000..f098be2b94
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-culling-1207041-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ .parent {
+ width: 200px;
+ height: 200px;
+ isolation: isolate;
+ background: orange;
+ }
+ .child {
+ width: 200px;
+ height: 200px;
+ background: #ffd200;
+ }
+ </style>
+</head>
+<body>
+ <div class="parent">
+ <div class="child">
+ </div>
+ </div>
+</body>
diff --git a/layout/reftests/css-blending/mix-blend-mode-culling-1207041.html b/layout/reftests/css-blending/mix-blend-mode-culling-1207041.html
new file mode 100644
index 0000000000..bcb4afc06f
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-culling-1207041.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ .parent {
+ width: 200px;
+ height: 200px;
+ isolation: isolate;
+ background: orange;
+ }
+ .child {
+ width: 200px;
+ height: 200px;
+ mix-blend-mode: screen;
+ background: green;
+ }
+ </style>
+</head>
+<body>
+ <div class="parent">
+ <div class="child">
+ </div>
+ </div>
+</body>
diff --git a/layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271-ref.html b/layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271-ref.html
new file mode 100644
index 0000000000..e8ff8a6109
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ .parent {
+ width: 200px;
+ height: 200px;
+ isolation: isolate;
+ }
+ .child {
+ width: 200px;
+ height: 200px;
+ background: green;
+ }
+ </style>
+</head>
+<body>
+ <div class="parent">
+ <div class="child">
+ </div>
+ </div>
+</body>
diff --git a/layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271.html b/layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271.html
new file mode 100644
index 0000000000..f36dfe53fb
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ .parent {
+ width: 200px;
+ height: 200px;
+ isolation: isolate;
+ }
+ .child {
+ width: 200px;
+ height: 200px;
+ mix-blend-mode: multiply;
+ background: green;
+ }
+ </style>
+</head>
+<body>
+ <div class="parent">
+ <div class="child">
+ </div>
+ </div>
+</body>
diff --git a/layout/reftests/css-blending/mix-blend-mode-nested-976533-ref.html b/layout/reftests/css-blending/mix-blend-mode-nested-976533-ref.html
new file mode 100644
index 0000000000..8680fd6633
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-nested-976533-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ .parent {
+ width: 200px;
+ height: 200px;
+ position: absolute;
+ z-index: 1;
+ background-color: #00ff00;
+ }
+
+ .intermediate {
+ width: 100px;
+ height: 100px;
+ margin-left:50px;
+ background-color: #ffffff;
+ }
+
+ .child {
+ width: 100px;
+ height: 100px;
+ margin-left:50px;
+ background-color: #00ffff;
+ }
+
+ .grandchild {
+ width: 50px;
+ height: 100px;
+ margin-left: 50px;
+ background-color: #0000ff;
+ }
+
+ body {
+ margin:0px;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="parent">
+ <div class="intermediate">
+ <div class="child">
+ <div class="grandchild"></div>
+ </div>
+ </div>
+ </div>
+</body>
diff --git a/layout/reftests/css-blending/mix-blend-mode-nested-976533.html b/layout/reftests/css-blending/mix-blend-mode-nested-976533.html
new file mode 100644
index 0000000000..8f97cd84cb
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-nested-976533.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ .parent {
+ width: 200px;
+ height: 200px;
+ position: absolute;
+ z-index: 1;
+ background-color: #00ff00;
+ }
+
+ .intermediate {
+ width: 100px;
+ height: 100px;
+ margin-left:50px;
+ background-color: #ff00ff;
+ mix-blend-mode: difference;
+ }
+
+ .child {
+ width: 100px;
+ height: 100px;
+ margin-left:50px;
+ background-color: #00ffff;
+ mix-blend-mode: multiply;
+ }
+
+ body {
+ margin:0px;
+ }
+ </style>
+ <!-- Blending should happen as follows:
+ First, the child element should blend with the intermediate element, with
+ the multiply operator. Is should not blend with the parent directly.
+ Then, group formed by the blended child and the intermediate element should
+ blend with the parent as a single layer.
+ -->
+</head>
+<body>
+ <div class="parent">
+ <div class="intermediate">
+ <div class="child"></div>
+ </div>
+ </div>
+</body>
diff --git a/layout/reftests/css-blending/mix-blend-mode-soft-light-ref.html b/layout/reftests/css-blending/mix-blend-mode-soft-light-ref.html
new file mode 100644
index 0000000000..c21fadac22
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-soft-light-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ .parent {
+ width: 200px;
+ height: 200px;
+ isolation: isolate;
+ }
+ .child {
+ width: 200px;
+ height: 200px;
+ background: #7775b6;
+ }
+ </style>
+</head>
+<body>
+ <div class="parent">
+ <div class="child">
+ </div>
+ </div>
+</body>
diff --git a/layout/reftests/css-blending/mix-blend-mode-soft-light.html b/layout/reftests/css-blending/mix-blend-mode-soft-light.html
new file mode 100644
index 0000000000..bcfd809a4a
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-soft-light.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ .parent {
+ width: 200px;
+ height: 200px;
+ isolation: isolate;
+ background: #5856a2;
+ }
+ .child {
+ width: 200px;
+ height: 200px;
+ mix-blend-mode: soft-light;
+ opacity: 0.5;
+ background: white;
+ will-change: opacity;
+ }
+ </style>
+</head>
+<body>
+ <div class="parent">
+ <div class="child">
+ </div>
+ </div>
+</body>
diff --git a/layout/reftests/css-blending/mix-blend-mode-transformed-ref.html b/layout/reftests/css-blending/mix-blend-mode-transformed-ref.html
new file mode 100644
index 0000000000..e0042d6270
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-transformed-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ .outer {
+ transform: scale(0.5) translate(200px, 200px);
+ }
+ .parent {
+ width: 200px;
+ height: 200px;
+ isolation: isolate;
+ }
+ .child {
+ width: 200px;
+ height: 200px;
+ background: #7775b6;
+ }
+ </style>
+</head>
+<body>
+ <div class="outer">
+ <div class="parent">
+ <div class="child">
+ </div>
+ </div>
+ </div>
+</body>
diff --git a/layout/reftests/css-blending/mix-blend-mode-transformed.html b/layout/reftests/css-blending/mix-blend-mode-transformed.html
new file mode 100644
index 0000000000..01d9e0bfa5
--- /dev/null
+++ b/layout/reftests/css-blending/mix-blend-mode-transformed.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ .outer {
+ transform: scale(0.5) translate(200px, 200px);
+ }
+ .parent {
+ width: 200px;
+ height: 200px;
+ isolation: isolate;
+ background: #5856a2;
+ }
+ .child {
+ width: 200px;
+ height: 200px;
+ mix-blend-mode: soft-light;
+ opacity: 0.5;
+ background: white;
+ will-change: opacity;
+ }
+ </style>
+</head>
+<body>
+ <div class="outer">
+ <div class="parent">
+ <div class="child">
+ </div>
+ </div>
+ </div>
+</body>
diff --git a/layout/reftests/css-blending/reftest.list b/layout/reftests/css-blending/reftest.list
new file mode 100644
index 0000000000..20252d764d
--- /dev/null
+++ b/layout/reftests/css-blending/reftest.list
@@ -0,0 +1,103 @@
+== blend-canvas.html blend-canvas-ref.html
+== blend-constant-background-color.html blend-constant-background-color-ref.html
+== blend-gradient-background-color.html blend-gradient-background-color-ref.html
+== blend-image.html blend-image-ref.html
+fuzzy-if(geckoview&&device,3-3,5-5) == blend-difference-stacking.html blend-difference-stacking-ref.html
+
+fuzzy(0-1,0-30000) == background-blending-alpha.html background-blending-alpha-ref.html
+== background-blending-gradient-color.html background-blending-gradient-color-ref.html
+fuzzy(0-2,0-9450) fuzzy-if(!geckoview,0-1,0-6200) == background-blending-gradient-gradient.html background-blending-gradient-gradient-ref.html
+fuzzy-if(azureSkiaGL,0-2,0-7174) == background-blending-gradient-image.html background-blending-gradient-color-ref.html
+fuzzy-if(azureSkia||d2d||gtkWidget,0-1,0-10000) == background-blending-image-color-jpg.html background-blending-image-color-ref.html
+== background-blending-image-color-png.html background-blending-image-color-ref.html
+== background-blending-image-color-svg.html background-blending-image-color-ref.html
+fuzzy-if(azureSkiaGL,0-2,0-7174) == background-blending-image-gradient.html background-blending-gradient-color-ref.html
+== background-blending-image-image.html background-blending-image-color-ref.html
+== background-blending-isolation.html background-blending-isolation-ref.html
+random-if(useDrawSnapshot) == background-blending-list-repeat.html background-blending-list-repeat-ref.html
+== background-blending-multiple-images.html background-blending-multiple-images-ref.html
+
+== background-blending-color-burn.html background-blending-color-burn-ref.svg
+== 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(azureSkia||gtkWidget,0-2,0-9600) fuzzy-if(appleSilicon,0-1,0-11200) fuzzy-if(d2d,0-1,0-8000) fuzzy-if(swgl&&!Android,1-1,8000-9600) == background-blending-color.html background-blending-color-ref.svg
+== background-blending-darken.html background-blending-darken-ref.svg
+== background-blending-difference.html background-blending-difference-ref.svg
+fuzzy(0-1,0-1600) == background-blending-exclusion.html background-blending-exclusion-ref.svg
+fuzzy-if(cocoaWidget||d2d||swgl||/^Windows\x20NT\x206\.1/.test(http.oscpu),0-1,0-1600) == background-blending-hard-light.html background-blending-hard-light-ref.svg
+fuzzy-if(d2d,0-1,0-9600) fuzzy-if(azureSkia||gtkWidget,0-1,0-11200) fuzzy-if(!geckoview,1-1,9600-11240) == background-blending-hue.html background-blending-hue-ref.svg
+== background-blending-lighten.html background-blending-lighten-ref.svg
+fuzzy-if(d2d,0-1,0-8000) fuzzy-if(azureSkia||gtkWidget,0-2,0-9600) fuzzy-if(appleSilicon,0-1,0-11200) fuzzy-if(swgl&&!Android,1-1,8000-9600) == background-blending-luminosity.html background-blending-luminosity-ref.svg
+fuzzy(0-1,0-1600) == background-blending-multiply.html background-blending-multiply-ref.svg
+== background-blending-normal.html background-blending-normal-ref.svg
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)||azureSkia||gtkWidget,0-1,0-1600) == background-blending-overlay.html background-blending-overlay-ref.svg
+fuzzy-if(d2d,0-1,0-3200) fuzzy-if(azureSkia||gtkWidget,0-2,0-12800) == background-blending-saturation.html background-blending-saturation-ref.svg
+fuzzy-if(d2d||azureSkia||gtkWidget,0-1,0-1600) == background-blending-screen.html background-blending-screen-ref.svg
+fuzzy-if(d2d||azureSkia||gtkWidget,0-10,0-4800) == background-blending-soft-light.html background-blending-soft-light-ref.svg
+
+fuzzy-if(azureSkia||d2d||gtkWidget,0-1,0-40000) == background-blending-image-color-959674.html background-blending-image-color-959674-ref.html
+
+#fuzzy due to inconsistencies in rounded rect cliping between parent and child; may be related to antialiasing. Between platforms, the max difference is the same, and the number of different pixels is either 36 or 37. (Win, Mac and Lin)
+fuzzy(0-65,0-53) fuzzy-if(geckoview&&device,63-64,163-328) == mix-blend-mode-952051.html mix-blend-mode-952051-ref.html
+
+fuzzy-if(d3d11,0-49,0-200) == mix-blend-mode-and-filter.html mix-blend-mode-and-filter-ref.html
+fuzzy-if(d3d11,0-1,0-6) == mix-blend-mode-and-filter.svg mix-blend-mode-and-filter-ref.svg
+
+fuzzy(0-2,0-14400) fuzzy-if(geckoview&&device,3-3,700-700) == mix-blend-mode-child-of-blended-has-opacity.html mix-blend-mode-child-of-blended-has-opacity-ref.html
+
+== mix-blend-mode-nested-976533.html mix-blend-mode-nested-976533-ref.html
+== mix-blend-mode-culling-1207041.html mix-blend-mode-culling-1207041-ref.html
+== mix-blend-mode-dest-alpha-1135271.html mix-blend-mode-dest-alpha-1135271-ref.html
+fuzzy-if(Android,0-3,0-850) == clipped-mixblendmode-containing-unclipped-stuff.html clipped-mixblendmode-containing-unclipped-stuff-ref.html
+fuzzy(0-1,0-6800) == clipped-opacity-containing-unclipped-mixblendmode.html clipped-opacity-containing-unclipped-mixblendmode-ref.html
+
+# Test plan 5.3.1 Blending between the background layers and the background color for an element with background-blend-mode
+# Test 9
+== background-blending-image-color-svg-as-data-uri.html background-blending-image-color-ref.html
+# Test 10
+test-pref(image.animation_mode,"none") == background-blending-image-color-gif.html background-blending-image-color-gif-ref.html
+== background-blending-image-color-transform3d.html background-blending-image-color-ref.html
+
+# Test plan 5.3.2 Background layers do not blend with content outside the background (or behind the element) - tests 2 and 3
+== background-blending-isolation-parent-child-color.html background-blending-isolation-parent-child-ref.html
+== background-blending-isolation-parent-child-image.html background-blending-isolation-parent-child-ref.html
+
+# Test plan 5.3.6 background-blend-mode for an element with background-position
+== background-blending-background-position-percentage.html background-blending-background-position-percentage-ref.html
+
+# Test plan 5.3.7 background-blend-mode for an element with background-size
+== background-blending-background-size-contain.html background-blending-background-size-ref.html
+== background-blending-background-size-cover.html background-blending-background-size-ref.html
+== background-blending-background-size-percentage.html background-blending-background-size-ref.html
+== background-blending-background-size-pixels.html background-blending-background-size-ref.html
+
+# Test plan 5.3.8 background-blend-mode for an element with background-repeat
+# Tests 2 and 3 are not added because space and round are not currently supported
+== background-blending-background-repeat-no-repeat.html background-blending-background-repeat-no-repeat-ref.html
+
+# Test plan 5.3.9 background-blend-mode for an element with background-clip
+== background-blending-background-clip-content-box.html background-blending-background-clip-content-box-ref.html
+== background-blending-background-clip-padding-box.html background-blending-background-clip-padding-box-ref.html
+
+# Test plan 5.3.10 background-blend-mode for an element with background-origin
+== background-blending-background-origin-border-box.html background-blending-background-origin-ref.html
+== background-blending-background-origin-content-box.html background-blending-background-origin-ref.html
+
+# Test plan 5.3.11 background-blend-mode for an element with background-attachement
+== background-blending-background-attachement-fixed.html background-blending-background-attachement-fixed-ref.html
+== background-blending-background-attachement-fixed-scroll.html background-blending-background-attachement-fixed-scroll-ref.html
+
+fuzzy(0-1,0-49719) == background-blend-mode-body-image.html background-blend-mode-body-image-ref.html
+fuzzy(0-2,0-78472) == background-blend-mode-body-transparent-image.html background-blend-mode-body-transparent-image-ref.html
+
+== background-blend-mode-body-fixed.html background-blend-mode-body-fixed-ref.html
+
+== background-blending-moz-element.html background-blending-moz-element-ref.html
+
+fuzzy(0-1,0-40000) == mix-blend-mode-soft-light.html mix-blend-mode-soft-light-ref.html
+fuzzy(0-1,0-40000) == mix-blend-mode-transformed.html mix-blend-mode-transformed-ref.html
+
+# Test plan 4.4.2 element with isolation:isolate creates an isolated group for blended children
+== blend-isolation.html blend-isolation-ref.html
+
+fuzzy(0-1,0-8192) == bug1281593.html bug1281593-ref.html