Bug 1243675 - Part 3. Add mask-position property reftest. r=dbaron
authorAstley Chen <aschen@mozilla.com>
Sat, 02 Apr 2016 09:33:26 +0800
changeset 293348 eb10276fd4676d3f3a2a2c5f5dbaa2b8b2056288
parent 293347 dd6c0512cb0527d4267295d99a03de2e6f6e3f10
child 293349 ac8b9a02deb5f704ec366021baec246074aa2428
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 3. Add mask-position property reftest. r=dbaron MozReview-Commit-ID: 5ViQaPZ5BI
layout/reftests/w3c-css/submitted/masking/mask-position-1-ref.html
layout/reftests/w3c-css/submitted/masking/mask-position-1a.html
layout/reftests/w3c-css/submitted/masking/mask-position-1b.html
layout/reftests/w3c-css/submitted/masking/mask-position-1c.html
layout/reftests/w3c-css/submitted/masking/mask-position-2-ref.html
layout/reftests/w3c-css/submitted/masking/mask-position-2a.html
layout/reftests/w3c-css/submitted/masking/mask-position-2b.html
layout/reftests/w3c-css/submitted/masking/mask-position-3-ref.html
layout/reftests/w3c-css/submitted/masking/mask-position-3a.html
layout/reftests/w3c-css/submitted/masking/mask-position-3b.html
layout/reftests/w3c-css/submitted/masking/mask-position-4-ref.html
layout/reftests/w3c-css/submitted/masking/mask-position-4a.html
layout/reftests/w3c-css/submitted/masking/mask-position-4b.html
layout/reftests/w3c-css/submitted/masking/mask-position-4c.html
layout/reftests/w3c-css/submitted/masking/mask-position-4d.html
layout/reftests/w3c-css/submitted/masking/mask-position-5-ref.html
layout/reftests/w3c-css/submitted/masking/mask-position-5.html
layout/reftests/w3c-css/submitted/masking/mask-position-6-ref.html
layout/reftests/w3c-css/submitted/masking/mask-position-6.html
layout/reftests/w3c-css/submitted/masking/mask-position-7-ref.html
layout/reftests/w3c-css/submitted/masking/mask-position-7.html
layout/reftests/w3c-css/submitted/masking/reftest.list
layout/reftests/w3c-css/submitted/masking/support/50x50-opaque-blue.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-1-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position 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 {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+      }
+
+      div.inner {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+
+      #inner1 { right: 10px; bottom: 35px; }
+      #inner2 { right: 30px; bottom: 25px; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="inner1"></div></div>
+    <div class="outer"><div class="inner" id="inner1"></div></div>
+    <div class="outer"><div class="inner" id="inner2"></div></div>
+    <div class="outer"><div class="inner" id="inner2"></div></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-1a.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</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-position">
+    <link rel="match" href="mask-position-1-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+
+      #inner1 { mask-position: right 20% bottom 70%; }
+      #inner2 { mask-position: bottom 70% right 20%; }
+      #inner3 { mask-position: right 30px bottom 25px; }
+      #inner4 { mask-position: bottom 25px right 30px; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="inner1"></div></div>
+    <div class="outer"><div class="inner" id="inner2"></div></div>
+    <div class="outer"><div class="inner" id="inner3"></div></div>
+    <div class="outer"><div class="inner" id="inner4"></div></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-1b.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</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-position">
+    <link rel="match" href="mask-position-1-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+
+      #inner1 { mask-position: left 40px top 15px; }
+      #inner2 { mask-position: top 30% left 80%; }
+      #inner3 { mask-position: left 20px top 25px }
+      #inner4 { mask-position: top 25px left 20px; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="inner1"></div></div>
+    <div class="outer"><div class="inner" id="inner2"></div></div>
+    <div class="outer"><div class="inner" id="inner3"></div></div>
+    <div class="outer"><div class="inner" id="inner4"></div></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-1c.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</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-position">
+    <link rel="match" href="mask-position-1-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+
+      #inner1 { mask-position: left 80% bottom 70%; }
+      #inner2 { mask-position: right 20% top 30%; }
+      #inner3 { mask-position: bottom 50% left 40%; }
+      #inner4 { mask-position: right 60% top 50%; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="inner1"></div></div>
+    <div class="outer"><div class="inner" id="inner2"></div></div>
+    <div class="outer"><div class="inner" id="inner3"></div></div>
+    <div class="outer"><div class="inner" id="inner4"></div></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position 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">
+      #outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      #inner {
+        margin-left: 20px;
+        margin-top: 20px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-2a.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</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-position">
+    <link rel="match" href="mask-position-2-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: left 40% bottom 60%;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-2b.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</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-position">
+    <link rel="match" href="mask-position-2-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: 40% 40%;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-3-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position 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">
+      #outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      #inner {
+        margin-left: 25px;
+        margin-top: 10px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-3a.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</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-position">
+    <link rel="match" href="mask-position-3-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: center bottom 80%;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-3b.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</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-position">
+    <link rel="match" href="mask-position-3-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: center 20%;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position 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">
+      #outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      #inner {
+        margin-left: 0px;
+        margin-top: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4a.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</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-position">
+    <link rel="match" href="mask-position-4-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: left center;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4b.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</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-position">
+    <link rel="match" href="mask-position-4-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: left;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4c.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</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-position">
+    <link rel="match" href="mask-position-4-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: left bottom 50%;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4d.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</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-position">
+    <link rel="match" href="mask-position-4-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask: url(support/50x50-opaque-blue.svg) left no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-5-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position 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">
+      #outer {
+        border: 1px solid black;
+        width: 120px;
+        height: 120px;
+      }
+
+      #inner1 {
+        margin-left: 35px;
+        margin-top: 0px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+
+      #inner2 {
+        margin-left: 35px;
+        margin-top: 20px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner1"></div>
+      <div id="inner2"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-5.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</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-position">
+    <link rel="match" href="mask-position-5-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 120px;
+        height: 120px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: top, bottom;
+        mask-repeat: no-repeat, no-repeat;
+        mask-image: url(support/50x50-opaque-blue.svg),
+                    url(support/50x50-opaque-blue.svg);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-6-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position 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">
+      .outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      .inner {
+        margin-left: 20px;
+        margin-top: 50px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-6.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</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-position">
+    <link rel="match" href="mask-position-6-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      .outer {
+        border: 1px solid black;
+      }
+
+      .outer > div {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+
+      #inner1 {
+        mask-position: left 20px bottom;
+      }
+
+      #inner2 {
+        mask-position: left 40% bottom;
+      }
+
+      #inner3 {
+        mask-position: right 60% bottom;
+      }
+
+      #inner4 {
+        mask-position: right 30px bottom;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div id="inner1"></div></div>
+    <div class="outer"><div id="inner2"></div></div>
+    <div class="outer"><div id="inner3"></div></div>
+    <div class="outer"><div id="inner4"></div></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-7-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position 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">
+      .outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      .inner {
+        margin-left: 50px;
+        margin-top: 20px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-7.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</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-position">
+    <link rel="match" href="mask-position-7-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      .outer {
+        border: 1px solid black;
+      }
+
+      .outer > div {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+
+      #inner1 {
+        mask-position: right top 40%;
+      }
+
+      #inner2 {
+        mask-position: right top 20px;
+      }
+
+      #inner3 {
+        mask-position: right bottom 60%;
+      }
+
+      #inner4 {
+        mask-position: right bottom 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div id="inner1"></div></div>
+    <div class="outer"><div id="inner2"></div></div>
+    <div class="outer"><div id="inner3"></div></div>
+    <div class="outer"><div id="inner4"></div></div>
+  </body>
+</html>
--- a/layout/reftests/w3c-css/submitted/masking/reftest.list
+++ b/layout/reftests/w3c-css/submitted/masking/reftest.list
@@ -15,8 +15,24 @@ fails == mask-mode-b.html mask-mode-ref.
 # 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
 
 # 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
+fails == mask-position-2a.html mask-position-2-ref.html
+fails == mask-position-2b.html mask-position-2-ref.html
+fails == mask-position-3a.html mask-position-3-ref.html
+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
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/50x50-opaque-blue.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0"  width="50" height="50" fill="blue" fill-opacity="1"/>
+</svg>