Bug 1311270 - Part 9. Test cases for new mask-clip/mask-origin values. draft
authorcku <cku@mozilla.com>
Fri, 25 Nov 2016 00:10:23 +0800
changeset 445798 49f1c89959c6f43cda9fa7cc017b61ddee0329e9
parent 445797 1ff830c10f2469db3d11c405a664021c7d89b312
child 538612 393d0ae68640b174f9389b80fdfe8873b8557dd4
push id37609
push userbmo:cku@mozilla.com
push dateWed, 30 Nov 2016 08:03:11 +0000
bugs1311270
milestone53.0a1
Bug 1311270 - Part 9. Test cases for new mask-clip/mask-origin values. MozReview-Commit-ID: 2zdh6tHXXqg
layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html
layout/reftests/w3c-css/submitted/masking/mask-clip-1.html
layout/reftests/w3c-css/submitted/masking/mask-clip-2-ref.html
layout/reftests/w3c-css/submitted/masking/mask-clip-2.html
layout/reftests/w3c-css/submitted/masking/mask-origin-3-ref.html
layout/reftests/w3c-css/submitted/masking/mask-origin-3.html
layout/reftests/w3c-css/submitted/masking/reftest.list
--- a/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html
@@ -27,16 +27,24 @@
       }
 
       div.content {
         left: 210px;
         margin: 15px 13px;
         width: 40px;
         height: 11px;
       }
+
+      div.no-clip {
+        left: 310px;
+        margin: 1px 4px;
+        width: 100px;
+        height: 25px;
+      }
     </style>
   </head>
   <body>
     <div class="color border"></div>
     <div class="color padding"></div>
     <div class="color content"></div>
+    <div class="color no-clip"></div>
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html
@@ -2,19 +2,19 @@
 <html>
   <head>
     <meta charset="utf-8">
     <title>CSS Masking: mask-clip: clip mask image</title>
     <link rel="author" title="Astley Chen" href="mailto:aschen@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-clip">
     <link rel="match" href="mask-clip-1-ref.html">
-    <meta name="assert" content="border-box, padding-box, and content-box values of mask-clip should clip to the appropriate boxes.">
+    <meta name="assert" content="border-box, padding-box, content-box and no-clip values of mask-clip should clip to the appropriate boxes.">
     <style type="text/css">
