Bug 1272859: Part 2. SVG mask on border area reftest draft
authorcku <cku@mozilla.com>
Mon, 30 May 2016 01:28:15 +0800
changeset 377661 a16370c92852af4dd01a5b5384ea32935ba5843d
parent 377660 2da4030becc8c858878e7e90c10d8b4b5f8d07a4
child 377662 0afc478a116fd7a9e4a50015ad1d8102819f8ab1
push id20851
push usercku@mozilla.com
push dateSat, 11 Jun 2016 07:39:42 +0000
bugs1272859
milestone50.0a1
Bug 1272859: Part 2. SVG mask on border area reftest MozReview-Commit-ID: Cl8FoMTqt2v
layout/reftests/w3c-css/submitted/masking/mask-image-3f.html
layout/reftests/w3c-css/submitted/masking/mask-image-3g.html
layout/reftests/w3c-css/submitted/masking/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3f.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: SVG masks apply on border area</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+    <link rel="match" href="mask-composite-3-ref.html">
+    <meta name="assert" content="Test checks whether SVG mask layer can be positioned on box-shadow area correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="-100" y="-100" width="300" height="300" >
+        <rect x="-100" y="-100" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+      <mask id="mask2" x="-100" y="-100" width="300" height="300" >
+        <circle cx="-50" cy="-50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: red;
+        mask-image: url(#mask1), url(#mask2);
+        box-shadow: 0 0 0 100px purple;
+        width: 100px;
+        height: 100px;
+        position: relative;
+        left: 100px;
+        top: 100px;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3g.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: SVG masks apply on border area</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+    <link rel="match" href="mask-composite-3-ref.html">
+    <meta name="assert" content="Test checks whether apply transfrom to a SVG mask layer works correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="-100" y="-100" width="300" height="300" >
+        <rect x="-100" y="-100" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+      <mask id="mask2" x="-100" y="-100" width="300" height="300" >
+        <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, -20px);
+      }
+      div.inner {
+        background-color: red;
+        mask-image: url(#mask1), url(#mask2);
+        mask-repeat: no-repeat, no-repeat;
+        box-shadow: 0 0 0 100px purple;
+        position: relative;
+        width: 100px;
+        height: 100px;
+        left: 100px;
+        top: 100px;
+        transform: translate(10px, 20px);
+      }
+    </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
@@ -20,16 +20,18 @@ fails == mask-image-1a.html mask-image-1
 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
 fails == mask-image-3e.html mask-image-3-ref.html
+fails == mask-image-3f.html mask-image-3-ref.html
+fails == mask-image-3g.html mask-image-3-ref.html
 fails == mask-image-4a.html blank.html
 fails == mask-image-4b.html blank.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