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 317125 15a4d633bd2d983566e22a7989af17ed55fd9f21
parent 317124 ceee74a15bb1e73d4d819927b84e56b46d838312
child 317126 8de93854b963a067cc672d99295b452058297be8
push id9480
push userjlund@mozilla.com
push dateMon, 25 Apr 2016 17:12:58 +0000
treeherdermozilla-aurora@0d6a91c76a9e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs1243675
milestone48.0a1
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>