diff --git a/layout/reftests/bugs/1412375-ref.html b/layout/reftests/bugs/1412375-ref.html
new file mode 100644
index 000000000000..6589ec80206a
--- /dev/null
+++ b/layout/reftests/bugs/1412375-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Masks need to cause grouping / intermediate surfaces</title>
+<style>
+
+.outer {
+  filter: opacity(50%);
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+}
+
+.one {
+  background: green;
+}
+
+.another {
+  background: blue;
+  margin-top: -50px;
+  margin-left: 50px;
+}
+
+</style>
+
+<div class="outer">
+  <div class="one box"></div>
+  <div class="another box"></div>
+</div>
diff --git a/layout/reftests/bugs/1412375.html b/layout/reftests/bugs/1412375.html
new file mode 100644
index 000000000000..caeacfd169ff
--- /dev/null
+++ b/layout/reftests/bugs/1412375.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Masks need to cause grouping / intermediate surfaces</title>
+<style>
+
+.outer {
+  /* should give similar results to opacity: 0.5 */
+  mask: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+}
+
+.one {
+  background: green;
+}
+
+.another {
+  background: blue;
+  margin-top: -50px;
+  margin-left: 50px;
+}
+
+</style>
+
+<div class="outer">
+  <div class="one box"></div>
+  <div class="another box"></div>
+</div>
diff --git a/layout/reftests/bugs/reftest.list b/layout/reftests/bugs/reftest.list
index 15f6609b2e51..57a9df1952be 100644
--- a/layout/reftests/bugs/reftest.list
+++ b/layout/reftests/bugs/reftest.list
@@ -2066,3 +2066,4 @@ fuzzy-if(Android,66,574) fuzzy-if(d2d,89,777) fuzzy-if(!Android&&!d2d,1,31219) =
 pref(layout.css.moz-document.url-prefix-hack.enabled,true) == 1446470.html 1035091-ref.html
 pref(layout.css.moz-document.url-prefix-hack.enabled,false) == 1446470-2.html 1035091-ref.html
 test-pref(layout.css.prefixes.gradients,false) == 1451874.html 1451874-ref.html
+fuzzy-if(!(webrender&&gtkWidget),1-2,17500-17500) == 1412375.html 1412375-ref.html
