Bug 1228280 - Part 7. reftest of SVG mask and image mask interleaving;
MozReview-Commit-ID: BfBZTtx4985
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: multiple SVG masks</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <svg height="0">
+ <mask id="mask" x="0" y="0" width="100" height="100" >
+ <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+ <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div {
+ background-color: purple;
+ mask: url(#mask);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+
+ </head>
+
+ <body>
+ <div></div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3a.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: multiple SVG masks</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <svg height="0">
+ <mask id="mask1" x="0" y="0" width="100" height="100" >
+ <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ <mask id="mask2" x="0" y="0" width="100" height="100" >
+ <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div {
+ background-color: purple;
+ mask-image: url(#mask1), url(#mask2);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+
+ </head>
+
+ <body>
+ <div></div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3b.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: interleave SVG mask with image mask </title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <svg height="0">
+ <mask id="mask1" x="0" y="0" width="100" height="100" >
+ <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div {
+ background-color: purple;
+ mask-image: url(support/50x50-opaque-blue.svg), url(#mask1);
+ mask-repeat: no-repeat, repeat;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+
+ </head>
+
+ <body>
+ <div></div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3c.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: interleave SVG mask with image mask </title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <svg height="0">
+ <mask id="mask1" x="0" y="0" width="100" height="100" >
+ <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div {
+ background-color: purple;
+ mask-image: url(#mask1), url(support/50x50-opaque-blue.svg);
+ mask-repeat: repeat-x, no-repeat;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+
+ </head>
+
+ <body>
+ <div></div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3d.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: interleave SVG mask with image mask </title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <svg height="0">
+ <mask id="mask1" x="10%" y="10%" width="80" height="80" >
+ <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div {
+ background-color: purple;
+ mask: url(#mask1), url(support/50x50-opaque-blue.svg);
+ mask-repeat: no-repeat, no-repeat;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+
+ </head>
+
+ <body>
+ <div></div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3e.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: interleave SVG mask with image mask </title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <svg height="0">
+ <mask id="mask1" x="0" y="0" width="100" height="100" >
+ <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div.outter {
+ margin: 0px;
+ padding: 0px;
+ width: 200px;
+ height: 200px;
+ transform: translate(-10px, -10px);
+ }
+ div.inner {
+ background-color: purple;
+ mask-image: url(support/50x50-opaque-blue.svg), url(#mask1);
+ mask-repeat: no-repeat, repeat;
+ /*mask: url(#mask1);*/
+ width: 100px;
+ height: 100px;
+ transform: translate(10px, 10px);
+ }
+ </style>
+
+ </head>
+ <body>
+ <div class="outter">
+ <div class="inner"></div>
+ </div>
+ </body>
+</html>
--- a/layout/reftests/w3c-css/submitted/masking/reftest.list
+++ b/layout/reftests/w3c-css/submitted/masking/reftest.list
@@ -12,16 +12,20 @@ fails == mask-composite-2b.html mask-com
fails == mask-mode-a.html mask-mode-ref.html
fails == mask-mode-b.html mask-mode-ref.html
# mask-image test cases
fails == mask-image-1a.html mask-image-1-ref.html
fails == mask-image-1b.html mask-image-1-ref.html
fails == mask-image-1c.html mask-image-1-ref.html
fails == mask-image-2.html mask-image-2-ref.html
+fails == mask-image-3a.html mask-image-3-ref.html
+fails == mask-image-3b.html mask-image-3-ref.html
+fails == mask-image-3c.html mask-image-3-ref.html
+fails == mask-image-3d.html mask-image-3-ref.html
# mask-clip test cases
fails == mask-clip-1.html mask-clip-1-ref.html
# mask-position test cases
fails == mask-position-1a.html mask-position-1-ref.html
fails == mask-position-1b.html mask-position-1-ref.html
fails == mask-position-1c.html mask-position-1-ref.html