Bug 1243675 - Part 6. Add mask-size property reftest. r=dbaron
authorAstley Chen <aschen@mozilla.com>
Fri, 15 Apr 2016 12:07:14 +0800
changeset 331222 15a4d633bd2d983566e22a7989af17ed55fd9f21
parent 331221 ceee74a15bb1e73d4d819927b84e56b46d838312
child 331223 8de93854b963a067cc672d99295b452058297be8
push id6048
push userkmoir@mozilla.com
push dateMon, 06 Jun 2016 19:02:08 +0000
treeherdermozilla-beta@46d72a56c57d [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 6. Add mask-size property reftest. r=dbaron MozReview-Commit-ID: AKYv1z4rBCV
layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html
layout/reftests/w3c-css/submitted/masking/mask-size-auto-length-ref.html
layout/reftests/w3c-css/submitted/masking/mask-size-auto-length.html
layout/reftests/w3c-css/submitted/masking/mask-size-auto-percent.html
layout/reftests/w3c-css/submitted/masking/mask-size-auto-ref.html
layout/reftests/w3c-css/submitted/masking/mask-size-auto.html
layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border-ref.html
layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border.html
layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding-ref.html
layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding.html
layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty-ref.html
layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty.html
layout/reftests/w3c-css/submitted/masking/mask-size-contain-ref.html
layout/reftests/w3c-css/submitted/masking/mask-size-contain.html
layout/reftests/w3c-css/submitted/masking/mask-size-cover-ref.html
layout/reftests/w3c-css/submitted/masking/mask-size-cover.html
layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html
layout/reftests/w3c-css/submitted/masking/mask-size-length-length-ref.html
layout/reftests/w3c-css/submitted/masking/mask-size-length-length.html
layout/reftests/w3c-css/submitted/masking/mask-size-length-percent-ref.html
layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.html
layout/reftests/w3c-css/submitted/masking/mask-size-length.html
layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.html
layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.html
layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-ref.html
layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch-ref.html
layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch.html
layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.html
layout/reftests/w3c-css/submitted/masking/mask-size-percent.html
layout/reftests/w3c-css/submitted/masking/reftest.list
layout/reftests/w3c-css/submitted/masking/support/50x100-opaque-blue.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-auto-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-size: auto auto;
+      }
+    </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-size-auto-length-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 20px;
+        height: 20px;
+        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-size-auto-length.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-auto-length-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 64px;
+        height: 128px;
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-size: auto 20px;
+      }
+    </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-size-auto-percent.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-auto-length-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 64px;
+        height: 128px;
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-size: auto 15.625%;
+      }
+    </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-size-auto-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        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-size-auto.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-auto-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-size: auto;
+      }
+    </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-size-contain-clip-border-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 64px;
+        height: 64px;
+        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-size-contain-clip-border.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-contain-clip-border-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        border: 20px solid transparent;
+        width: 24px;
+        height: 88px;
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-clip: border-box;
+        mask-origin: border-box;
+        mask-size: contain;
+      }
+    </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-size-contain-clip-padding-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        border: 20px solid white;
+        width: 24px;
+        height: 88px;
+      }
+
+      #innermost {
+        width: 24px;
+        height: 24px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner">
+        <div id="innermost"></div>
+      </div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-contain-clip-padding-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        background-color: purple;
+        border: 20px solid transparent;
+        width: 24px;
+        height: 88px;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-clip: padding-box;
+        mask-origin: padding-box;
+        mask-size: contain;
+      }
+    </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-size-contain-position-fifty-fifty-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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: 64px;
+        height: 128px;
+      }
+
+      #inner1 {
+        width: 64px;
+        height: 32px;
+      }
+
+      #inner2 {
+        width: 64px;
+        height: 64px;
+        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-size-contain-position-fifty-fifty.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-contain-position-fifty-fifty-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: 50% 50%;
+      }
+    </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-size-contain-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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: 10px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 64px;
+        height: 64px;
+        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-size-contain.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-contain-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 10px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-size: contain;
+      }
+    </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-size-cover-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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: 10px solid transparent;
+        width: 64px;
+        height: 128px;
+        background-clip: content-box;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-cover.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-cover-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      #outer {
+        border: 10px solid black;
+        width: 64px;
+        height: 128px;
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-origin: content-box;
+        mask-clip: content-box;
+        mask-size: cover;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-length-length-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x100-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-size: 32px auto;
+      }
+    </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-size-length-length-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 32px;
+        height: 64px;
+        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-size-length-length.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-length-length-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x100-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-size: 32px 64px;
+      }
+    </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-size-length-percent-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 16px;
+        height: 32px;
+        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-size-length-percent.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-length-percent-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x100-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-size: 16px 25%;
+      }
+    </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-size-length.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-length-length-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x100-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-size: 32px;
+      }
+    </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-size-percent-auto.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-percent-percent-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-size: 50% auto;
+      }
+    </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-size-percent-length.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-percent-percent-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-size: 50% 32px;
+      }
+    </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-size-percent-percent-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 32px;
+        height: 32px;
+        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-size-percent-percent-stretch-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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 {
+        width: 60px;
+        height: 120px;
+      }
+
+      #outer {
+        border: 10px solid black;
+      }
+
+      #inner {
+        height: 60px;
+        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-size-percent-percent-stretch.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-percent-percent-stretch-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 60px;
+        height: 120px;
+      }
+
+      #outer {
+        border: 10px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/transparent-100x50-blue-100x50.svg);
+        mask-repeat: no-repeat;
+        mask-size: 100% 100%;
+      }
+    </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-size-percent-percent.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-percent-percent-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-size: 50% 25%;
+      }
+    </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-size-percent.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</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-size">
+    <link rel="match" href="mask-size-percent-percent-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-size: 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
--- a/layout/reftests/w3c-css/submitted/masking/reftest.list
+++ b/layout/reftests/w3c-css/submitted/masking/reftest.list
@@ -40,8 +40,28 @@ fails == mask-position-7.html mask-posit
 # 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
 
 # mask-origin test cases
 fails == mask-origin-1.html mask-origin-1-ref.html # bug 1258286
 fails == mask-origin-2.html mask-origin-2-ref.html # bug 1260094
