Bug 1243675 - Part 4. Add mask-repeat property reftest. r=dbaron
authorAstley Chen <aschen@mozilla.com>
Sat, 02 Apr 2016 09:33:26 +0800
changeset 293349 ac8b9a02deb5f704ec366021baec246074aa2428
parent 293348 eb10276fd4676d3f3a2a2c5f5dbaa2b8b2056288
child 293350 ceee74a15bb1e73d4d819927b84e56b46d838312
push id30178
push usercbook@mozilla.com
push dateFri, 15 Apr 2016 09:42:06 +0000
treeherdermozilla-central@afd82f887093 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs1243675
milestone48.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 1243675 - Part 4. Add mask-repeat property reftest. r=dbaron MozReview-Commit-ID: 7DO9BmHhx8A
layout/reftests/w3c-css/submitted/masking/mask-repeat-1-ref.html
layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html
layout/reftests/w3c-css/submitted/masking/mask-repeat-2-ref.html
layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html
layout/reftests/w3c-css/submitted/masking/mask-repeat-3-ref.html
layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html
layout/reftests/w3c-css/submitted/masking/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        width: 128px;
+        height: 128px;
+        position: relative;
+        border: 1px solid black;
+      }
+
+      div.inner {
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        background-color: purple;
+      }
+
+      #pos-top-left { left: 0; top: 0; }
+      #pos-top-right { right: 0; top: 0; }
+      #pos-bottom-left { left: 0; bottom: 0; }
+      #pos-bottom-right { right: 0; bottom: 0; }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner" id="pos-top-left"></div>
+      <div class="inner" id="pos-top-right"></div>
+      <div class="inner" id="pos-bottom-left"></div>
+      <div class="inner" id="pos-bottom-right"></div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-top-left"></div>
+      <div class="inner" id="pos-top-right"></div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-top-left"></div>
+      <div class="inner" id="pos-bottom-left"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer 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="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">
+    <link rel="match" href="mask-repeat-1-ref.html">
+    <meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 128px;
+        height: 128px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+      }
+
+      #no-repeat {
+        mask-repeat: no-repeat no-repeat;
+      }
+      #repeat {
+        mask-repeat: repeat repeat;
+      }
+      #repeat-x {
+        mask-repeat: repeat no-repeat;
+      }
+      #repeat-y {
+        mask-repeat: no-repeat repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner" id="no-repeat"></div></div>
+    <div class="outer"><div class="inner" id="repeat"></div></div>
+    <div class="outer"><div class="inner" id="repeat-x"></div></div>
+    <div class="outer"><div class="inner" id="repeat-y"></div></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        width: 128px;
+        height: 128px;
+        position: relative;
+        border: 1px solid black;
+      }
+
+      div.inner {
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        background-color: purple;
+      }
+
+      #pos-top-left { left: 0; top: 0; }
+      #pos-top-right { right: 0; top: 0; }
+      #pos-bottom-left { left: 0; bottom: 0; }
+      #pos-bottom-right { right: 0; bottom: 0; }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner" id="pos-top-left"></div>
+      <div class="inner" id="pos-top-right"></div>
+      <div class="inner" id="pos-bottom-left"></div>
+      <div class="inner" id="pos-bottom-right"></div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-top-left"></div>
+      <div class="inner" id="pos-top-right"></div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-top-left"></div>
+      <div class="inner" id="pos-bottom-left"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer 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="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">
+    <link rel="match" href="mask-repeat-2-ref.html">
+    <meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 128px;
+        height: 128px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+      }
+
+      #space {
+        mask-repeat: space;
+      }
+      #space-x {
+        mask-repeat: space no-repeat;
+      }
+      #space-y {
+        mask-repeat: no-repeat space;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="space"></div></div>
+    <div class="outer"><div class="inner" id="space-x"></div></div>
+    <div class="outer"><div class="inner" id="space-y"></div></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        width: 150px;
+        height: 150px;
+        border: 1px solid black;
+      }
+
+      .color {
+        background-color: purple;
+      }
+
+      #round {
+        width: 150px;
+        height: 150px;
+      }
+
+      #round-x {
+        width: 150px;
+        height: 50px;
+      }
+
+      #round-y {
+        width: 50px;
+        height: 150px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="color" id="round"></div></div>
+    <div class="outer"><div class="color" id="round-x"></div></div>
+    <div class="outer"><div class="color" id="round-y"></div></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer 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="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">
+    <link rel="match" href="mask-repeat-3-ref.html">
+    <meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 150px;
+        height: 150px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+      }
+
+      #round {
+        mask-repeat: round;
+      }
+      #round-x {
+        mask-repeat: round no-repeat;
+      }
+      #round-y {
+        mask-repeat: no-repeat round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="round"></div></div>
+    <div class="outer"><div class="inner" id="round-x"></div></div>
+    <div class="outer"><div class="inner" id="round-y"></div></div>
+  </body>
+</html>
--- a/layout/reftests/w3c-css/submitted/masking/reftest.list
+++ b/layout/reftests/w3c-css/submitted/masking/reftest.list
@@ -31,8 +31,13 @@ fails == mask-position-3a.html mask-posi
 fails == mask-position-3b.html mask-position-3-ref.html
 fails == mask-position-4a.html mask-position-4-ref.html
 fails == mask-position-4b.html mask-position-4-ref.html
 fails == mask-position-4c.html mask-position-4-ref.html
 fails == mask-position-4d.html mask-position-4-ref.html
 fails == mask-position-5.html mask-position-5-ref.html
 fails == mask-position-6.html mask-position-6-ref.html
 fails == mask-position-7.html mask-position-7-ref.html
+
+# mask-repeat test cases
+fails == mask-repeat-1.html mask-repeat-1-ref.html # bug 1258623
+fails == mask-repeat-2.html mask-repeat-2-ref.html # bug 1258626
+fails == mask-repeat-3.html mask-repeat-3-ref.html # bug 1258626