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 170705 b629a1dfd431259bbd1df621906858c2c477df6e
parent 170704 cc15ce931273d9aee9139490ca6b781ae4533c3f
child 170706 24f3ddfd7c48d75c26b3ba656a4f9bc3dac5ed28
push id270
push userpvanderbeken@mozilla.com
push dateThu, 06 Mar 2014 09:24:21 +0000
reviewersroc, heycam
bugs970348
milestone30.0a1
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,