-      div {
+      div.outer {
         /*
          * content box: 40 x 20
          * padding box: 52 x 38
          * border  box: 60 x 50
          * margin  box: 66 x 54
          */
         background-color: purple;
         position: absolute;
@@ -42,16 +42,36 @@
         left: 110px;
         mask-clip: padding-box;
       }
 
       div.content {
         left: 210px;
         mask-clip: content-box;
       }
+
+      div.no-clip {
+        background-color: yellow;
+        left: 310px;
+        mask-clip: no-clip;
+      }
+
+      div.no-clip-inner {
+        background-color: purple;
+        position: absolute;
+        /* allign with border area of the parent*/
+        top: -8px;
+        left: -6px;
+        width: 100px;
+        height: 50px;
+      }
+
     </style>
   </head>
   <body>
     <div class="outer mask border"></div>
     <div class="outer mask padding"></div>
     <div class="outer mask content"></div>
+    <div class="outer mask no-clip">
+      <div class="no-clip-inner"></div>
+    </div>
   </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-2-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS mask-clip reference</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      svg {
+        position: absolute;
+        top: 10px;
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <svg width="200" height="200" style="left: 10px;">
+      <rect x="20" y="20" width="100" height="100" fill="blue"/>
+    </svg>
+    <svg width="200" height="200" style="left: 220px;">
+      <rect x="50" y="50" width="50" height="50" fill="blue"/>
+    </svg>
+    <svg width="200" height="200" style="left: 10px; top: 220px;">
+      <rect x="50" y="50" width="50" height="50" fill="green"/>
+      <rect x="60" y="60" width="40" height="40" fill="blue"/>
+    </svg>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-2.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-clip: clip mask image</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-clip">
+    <link rel="match" href="mask-clip-2-ref.html">
+    <meta name="assert" content="fill-box, stroke-box and view-box values of mask-clip should clip to the appropriate boxes.">
+    <style type="text/css">
+      svg {
+        position: absolute;
+        top: 10px;
+        border: 1px solid black;
+      }
+
+      rect.mask {
+        fill: blue;
+        mask-origin: fill-box;
+        mask-repeat: no-repeat;
+        mask-image: url(support/50x50-opaque-blue.svg);
+      }
+
+      rect.view {
+        mask-clip: view-box;
+      }
+
+      rect.fill {
+        mask-clip: fill-box;
+      }
+
+      rect.stroke {
+        mask-clip: stroke-box;
+      }
+    </style>
+  </head>
+  <body>
+    <svg width="200" height="200" viewBox="100 100 100 100" preserveAspectRatio="none" style="left: 10px;">
+      <rect class="view mask" x="110" y="110" width="50" height="100"/>
+    </svg>
+    <svg width="200" height="200" style="left: 220px;">
+      <rect class="fill mask" x="50" y="50" width="150" height="150"/>
+    </svg>
+    <svg width="200" height="200" style="left: 10px; top: 220px;">
+      <rect class="stroke mask" x="50" y="50" width="100" height="100" stroke="green" stroke-width="20"/>
+    </svg>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-3-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-origin: mask positioning area</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      svg {
+        position: absolute;
+        top: 10px;
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <svg width="200" height="200" style="left: 10px;">
+      <rect x="50" y="50" width="50" height="50" fill="blue"/>
+    </svg>
+    <svg width="200" height="200" style="left: 240px;">
+      <rect x="50" y="50" width="50" height="50" fill="green"/>
+      <rect x="60" y="60" width="40" height="40" fill="blue"/>
+    </svg>
+    <svg width="200" height="200" style="left: 10px; top: 220px;">
+      <rect x="60" y="40" width="50" height="50" fill="green"/>
+      <rect x="80" y="60" width="30" height="30" fill="blue"/>
+    </svg>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-3.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-origin: mask positioning 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="https://www.w3.org/TR/css-masking-1/#the-mask-origin">
+    <link rel="match" href="mask-origin-3-ref.html">
+    <meta name="assert" content="Test checks whether setting mask position area works correctly or not.">
+    <style type="text/css">
+      svg {
+        position: absolute;
+        top: 10px;
+        border: 1px solid black;
+      }
+      rect.mask {
+        fill: blue;
+        mask-origin: fill-box;
+        mask-clip: fill-box;
+        mask-repeat: no-repeat;
+        mask-image: url(support/50x50-opaque-blue.svg);
+      }
+
+      rect.view {
+        mask-origin: view-box;
+        mask-clip: view-box;
+      }
+
+      rect.fill {
+        mask-origin: fill-box;
+        mask-clip: stroke-box;
+      }
+
+      rect.stroke {
+        mask-origin: stroke-box;
+        mask-clip: stroke-box;
+      }
+    </style>
+  </head>
+  <body>
+    <svg width="200" height="200" viewBox="100 100 100 100" preserveAspectRatio="none" style="left: 10px;">
+      <rect class="view mask" x="125" y="125" width="100" height="100"/>
+    </svg>
+    <svg width="200" height="200" style="left: 240px;">
+      <rect class="fill mask" x="50" y="50" width="80" height="80" stroke="green" stroke-width="20"/>
+    </svg>
+    <svg width="200" height="200" style="left: 10px; top: 220px;">
+      <rect class="stroke mask" x="70" y="50" width="80" height="80" stroke="green" stroke-width="20"/>
+    </svg>
+  </body>
+</html>
--- a/layout/reftests/w3c-css/submitted/masking/reftest.list
+++ b/layout/reftests/w3c-css/submitted/masking/reftest.list
@@ -30,16 +30,17 @@ pref(layout.css.clip-path-shapes.enabled
 fuzzy-if(skiaContent,71,203) == mask-image-3i.html mask-image-3-ref.html
 == mask-image-4a.html blank.html
 == mask-image-4b.html blank.html
 == mask-image-5.html mask-image-5-ref.html
 == mask-image-6.html mask-image-6-ref.html
 
 # mask-clip test cases
 == mask-clip-1.html mask-clip-1-ref.html
+== mask-clip-2.html mask-clip-2-ref.html
 
 # mask-position test cases
 == mask-position-1a.html mask-position-1-ref.html
 == mask-position-1b.html mask-position-1-ref.html
 == mask-position-1c.html mask-position-1-ref.html
 == mask-position-2a.html mask-position-2-ref.html
 == mask-position-2b.html mask-position-2-ref.html
 == mask-position-3a.html mask-position-3-ref.html
@@ -55,16 +56,17 @@ fuzzy-if(skiaContent,71,203) == mask-ima
 # mask-repeat test cases
 == mask-repeat-1.html mask-repeat-1-ref.html
 == mask-repeat-2.html mask-repeat-2-ref.html
 == mask-repeat-3.html mask-repeat-3-ref.html
 
 # mask-origin test cases
 == mask-origin-1.html mask-origin-1-ref.html
 fails == mask-origin-2.html mask-origin-2-ref.html # bug 1260094
+== mask-origin-3.html mask-origin-3-ref.html
 
 # mask-size test cases
 == mask-size-auto.html mask-size-auto-ref.html
 == mask-size-auto-auto.html mask-size-auto-ref.html
 == mask-size-auto-length.html mask-size-auto-length-ref.html
 == mask-size-auto-percent.html mask-size-auto-length-ref.html
 == mask-size-contain-clip-border.html mask-size-contain-clip-border-ref.html
 == mask-size-contain-clip-padding.html mask-size-contain-clip-padding-ref.html