Bug 1272859: Part 2. SVG mask on border area reftest r=mstange
authorcku <cku@mozilla.com>
Mon, 30 May 2016 01:28:15 +0800
changeset 302051 7c40761cbc60899a9a50e8c92deaedf1d0faf677
parent 302050 657006fadf7f94dedfbda4be7f01fd29e30920f2
child 302052 a58b9ab5dff082130cfa6d4c8cac8f5d09d204a2
push id78556
push usercku@mozilla.com
push dateSat, 18 Jun 2016 07:34:59 +0000
treeherdermozilla-inbound@7c40761cbc60 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmstange
bugs1272859
milestone50.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 1272859: Part 2. SVG mask on border area reftest r=mstange 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