From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 19:32:43 +0200
Subject: Adding upstream version 1:115.7.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../css-blending/as-image/black100x100.png         | Bin 0 -> 15438 bytes
 .../reftests/css-blending/as-image/blue100x100.png | Bin 0 -> 47176 bytes
 .../css-blending/as-image/brown100x100.png         | Bin 0 -> 47836 bytes
 .../css-blending/as-image/green100x100.jpg         | Bin 0 -> 3595 bytes
 .../css-blending/as-image/green100x100.png         | Bin 0 -> 47813 bytes
 .../css-blending/as-image/green100x100_alpha.png   | Bin 0 -> 47847 bytes
 .../css-blending/as-image/green_square.svg         |   3 +
 .../reftests/css-blending/as-image/red100x100.png  | Bin 0 -> 47519 bytes
 .../reftests/css-blending/as-image/red_green.gif   | Bin 0 -> 317 bytes
 .../css-blending/as-image/white_square.svg         |   3 +
 .../background-blend-mode-body-fixed-ref.html      |  11 +++
 .../background-blend-mode-body-fixed.html          |  18 ++++
 .../background-blend-mode-body-image-ref.html      |   8 ++
 .../background-blend-mode-body-image.html          |  10 ++
 ...ound-blend-mode-body-transparent-image-ref.html |   8 ++
 ...ckground-blend-mode-body-transparent-image.html |   9 ++
 .../background-blending-alpha-ref.html             |  62 +++++++++++++
 .../css-blending/background-blending-alpha.html    |  22 +++++
 ...-blending-background-attachement-fixed-ref.html |  19 ++++
 ...ng-background-attachement-fixed-scroll-ref.html |  23 +++++
 ...ending-background-attachement-fixed-scroll.html |  40 ++++++++
 ...ound-blending-background-attachement-fixed.html |  20 ++++
 ...d-blending-background-clip-content-box-ref.html |  19 ++++
 ...round-blending-background-clip-content-box.html |  20 ++++
 ...d-blending-background-clip-padding-box-ref.html |  21 +++++
 ...round-blending-background-clip-padding-box.html |  22 +++++
 ...ound-blending-background-origin-border-box.html |  20 ++++
 ...und-blending-background-origin-content-box.html |  21 +++++
 .../background-blending-background-origin-ref.html |  19 ++++
 ...lending-background-position-percentage-ref.html |  19 ++++
 ...nd-blending-background-position-percentage.html |  20 ++++
 ...d-blending-background-repeat-no-repeat-ref.html |  19 ++++
 ...round-blending-background-repeat-no-repeat.html |  21 +++++
 ...ackground-blending-background-size-contain.html |  20 ++++
 .../background-blending-background-size-cover.html |  20 ++++
 ...ground-blending-background-size-percentage.html |  20 ++++
 ...background-blending-background-size-pixels.html |  20 ++++
 .../background-blending-background-size-ref.html   |  18 ++++
 .../background-blending-color-burn-ref.svg         |  22 +++++
 .../background-blending-color-burn.html            |  16 ++++
 .../background-blending-color-dodge-ref.svg        |  22 +++++
 .../background-blending-color-dodge.html           |  14 +++
 .../css-blending/background-blending-color-ref.svg |  22 +++++
 .../css-blending/background-blending-color.html    |  14 +++
 .../background-blending-darken-ref.svg             |  22 +++++
 .../css-blending/background-blending-darken.html   |  14 +++
 .../background-blending-difference-ref.svg         |  22 +++++
 .../background-blending-difference.html            |  14 +++
 .../background-blending-exclusion-ref.svg          |  22 +++++
 .../background-blending-exclusion.html             |  14 +++
 .../background-blending-gradient-color-ref.html    |  20 ++++
 .../background-blending-gradient-color.html        |  22 +++++
 .../background-blending-gradient-gradient-ref.html |  20 ++++
 .../background-blending-gradient-gradient.html     |  22 +++++
 .../background-blending-gradient-image-ref.html    |  20 ++++
 .../background-blending-gradient-image.html        |  21 +++++
 .../background-blending-hard-light-ref.svg         |  22 +++++
 .../background-blending-hard-light.html            |  14 +++
 .../css-blending/background-blending-hue-ref.svg   |  22 +++++
 .../css-blending/background-blending-hue.html      |  14 +++
 ...background-blending-image-color-959674-ref.html |  15 +++
 .../background-blending-image-color-959674.html    |  26 ++++++
 .../background-blending-image-color-gif-ref.html   |  14 +++
 .../background-blending-image-color-gif.html       |  29 ++++++
 .../background-blending-image-color-jpg.html       |  26 ++++++
 .../background-blending-image-color-png.html       |  25 +++++
 .../background-blending-image-color-ref.html       |  21 +++++
 ...round-blending-image-color-svg-as-data-uri.html |  26 ++++++
 .../background-blending-image-color-svg.html       |  25 +++++
 ...ackground-blending-image-color-transform3d.html |  28 ++++++
 .../background-blending-image-gradient.html        |  21 +++++
 .../background-blending-image-image-ref.html       |  20 ++++
 .../background-blending-image-image.html           |  22 +++++
 ...ound-blending-isolation-parent-child-color.html |  29 ++++++
 ...ound-blending-isolation-parent-child-image.html |  29 ++++++
 ...ground-blending-isolation-parent-child-ref.html |  19 ++++
 .../background-blending-isolation-ref.html         |  27 ++++++
 .../background-blending-isolation.html             |  31 +++++++
 .../background-blending-lighten-ref.svg            |  22 +++++
 .../css-blending/background-blending-lighten.html  |  14 +++
 .../background-blending-list-repeat-ref.html       |  33 +++++++
 .../background-blending-list-repeat.html           |  24 +++++
 .../background-blending-luminosity-ref.svg         |  22 +++++
 .../background-blending-luminosity.html            |  14 +++
 .../background-blending-moz-element-ref.html       |  22 +++++
 .../background-blending-moz-element.html           |  29 ++++++
 .../background-blending-multiple-images-ref.html   |  33 +++++++
 .../background-blending-multiple-images.html       |  24 +++++
 .../background-blending-multiply-ref.svg           |  22 +++++
 .../css-blending/background-blending-multiply.html |  14 +++
 .../background-blending-normal-ref.svg             |  22 +++++
 .../css-blending/background-blending-normal.html   |  14 +++
 .../background-blending-overlay-ref.svg            |  22 +++++
 .../css-blending/background-blending-overlay.html  |  14 +++
 .../background-blending-saturation-ref.svg         |  22 +++++
 .../background-blending-saturation.html            |  14 +++
 .../background-blending-screen-ref.svg             |  22 +++++
 .../css-blending/background-blending-screen.html   |  14 +++
 .../background-blending-soft-light-ref.svg         |  22 +++++
 .../background-blending-soft-light.html            |  14 +++
 layout/reftests/css-blending/blend-canvas-ref.html |  28 ++++++
 layout/reftests/css-blending/blend-canvas.html     |  29 ++++++
 .../blend-constant-background-color-ref.html       |  22 +++++
 .../blend-constant-background-color.html           |  23 +++++
 .../blend-difference-stacking-ref.html             |  30 ++++++
 .../css-blending/blend-difference-stacking.html    |  30 ++++++
 .../blend-gradient-background-color-ref.html       |  22 +++++
 .../blend-gradient-background-color.html           |  23 +++++
 layout/reftests/css-blending/blend-image-ref.html  |  20 ++++
 layout/reftests/css-blending/blend-image.html      |  21 +++++
 .../reftests/css-blending/blend-isolation-ref.html |  15 +++
 layout/reftests/css-blending/blend-isolation.html  |  28 ++++++
 layout/reftests/css-blending/blend-modes.css       |  26 ++++++
 layout/reftests/css-blending/bug1281593-ref.html   |  40 ++++++++
 layout/reftests/css-blending/bug1281593.html       |  40 ++++++++
 ...ixblendmode-containing-unclipped-stuff-ref.html |  57 ++++++++++++
 ...ed-mixblendmode-containing-unclipped-stuff.html |  51 ++++++++++
 ...city-containing-unclipped-mixblendmode-ref.html |  49 ++++++++++
 ...-opacity-containing-unclipped-mixblendmode.html |  50 ++++++++++
 .../css-blending/mix-blend-mode-952051-ref.html    |  32 +++++++
 .../css-blending/mix-blend-mode-952051.html        |  37 ++++++++
 .../mix-blend-mode-and-filter-ref.html             |  41 ++++++++
 .../css-blending/mix-blend-mode-and-filter-ref.svg |  14 +++
 .../css-blending/mix-blend-mode-and-filter.html    |  37 ++++++++
 .../css-blending/mix-blend-mode-and-filter.svg     |  21 +++++
 ...lend-mode-child-of-blended-has-opacity-ref.html |  40 ++++++++
 ...ix-blend-mode-child-of-blended-has-opacity.html |  45 +++++++++
 .../mix-blend-mode-culling-1207041-ref.html        |  22 +++++
 .../mix-blend-mode-culling-1207041.html            |  23 +++++
 .../mix-blend-mode-dest-alpha-1135271-ref.html     |  21 +++++
 .../mix-blend-mode-dest-alpha-1135271.html         |  22 +++++
 .../mix-blend-mode-nested-976533-ref.html          |  47 ++++++++++
 .../css-blending/mix-blend-mode-nested-976533.html |  45 +++++++++
 .../mix-blend-mode-soft-light-ref.html             |  21 +++++
 .../css-blending/mix-blend-mode-soft-light.html    |  25 +++++
 .../mix-blend-mode-transformed-ref.html            |  26 ++++++
 .../css-blending/mix-blend-mode-transformed.html   |  30 ++++++
 layout/reftests/css-blending/reftest.list          | 103 +++++++++++++++++++++
 138 files changed, 3132 insertions(+)
 create mode 100644 layout/reftests/css-blending/as-image/black100x100.png
 create mode 100644 layout/reftests/css-blending/as-image/blue100x100.png
 create mode 100644 layout/reftests/css-blending/as-image/brown100x100.png
 create mode 100644 layout/reftests/css-blending/as-image/green100x100.jpg
 create mode 100644 layout/reftests/css-blending/as-image/green100x100.png
 create mode 100644 layout/reftests/css-blending/as-image/green100x100_alpha.png
 create mode 100644 layout/reftests/css-blending/as-image/green_square.svg
 create mode 100644 layout/reftests/css-blending/as-image/red100x100.png
 create mode 100644 layout/reftests/css-blending/as-image/red_green.gif
 create mode 100644 layout/reftests/css-blending/as-image/white_square.svg
 create mode 100644 layout/reftests/css-blending/background-blend-mode-body-fixed-ref.html
 create mode 100644 layout/reftests/css-blending/background-blend-mode-body-fixed.html
 create mode 100644 layout/reftests/css-blending/background-blend-mode-body-image-ref.html
 create mode 100644 layout/reftests/css-blending/background-blend-mode-body-image.html
 create mode 100644 layout/reftests/css-blending/background-blend-mode-body-transparent-image-ref.html
 create mode 100644 layout/reftests/css-blending/background-blend-mode-body-transparent-image.html
 create mode 100644 layout/reftests/css-blending/background-blending-alpha-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-alpha.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-attachement-fixed-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-attachement-fixed.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-clip-content-box-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-clip-content-box.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-clip-padding-box-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-clip-padding-box.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-origin-border-box.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-origin-content-box.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-origin-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-position-percentage-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-position-percentage.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-repeat-no-repeat-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-repeat-no-repeat.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-size-contain.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-size-cover.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-size-percentage.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-size-pixels.html
 create mode 100644 layout/reftests/css-blending/background-blending-background-size-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-color-burn-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-color-burn.html
 create mode 100644 layout/reftests/css-blending/background-blending-color-dodge-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-color-dodge.html
 create mode 100644 layout/reftests/css-blending/background-blending-color-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-color.html
 create mode 100644 layout/reftests/css-blending/background-blending-darken-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-darken.html
 create mode 100644 layout/reftests/css-blending/background-blending-difference-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-difference.html
 create mode 100644 layout/reftests/css-blending/background-blending-exclusion-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-exclusion.html
 create mode 100644 layout/reftests/css-blending/background-blending-gradient-color-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-gradient-color.html
 create mode 100644 layout/reftests/css-blending/background-blending-gradient-gradient-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-gradient-gradient.html
 create mode 100644 layout/reftests/css-blending/background-blending-gradient-image-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-gradient-image.html
 create mode 100644 layout/reftests/css-blending/background-blending-hard-light-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-hard-light.html
 create mode 100644 layout/reftests/css-blending/background-blending-hue-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-hue.html
 create mode 100644 layout/reftests/css-blending/background-blending-image-color-959674-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-image-color-959674.html
 create mode 100644 layout/reftests/css-blending/background-blending-image-color-gif-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-image-color-gif.html
 create mode 100644 layout/reftests/css-blending/background-blending-image-color-jpg.html
 create mode 100644 layout/reftests/css-blending/background-blending-image-color-png.html
 create mode 100644 layout/reftests/css-blending/background-blending-image-color-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-image-color-svg-as-data-uri.html
 create mode 100644 layout/reftests/css-blending/background-blending-image-color-svg.html
 create mode 100644 layout/reftests/css-blending/background-blending-image-color-transform3d.html
 create mode 100644 layout/reftests/css-blending/background-blending-image-gradient.html
 create mode 100644 layout/reftests/css-blending/background-blending-image-image-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-image-image.html
 create mode 100644 layout/reftests/css-blending/background-blending-isolation-parent-child-color.html
 create mode 100644 layout/reftests/css-blending/background-blending-isolation-parent-child-image.html
 create mode 100644 layout/reftests/css-blending/background-blending-isolation-parent-child-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-isolation-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-isolation.html
 create mode 100644 layout/reftests/css-blending/background-blending-lighten-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-lighten.html
 create mode 100644 layout/reftests/css-blending/background-blending-list-repeat-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-list-repeat.html
 create mode 100644 layout/reftests/css-blending/background-blending-luminosity-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-luminosity.html
 create mode 100644 layout/reftests/css-blending/background-blending-moz-element-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-moz-element.html
 create mode 100644 layout/reftests/css-blending/background-blending-multiple-images-ref.html
 create mode 100644 layout/reftests/css-blending/background-blending-multiple-images.html
 create mode 100644 layout/reftests/css-blending/background-blending-multiply-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-multiply.html
 create mode 100644 layout/reftests/css-blending/background-blending-normal-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-normal.html
 create mode 100644 layout/reftests/css-blending/background-blending-overlay-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-overlay.html
 create mode 100644 layout/reftests/css-blending/background-blending-saturation-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-saturation.html
 create mode 100644 layout/reftests/css-blending/background-blending-screen-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-screen.html
 create mode 100644 layout/reftests/css-blending/background-blending-soft-light-ref.svg
 create mode 100644 layout/reftests/css-blending/background-blending-soft-light.html
 create mode 100644 layout/reftests/css-blending/blend-canvas-ref.html
 create mode 100644 layout/reftests/css-blending/blend-canvas.html
 create mode 100644 layout/reftests/css-blending/blend-constant-background-color-ref.html
 create mode 100644 layout/reftests/css-blending/blend-constant-background-color.html
 create mode 100644 layout/reftests/css-blending/blend-difference-stacking-ref.html
 create mode 100644 layout/reftests/css-blending/blend-difference-stacking.html
 create mode 100644 layout/reftests/css-blending/blend-gradient-background-color-ref.html
 create mode 100644 layout/reftests/css-blending/blend-gradient-background-color.html
 create mode 100644 layout/reftests/css-blending/blend-image-ref.html
 create mode 100644 layout/reftests/css-blending/blend-image.html
 create mode 100644 layout/reftests/css-blending/blend-isolation-ref.html
 create mode 100644 layout/reftests/css-blending/blend-isolation.html
 create mode 100644 layout/reftests/css-blending/blend-modes.css
 create mode 100644 layout/reftests/css-blending/bug1281593-ref.html
 create mode 100644 layout/reftests/css-blending/bug1281593.html
 create mode 100644 layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff-ref.html
 create mode 100644 layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff.html
 create mode 100644 layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode-ref.html
 create mode 100644 layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-952051-ref.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-952051.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-and-filter-ref.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-and-filter-ref.svg
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-and-filter.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-and-filter.svg
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity-ref.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-culling-1207041-ref.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-culling-1207041.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271-ref.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-nested-976533-ref.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-nested-976533.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-soft-light-ref.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-soft-light.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-transformed-ref.html
 create mode 100644 layout/reftests/css-blending/mix-blend-mode-transformed.html
 create mode 100644 layout/reftests/css-blending/reftest.list

(limited to 'layout/reftests/css-blending')

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
Binary files /dev/null and b/layout/reftests/css-blending/as-image/black100x100.png 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
Binary files /dev/null and b/layout/reftests/css-blending/as-image/blue100x100.png 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
Binary files /dev/null and b/layout/reftests/css-blending/as-image/brown100x100.png 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
Binary files /dev/null and b/layout/reftests/css-blending/as-image/green100x100.jpg 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
Binary files /dev/null and b/layout/reftests/css-blending/as-image/green100x100.png 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
Binary files /dev/null and b/layout/reftests/css-blending/as-image/green100x100_alpha.png 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
Binary files /dev/null and b/layout/reftests/css-blending/as-image/red100x100.png 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
Binary files /dev/null and b/layout/reftests/css-blending/as-image/red_green.gif 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
-- 
cgit v1.2.3