Bug 970348 - Add background-blend-mode reftests corresponding to the csswg test plan. r=roc, r=heycam
authorHoria Iosif Olaru <olaru@adobe.com>
Tue, 25 Feb 2014 08:40:54 -0500
changeset 187584 b629a1dfd431259bbd1df621906858c2c477df6e
parent 187583 cc15ce931273d9aee9139490ca6b781ae4533c3f
child 187585 24f3ddfd7c48d75c26b3ba656a4f9bc3dac5ed28
push id3503
push userraliiev@mozilla.com
push dateMon, 28 Apr 2014 18:51:11 +0000
treeherdermozilla-beta@c95ac01e332e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersroc, heycam
bugs970348
milestone30.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 970348 - Add background-blend-mode reftests corresponding to the csswg test plan. r=roc, r=heycam * 5.3.1: Blending between the background layers and the background color for an element with background-blend-mode. Most of section 5.3.1 is covered by other tests. Add the missing tests of the 5.3.1 section of the test plan. - Test 9: SVG image and background color (SVG as data:uri) - Test 10: Animated gif image and background color - Test 12: background-blend-mode on element with 3D transform * 5.3.2: Background layers do not blend with content outside the background (or behind the element). - Implementation of tests 2 and 3. Test 1 is already covered by background-blending-isolation.html. * 5.3.6: background-blend-mode for an element with background-position * 5.3.7: background-blend-mode for an element with background-size * 5.3.8: background-blend-mode for an element with background-repeat * 5.3.9: background-blend-mode for an element with background-clip * 5.3.10: background-blend-mode for an element with background-origin * 5.3.11: background-blend-mode for an element with background-attachement * Add extra tests for the background-blend-mode CSS property: Add some invalid values to the background-blend-mode property definition so that it can benefit from existing invalid property tests.
layout/reftests/css-blending/as-image/green_square.svg
layout/reftests/css-blending/as-image/red_green.gif
layout/reftests/css-blending/as-image/white_square.svg
layout/reftests/css-blending/background-blending-background-attachement-fixed-ref.html
layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll-ref.html
layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll.html
layout/reftests/css-blending/background-blending-background-attachement-fixed.html
layout/reftests/css-blending/background-blending-background-clip-content-box-ref.html
layout/reftests/css-blending/background-blending-background-clip-content-box.html
layout/reftests/css-blending/background-blending-background-clip-padding-box-ref.html
layout/reftests/css-blending/background-blending-background-clip-padding-box.html
layout/reftests/css-blending/background-blending-background-origin-border-box.html
layout/reftests/css-blending/background-blending-background-origin-content-box.html
layout/reftests/css-blending/background-blending-background-origin-ref.html
layout/reftests/css-blending/background-blending-background-position-percentage-ref.html
layout/reftests/css-blending/background-blending-background-position-percentage.html
layout/reftests/css-blending/background-blending-background-repeat-no-repeat-ref.html
layout/reftests/css-blending/background-blending-background-repeat-no-repeat.html
layout/reftests/css-blending/background-blending-background-size-contain.html
layout/reftests/css-blending/background-blending-background-size-cover.html
layout/reftests/css-blending/background-blending-background-size-percentage.html
layout/reftests/css-blending/background-blending-background-size-pixels.html
layout/reftests/css-blending/background-blending-background-size-ref.html
layout/reftests/css-blending/background-blending-image-color-gif-ref.html
layout/reftests/css-blending/background-blending-image-color-gif.html
layout/reftests/css-blending/background-blending-image-color-svg-as-data-uri.html
layout/reftests/css-blending/background-blending-image-color-transform3d.html
layout/reftests/css-blending/background-blending-isolation-parent-child-color.html
layout/reftests/css-blending/background-blending-isolation-parent-child-image.html
layout/reftests/css-blending/background-blending-isolation-parent-child-ref.html
layout/reftests/css-blending/reftest.list
layout/style/test/property_database.js
--- a/layout/reftests/css-blending/as-image/green_square.svg
+++ b/layout/reftests/css-blending/as-image/green_square.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
-  <svg><rect width="100%" height="100%" fill="#00FF00"/></svg>
+  <rect width="100%" height="100%" fill="#00FF00"/>
 </svg>
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..c86b56d4121df62487d63e3f42464241e23da610
GIT binary patch
literal 317
zc${<hbhEHbOkqf2n8?8Jp8<sbF){&Z#sA!Xt|7tBjsdPldIrplAfcZuEGa+*IzTo9
zNDBi~aZCTo({K3~&)IUTd-J_Lzxmr9c}#oOx$M=cZSS~`fAYEht@rt_bKn2*^Ki8v
zS@f~PM{D|-WuG~Fy_R2D^|kA4*7iH=zH{?+AAhpxXOG|N>u<LG=IuZI{L8Mtedk|)
p|FiEuzl4T`M?^+N$BY#_PTY9$gCjEn><-ox1|}4D^bCMItO2)Opkx35
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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
new file mode 100644
--- /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>
new file mode 100644
--- /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>
+
+
+
+
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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
new file mode 100644
--- /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>
--- a/layout/reftests/css-blending/reftest.list
+++ b/layout/reftests/css-blending/reftest.list
@@ -31,8 +31,44 @@ fuzzy-if(azureQuartz,2,8000) fuzzy-if(d2
 pref(layout.css.background-blend-mode.enabled,true) == background-blending-multiply.html background-blending-multiply-ref.svg
 pref(layout.css.background-blend-mode.enabled,true) == background-blending-normal.html background-blending-normal-ref.svg
 fuzzy-if(azureSkia||gtk2Widget,1,1600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-overlay.html background-blending-overlay-ref.svg
 fuzzy-if(d2d,1,1600) fuzzy-if(azureSkia||gtk2Widget,2,12800) fuzzy-if(OSX==10.6,1,1600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-saturation.html background-blending-saturation-ref.svg
 fuzzy-if(d2d||azureSkia||gtk2Widget,1,1600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-screen.html background-blending-screen-ref.svg
 fuzzy-if(azureQuartz,1,1600) fuzzy-if(d2d||azureSkia||gtk2Widget,10,4800) pref(layout.css.background-blend-mode.enabled,true) == background-blending-soft-light.html background-blending-soft-light-ref.svg
 
 fuzzy-if(azureQuartz,2,40000) fuzzy-if(azureSkia||d2d||gtk2Widget,1,40000) pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-color-959674.html background-blending-image-color-959674-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
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-color-svg-as-data-uri.html background-blending-image-color-ref.html
+# Test 10
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-color-gif.html background-blending-image-color-gif-ref.html
+pref(layout.css.background-blend-mode.enabled,true) == 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
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-isolation-parent-child-color.html background-blending-isolation-parent-child-ref.html
+pref(layout.css.background-blend-mode.enabled,true) == 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
+pref(layout.css.background-blend-mode.enabled,true) == 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
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-size-contain.html background-blending-background-size-ref.html
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-size-cover.html background-blending-background-size-ref.html
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-size-percentage.html background-blending-background-size-ref.html
+pref(layout.css.background-blend-mode.enabled,true) == 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
+pref(layout.css.background-blend-mode.enabled,true) == 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
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-clip-content-box.html background-blending-background-clip-content-box-ref.html
+pref(layout.css.background-blend-mode.enabled,true) == 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
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-origin-border-box.html background-blending-background-origin-ref.html
+pref(layout.css.background-blend-mode.enabled,true) == 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
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-attachement-fixed.html background-blending-background-attachement-fixed-ref.html
+pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-attachement-fixed-scroll.html background-blending-background-attachement-fixed-scroll-ref.html
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -4895,17 +4895,17 @@ if (SpecialPowers.getBoolPref("layout.cs
 if (SpecialPowers.getBoolPref("layout.css.background-blend-mode.enabled")) {
 	gCSSProperties["background-blend-mode"] = {
 		domProp: "backgroundBlendMode",
 		inherited: false,
 		type: CSS_TYPE_LONGHAND,
 		initial_values: [ "normal" ],
 		other_values: [ "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn",
 			"hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity" ],
-		invalid_values: []
+		invalid_values: ["none", "10px", "multiply multiply"]
 	};
 }
 
 if (SpecialPowers.getBoolPref("layout.css.will-change.enabled")) {
 	gCSSProperties["will-change"] = {
 		domProp: "willChange",
 		inherited: false,
 		type: CSS_TYPE_LONGHAND,