+
+# mask-size test cases
+fails == mask-size-auto.html mask-size-auto-ref.html
+fails == mask-size-auto-auto.html mask-size-auto-ref.html
+fails == mask-size-auto-length.html mask-size-auto-length-ref.html
+fails == mask-size-auto-percent.html mask-size-auto-length-ref.html
+fails == mask-size-contain-clip-border.html mask-size-contain-clip-border-ref.html
+fails == mask-size-contain-clip-padding.html mask-size-contain-clip-padding-ref.html
+fails == mask-size-contain-position-fifty-fifty.html mask-size-contain-position-fifty-fifty-ref.html
+fails == mask-size-contain.html mask-size-contain-ref.html
+fails == mask-size-cover.html mask-size-cover-ref.html
+fails == mask-size-length.html mask-size-length-length-ref.html
+fails == mask-size-length-auto.html mask-size-length-length-ref.html
+fails == mask-size-length-length.html mask-size-length-length-ref.html
+fails == mask-size-length-percent.html mask-size-length-percent-ref.html
+fails == mask-size-percent.html mask-size-percent-percent-ref.html
+fails == mask-size-percent-auto.html mask-size-percent-percent-ref.html
+fails == mask-size-percent-length.html mask-size-percent-percent-ref.html
+fails == mask-size-percent-percent.html mask-size-percent-percent-ref.html
+fails == mask-size-percent-percent-stretch.html mask-size-percent-percent-stretch-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/50x100-opaque-blue.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg width="50" height="100" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0"  width="50" height="100" fill="blue" fill-opacity="1"/>
+</svg>