summaryrefslogtreecommitdiffstats
path: root/layout/reftests/w3c-css/submitted/masking
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /layout/reftests/w3c-css/submitted/masking
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/w3c-css/submitted/masking')
-rw-r--r--layout/reftests/w3c-css/submitted/masking/blank.html9
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1a.html28
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1b.html18
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1c.html30
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1a.html27
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1b.html18
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1c.html28
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-fillBox-1a.html31
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-1-ref.html14
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2-ref.html14
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2.html27
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1-ref.html27
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1.html32
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-marginBox-1a.html18
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1-ref.html29
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1.html41
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1a.html27
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1b.html18
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1c.html29
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1a.html31
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1b.html17
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1a.html18
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1b.html18
-rw-r--r--layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1c.html31
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html42
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-clip-1.html57
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-composite-1-ref.html33
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-composite-1a.html51
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-composite-1b.html51
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-composite-1c.html56
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-composite-2-ref.html39
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-composite-2a.html51
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-composite-2b.html51
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-composite-2c.html59
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html19
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-1a.html26
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-1b.html26
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-1c.html26
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-1d.html17
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html20
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-2.html31
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-3-ref.html28
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-3a.html33
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-3b.html32
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-3c.html32
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-3d.html32
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-3e.html42
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-3f.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-3g.html46
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-3h.html33
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-4a.html26
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-4b.html31
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-5-ref.html19
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-5.html26
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-6-ref.html25
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-image-6.html31
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-mode-a.html60
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-mode-b.html61
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-mode-ref.html52
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type-ref.html63
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type.html89
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-opacity-1-ref.html22
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-opacity-1a.html28
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-opacity-1b.html32
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-opacity-1c.html27
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-origin-1-ref.html34
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-origin-1.html48
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-origin-2-ref.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-origin-2.html77
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-1-ref.html33
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-1a.html39
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-1b.html39
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-1c.html39
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-2-ref.html29
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-2a.html34
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-2b.html34
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-3-ref.html29
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-3a.html34
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-3b.html34
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-4-ref.html29
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-4a.html34
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-4b.html34
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-4c.html34
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-4d.html32
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-5-ref.html38
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-5.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-6-ref.html30
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-6.html50
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-7-ref.html30
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-position-7.html50
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-repeat-1-ref.html49
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html48
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-repeat-2-ref.html45
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html43
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-repeat-3-ref.html40
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html43
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-auto-length-ref.html27
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-auto-length.html34
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-auto-percent.html34
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-auto-ref.html27
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-auto.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border-ref.html27
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border.html37
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding-ref.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty-ref.html33
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty.html36
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-contain-ref.html27
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-contain.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-cover-ref.html21
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-cover.html29
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-length-length-ref.html27
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-length-length.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-length-percent-ref.html27
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-length.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-ref.html27
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch-ref.html29
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/mask-size-percent.html35
-rw-r--r--layout/reftests/w3c-css/submitted/masking/reftest-stylo.list85
-rw-r--r--layout/reftests/w3c-css/submitted/masking/reftest.list112
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/50x100-opaque-blue.svg4
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/50x50-opaque-blue.svg4
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/blue-100x100.pngbin0 -> 40279 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/blue-100x100.svg4
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.pngbin0 -> 237 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg5
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/blue-luminance-100x100.svg4
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/green-100x100.pngbin0 -> 40279 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/green-100x100.svg4
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/green-luminance-100x100.svg4
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg9
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/red-100x100.pngbin0 -> 40279 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/red-100x100.svg4
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/red-luminance-100x100.svg4
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.pngbin0 -> 233 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg5
143 files changed, 4522 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/masking/blank.html b/layout/reftests/w3c-css/submitted/masking/blank.html
new file mode 100644
index 000000000..abb1b5472
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/blank.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <meta charset="utf-8">
+ <title>Blank document</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<body>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1a.html
new file mode 100644
index 000000000..ee48c8001
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1a.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path border-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an HTML element.">
+ <style type="text/css">
+ div {
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ background-color: blue;
+ width: 30px;
+ height: 30px;
+ padding: 10px;
+ border: solid blue 25px;
+ clip-path: circle(farthest-side) border-box;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1b.html
new file mode 100644
index 000000000..2c18099ab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path border-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG element.">
+ </head>
+ <body>
+ <svg width="200" height="200" style="position: absolute; left: 15px; top: 10px;">
+ <rect x="35" y="40" width="100" height="100" fill="blue"
+ clip-path="circle(50%) border-box"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1c.html
new file mode 100644
index 000000000..0eec4cc22
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1c.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path border-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG SVG element.">
+ <style type="text/css">
+ svg {
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ background-color: blue;
+ width: 30px;
+ height: 30px;
+ padding: 10px;
+ border: solid blue 25px;
+ clip-path: circle(farthest-side) border-box;
+ }
+ </style>
+ </head>
+ <body>
+ <svg width="200" height="200">
+ <rect x="0" y="0" width="200" height="200" fill="blue"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1a.html
new file mode 100644
index 000000000..fcbae31ac
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path content-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an HTML element.">
+ <style type="text/css">
+ div {
+ background-color: blue;
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ width: 100px;
+ height: 100px;
+ padding: 40px;
+ clip-path: circle(farthest-side) content-box;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1b.html
new file mode 100644
index 000000000..eab70f987
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path content-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an SVG element.">
+ </head>
+ <body>
+ <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">
+ <rect x="50" y="50" width="100" height="100" fill="blue"
+ clip-path="circle(50%) content-box"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1c.html
new file mode 100644
index 000000000..16622dca8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1c.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path content-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path content-box works correctly or not.">
+ </head>
+ <style type="text/css">
+ svg {
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ width: 100px;
+ height: 100px;
+ padding: 40px;
+ clip-path: circle(farthest-side) content-box;
+ }
+ </style>
+ <body>
+ <svg width="200" height="200">
+ <rect x="0" y="0" width="200" height="200" fill="blue"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-fillBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-fillBox-1a.html
new file mode 100644
index 000000000..ca850ec8b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-fillBox-1a.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path fill-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path fill-box works correctly or not. This test is for clip-path applied to an SVG SVG element.">
+ <style type="text/css">
+ svg {
+ position: absolute;
+ left: 40px;
+ top: 40px;
+ background-color: blue;
+ width: 30px;
+ height: 30px;
+ margin: 10px;
+ padding: 10px;
+ border: solid blue 25px;
+ clip-path: circle(farthest-side) fill-box;
+ }
+ </style>
+ </head>
+ <body>
+ <svg width="200" height="200">
+ <rect x="0" y="0" width="200" height="200" fill="blue">
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-1-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-1-ref.html
new file mode 100644
index 000000000..add81e8df
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path geometry box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ </head>
+ <body>
+ <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">
+ <circle cx="100" cy="100" r="50" fill="blue"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2-ref.html
new file mode 100644
index 000000000..b9ee9ab63
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path geometry box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ </head>
+ <body>
+ <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">
+ <polygon points="100,50 150,100 150,150 50,150 50,100" fill="blue"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2.html b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2.html
new file mode 100644
index 000000000..4b93657e6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path margin-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-2-ref.html">
+ <meta name="assert" content="Test checks whether clip-path margin-box works correctly or not.">
+ <style type="text/css">
+ div {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ background-color: blue;
+ width: 100px;
+ height: 100px;
+ margin: 50px;
+ clip-path: polygon(0% 75%, 50% 25%, 100% 75%) margin-box;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1-ref.html
new file mode 100644
index 000000000..d605e046f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Reference for clip-path linked to local-ref URL</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <svg height="0" width="0">
+ <defs>
+ <clipPath id="c1">
+ <circle cy="110" cx="137" r="90" />
+ </clipPath>
+ </defs>
+ </svg>
+ <style>
+ div {
+ width: 300px;
+ height: 300px;
+ background-color: blue;
+ clip-path: url(#c1);
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1.html b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1.html
new file mode 100644
index 000000000..e24afbcd6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <head>
+ <base href="http://example.com">
+ <meta charset="utf-8">
+ <title>Testcase for clip-path linked to local-ref URL</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-localRef-1-ref.html">
+ <meta name="assert" content="Test checks after changing base URL, whether fragment URLs works correctly or not.">
+ <svg height="0" width="0">
+ <defs>
+ <clipPath id="c1">
+ <circle cy="110" cx="137" r="90" />
+ </clipPath>
+ </defs>
+ </svg>
+ <style>
+ div {
+ width: 300px;
+ height: 300px;
+ background-color: blue;
+ clip-path: url(#c1);
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-marginBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-marginBox-1a.html
new file mode 100644
index 000000000..6634c93f6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-marginBox-1a.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path margin-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path margin-box works correctly or not. This test is for clip-path applied to an SVG element.">
+ </head>
+ <body>
+ <svg width="200" height="200" style="position: absolute; left: 10px; top: 15px;">
+ <rect x="40" y="35" width="100" height="100" fill="blue"
+ clip-path="circle(50%) margin-box"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1-ref.html
new file mode 100644
index 000000000..55e6fe2f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS clip-path reference</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style type="text/css">
+ div.foreground {
+ position: absolute;
+ background-color: rgb(0,0,255);
+ z-index: 100;
+ width: 50px;
+ height: 50px;
+ }
+
+ div.background {
+ position: absolute;
+ background-color: rgb(0,255,255);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="foreground"></div>
+ <div class="background"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1.html b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1.html
new file mode 100644
index 000000000..c895cdffc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path with mix-blend-mode</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-mix-blend-mode-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path works with mix-blend-mode correctly or not.">
+ <style type="text/css">
+ div {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ }
+
+ div.foreground {
+ background-color: rgb(255,0,255);
+ clip-path: url(#top_left);
+ z-index: 100;
+ mix-blend-mode: multiply;
+ }
+
+ div.background {
+ background-color: rgb(0,255,255);
+ }
+ </style>
+ </head>
+ <body>
+ <div class="foreground"></div>
+ <div class="background"></div>
+ <svg height="0" width="0">
+ <defs>
+ <clipPath id="top_left">
+ <rect x="0" y="0" width="50" height="50"/>
+ </clipPath>
+ </defs>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1a.html
new file mode 100644
index 000000000..4dc5e1714
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path padding-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an HTML element.">
+ <style type="text/css">
+ div {
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ background-color: blue;
+ width: 50px;
+ height: 50px;
+ padding: 25px;
+ clip-path: circle(farthest-side) padding-box;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1b.html
new file mode 100644
index 000000000..717a6bfe1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path padding-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG element.">
+ </head>
+ <body>
+ <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">
+ <rect x="50" y="50" width="100" height="100" fill="blue"
+ clip-path="circle(50%) padding-box"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1c.html
new file mode 100644
index 000000000..0ec021634
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1c.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path padding-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG SVG element.">
+ <style type="text/css">
+ svg {
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ background-color: blue;
+ width: 50px;
+ height: 50px;
+ padding: 25px;
+ clip-path: circle(farthest-side) padding-box;
+ }
+ </style>
+ </head>
+ <body>
+ <svg width="200" height="200">
+ <rect x="0" y="0" width="200" height="200" fill="blue"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1a.html
new file mode 100644
index 000000000..a72f8b00e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1a.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path stroke-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path stroke-box works correctly or not. This test is for clip-path applied to an SVG SVG element.">
+ <style type="text/css">
+ svg {
+ position: absolute;
+ left: 40px;
+ top: 40px;
+ background-color: blue;
+ width: 30px;
+ height: 30px;
+ margin: 10px;
+ padding: 10px;
+ border: solid blue 25px;
+ clip-path: circle(farthest-side) stroke-box;
+ }
+ </style>
+ </head>
+ <body>
+ <svg width="200" height="200">
+ <rect x="0" y="0" width="200" height="200" fill="blue"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1b.html
new file mode 100644
index 000000000..ba81b5df7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1b.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path stroke-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path stroke-box works correctly or not.">
+ </head>
+ <body>
+ <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">
+ <rect x="60" y="60" width="80" height="80" fill="blue" stroke="blue" stroke-width="20" clip-path="circle(50%) stroke-box"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1a.html
new file mode 100644
index 000000000..f1f816b2f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1a.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path view-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path view-box works correctly or not.">
+ </head>
+ <body>
+ <svg width="200" height="200" style="position: absolute; left: 10px; top: 10px;">
+ <rect x="20" y="20" width="135" height="135" fill="blue"
+ clip-path="circle(25% at calc(50% - 10px) calc(50% - 10px)) view-box"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1b.html
new file mode 100644
index 000000000..08c91b84b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path view-box with viewbox</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path view-box with viewbox works correctly or not.">
+ </head>
+ <body>
+ <svg width="200" height="200" viewBox="50 50 100 100" preserveAspectRatio="none" style="position: absolute; left: 10px; top: 10px;">
+ <rect x="0" y="0" width="200" height="200" fill="blue"
+ clip-path="circle(25% at calc(50% - 5px) calc(50% - 5px)) view-box"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1c.html
new file mode 100644
index 000000000..dd3cae8ef
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1c.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path: clip path view-box</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+ <link rel="match" href="clip-path-geometryBox-1-ref.html">
+ <meta name="assert" content="Test checks whether clip-path view-box works correctly or not. This test is for clip-path applied to an SVG SVG element.">
+ <style type="text/css">
+ svg {
+ position: absolute;
+ left: 40px;
+ top: 40px;
+ background-color: blue;
+ width: 30px;
+ height: 30px;
+ margin: 10px;
+ padding: 10px;
+ border: solid blue 25px;
+ clip-path: circle(farthest-side) view-box;
+ }
+ </style>
+ </head>
+ <body>
+ <svg width="200" height="200">
+ <rect x="0" y="0" width="200" height="200" fill="blue"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html
new file mode 100644
index 000000000..0f9197e1f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS mask-clip reference</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 {
+ position: absolute;
+ top: 10px;
+ background-color: purple;
+ }
+
+ div.border {
+ left: 10px;
+ margin: 1px 4px;
+ width: 60px;
+ height: 25px;
+ }
+
+ div.padding {
+ left: 110px;
+ margin: 9px 10px;
+ width: 52px;
+ height: 17px;
+ }
+
+ div.content {
+ left: 210px;
+ margin: 15px 13px;
+ width: 40px;
+ height: 11px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="color border"></div>
+ <div class="color padding"></div>
+ <div class="color content"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html b/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html
new file mode 100644
index 000000000..c981536b8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-clip: clip mask image</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-clip">
+ <link rel="match" href="mask-clip-1-ref.html">
+ <meta name="assert" content="border-box, padding-box, and content-box values of mask-clip should clip to the appropriate boxes.">
+ <style type="text/css">
+ div {
+ /*
+ * content box: 40 x 20
+ * padding box: 52 x 38
+ * border box: 60 x 50
+ * margin box: 66 x 54
+ */
+ background-color: purple;
+ position: absolute;
+ top: 10px;
+ margin: 1px 2px 3px 4px;
+ border: solid transparent;
+ border-width: 8px 2px 4px 6px;
+ padding: 6px 9px 12px 3px;
+ width: 40px;
+ height: 20px;
+ }
+
+ div.mask {
+ mask-size: 100% 100%;
+ mask-origin: border-box;
+ mask-image: url(support/transparent-100x50-blue-100x50.svg);
+ }
+
+ div.border {
+ left: 10px;
+ mask-clip: border-box;
+ }
+
+ div.padding {
+ left: 110px;
+ mask-clip: padding-box;
+ }
+
+ div.content {
+ left: 210px;
+ mask-clip: content-box;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="outer mask border"></div>
+ <div class="outer mask padding"></div>
+ <div class="outer mask content"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1-ref.html
new file mode 100644
index 000000000..9249622cc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-1-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS mask-composite reference</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style type="text/css">
+ div {
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ width: 100px;
+ height: 100px;
+ top: 10px;
+ }
+
+ div.add {
+ left: 10px;
+ background-image: url(support/blue-100x50-transparent-100x50.svg);
+ }
+
+ div.intersect {
+ left: 230px;
+ background-image: url(support/blue-100x50-transparent-100x50.svg);
+ }
+ </style>
+ </head>
+ <body>
+ <div class="add"></div>
+ <div class="intersect"></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1a.html
new file mode 100644
index 000000000..795e52b8a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-1a.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-composite: compose vector image</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+ <link rel="match" href="mask-composite-1-ref.html">
+ <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value.">
+ <style type="text/css">
+ div {
+ background-color: blue;
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ width: 100px;
+ height: 100px;
+ top:10px;
+ mask-image: url(support/blue-100x50-transparent-100x50.svg),
+ url(support/blue-100x50-transparent-100x50.svg);
+ }
+
+ div.add {
+ left: 10px;
+ mask-composite: add;
+ }
+
+ div.subtract {
+ left: 120px;
+ mask-composite: subtract;
+ }
+
+ div.intersect {
+ left: 230px;
+ mask-composite: intersect;
+ }
+
+ div.exclude {
+ left: 340px;
+ mask-composite: exclude;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="add"></div>
+ <div class="subtract"></div>
+ <div class="intersect"></div>
+ <div class="exclude"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1b.html
new file mode 100644
index 000000000..be158c923
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-1b.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-composite: compose raster image</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+ <link rel="match" href="mask-composite-1-ref.html">
+ <meta name="assert" content="Test checks that raster-mask-image can be composed correctly by different mask-composite value.">
+ <style type="text/css">
+ div {
+ background-color: blue;
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ width: 100px;
+ height: 100px;
+ top:10px;
+ mask-image: url(support/blue-100x50-transparent-100x50.png),
+ url(support/blue-100x50-transparent-100x50.png);
+ }
+
+ div.add {
+ left: 10px;
+ mask-composite: add;
+ }
+
+ div.subtract {
+ left: 120px;
+ mask-composite: subtract;
+ }
+
+ div.intersect {
+ left: 230px;
+ mask-composite: intersect;
+ }
+
+ div.exclude {
+ left: 340px;
+ mask-composite: exclude;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="add"></div>
+ <div class="subtract"></div>
+ <div class="intersect"></div>
+ <div class="exclude"></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1c.html
new file mode 100644
index 000000000..0eb098d1b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-1c.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-composite: compose svg mask</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+ <link rel="match" href="mask-composite-1-ref.html">
+ <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value.">
+ <svg height="0">
+ <mask id="rectMask" x="0" y="0" width="100" height="100" >
+ <rect x="0" y="50" width="100" height="50" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div {
+ background-color: blue;
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ width: 100px;
+ height: 100px;
+ top:10px;
+ mask-image: url(#rectMask),
+ url(#rectMask);
+ }
+
+ div.add {
+ left: 10px;
+ mask-composite: add;
+ }
+
+ div.subtract {
+ left: 120px;
+ mask-composite: subtract;
+ }
+
+ div.intersect {
+ left: 230px;
+ mask-composite: intersect;
+ }
+
+ div.exclude {
+ left: 340px;
+ mask-composite: exclude;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="add"></div>
+ <div class="subtract"></div>
+ <div class="intersect"></div>
+ <div class="exclude"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2-ref.html
new file mode 100644
index 000000000..cbf91daad
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-2-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS mask-composite reference</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style type="text/css">
+ div {
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ width: 100px;
+ height: 100px;
+ top: 10px;
+ }
+
+ div.add {
+ left: 10px;
+ background-color: blue;
+ }
+
+ div.subtract {
+ left: 120px;
+ background-image: url(support/blue-100x50-transparent-100x50.svg);
+ }
+
+ div.exclude {
+ left: 340px;
+ background-color: blue;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="add"></div>
+ <div class="subtract"></div>
+ <div class="exclude"></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-2a.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2a.html
new file mode 100644
index 000000000..7db800814
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-2a.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-composite: compose vector image</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+ <link rel="match" href="mask-composite-2-ref.html">
+ <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value.">
+ <style type="text/css">
+ div {
+ background-color: blue;
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ width: 100px;
+ height: 100px;
+ top:10px;
+ mask-image: url(support/blue-100x50-transparent-100x50.svg),
+ url(support/transparent-100x50-blue-100x50.svg);
+ }
+
+ div.add {
+ left: 10px;
+ mask-composite: add;
+ }
+
+ div.subtract {
+ left: 120px;
+ mask-composite: subtract;
+ }
+
+ div.intersect {
+ left: 230px;
+ mask-composite: intersect;
+ }
+
+ div.exclude {
+ left: 340px;
+ mask-composite: exclude;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="add"></div>
+ <div class="subtract"></div>
+ <div class="intersect"></div>
+ <div class="exclude"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-2b.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2b.html
new file mode 100644
index 000000000..3fd983fb1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-2b.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-composite: compose raster image</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+ <link rel="match" href="mask-composite-2-ref.html">
+ <meta name="assert" content="Test checks that raster-mask-image can be composed correctly by different mask-composite value.">
+ <style type="text/css">
+ div {
+ background-color: blue;
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ width: 100px;
+ height: 100px;
+ top:10px;
+ mask-image: url(support/blue-100x50-transparent-100x50.png),
+ url(support/transparent-100x50-blue-100x50.png);
+ }
+
+ div.add {
+ left: 10px;
+ mask-composite: add;
+ }
+
+ div.subtract {
+ left: 120px;
+ mask-composite: subtract;
+ }
+
+ div.intersect {
+ left: 230px;
+ mask-composite: intersect;
+ }
+
+ div.exclude {
+ left: 340px;
+ mask-composite: exclude;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="add"></div>
+ <div class="subtract"></div>
+ <div class="intersect"></div>
+ <div class="exclude"></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-2c.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2c.html
new file mode 100644
index 000000000..2b26e9ac6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-2c.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-composite: compose SVG mask</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+ <link rel="match" href="mask-composite-2-ref.html">
+ <meta name="assert" content="Test checks that svg-mask can be composed correctly by different mask-composite value.">
+ <svg height="0">
+ <mask id="rectMask1" x="0" y="0" width="100" height="100" >
+ <rect x="0" y="50" width="100" height="50" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ <mask id="rectMask2" x="0" y="0" width="100" height="100" >
+ <rect x="0" y="0" width="100" height="50" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div {
+ background-color: blue;
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ width: 100px;
+ height: 100px;
+ top:10px;
+ mask-image: url(#rectMask1),
+ url(#rectMask2);
+ }
+
+ div.add {
+ left: 10px;
+ mask-composite: add;
+ }
+
+ div.subtract {
+ left: 120px;
+ mask-composite: subtract;
+ }
+
+ div.intersect {
+ left: 230px;
+ mask-composite: intersect;
+ }
+
+ div.exclude {
+ left: 340px;
+ mask-composite: exclude;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="add"></div>
+ <div class="subtract"></div>
+ <div class="intersect"></div>
+ <div class="exclude"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html
new file mode 100644
index 000000000..280084406
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: 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 {
+ background-color: purple;
+ width: 100px;
+ height: 50px;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1a.html
new file mode 100644
index 000000000..62e00660a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: mask layer image</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-image-1-ref.html">
+ <meta name="assert" content="Test checks whether image as mask layer works correctly or not.">
+ <style type="text/css">
+ div {
+ background-color: purple;
+ width: 100px;
+ height: 100px;
+ }
+
+ div.mask-by-png {
+ mask-image: url(support/transparent-100x50-blue-100x50.png);
+ }
+ </style>
+ </head>
+ <body>
+ <div class="mask-by-png"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1b.html
new file mode 100644
index 000000000..9bf74102f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: mask layer image</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-image-1-ref.html">
+ <meta name="assert" content="Test checks whether SVG image as mask layer works correctly or not.">
+ <style type="text/css">
+ div {
+ background-color: purple;
+ width: 100px;
+ height: 100px;
+ }
+
+ div.mask-by-svg {
+ mask-image: url(support/transparent-100x50-blue-100x50.svg);
+ }
+ </style>
+ </head>
+ <body>
+ <div class="mask-by-svg"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1c.html
new file mode 100644
index 000000000..1328d06c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1c.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: mask layer image</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-image-1-ref.html">
+ <meta name="assert" content="Test checks whether SVG mask element as mask layer works correctly or not.">
+ <style type="text/css">
+ div {
+ background-color: purple;
+ width: 100px;
+ height: 100px;
+ }
+
+ div.mask-by-svg-mask {
+ mask-image: url(support/mask-half-transparent-100x100.svg#mask);
+ }
+ </style>
+ </head>
+ <body>
+ <div class="mask-by-svg-mask"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1d.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1d.html
new file mode 100644
index 000000000..11f0ae7d9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1d.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: mask layer image</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-image-1-ref.html">
+ <meta name="assert" content="Test checks whether treat unresolvable mask as no-mask for a SVG element embedded in HTML document.">
+ </head>
+ <body>
+ <svg width="100" height="100">
+ <rect x="0" y="0" width="100" height="50" fill="purple" mask="url(#foo)"/>
+ </svg>
+ </body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html
new file mode 100644
index 000000000..db949934e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: 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 {
+ background-image: linear-gradient(rgba(128,0,128,0), rgba(128,0,128,1));
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-2.html b/layout/reftests/w3c-css/submitted/masking/mask-image-2.html
new file mode 100644
index 000000000..a071cff3f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: mask layer image</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-image-2-ref.html">
+ <meta name="assert" content="Test checks whether gradient CSS image as mask layer works correctly or not.">
+ <style type="text/css">
+ div {
+ background-color: purple;
+ width: 100px;
+ height: 100px;
+ }
+
+ div.mask-by-gradient-1 {
+ mask-image: linear-gradient(rgba(0,0,255,0), rgba(0,0,255,1)); /* blue gradient mask */
+ }
+
+ div.mask-by-gradient-2 {
+ mask-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); /* red gradient mask */
+ }
+ </style>
+ </head>
+ <body>
+ <div class="mask-by-gradient-1"></div>
+ <div class="mask-by-gradient-2"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3-ref.html
new file mode 100644
index 000000000..ec29e333c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: multiple SVG masks</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <svg height="0">
+ <mask id="mask" x="0" y="0" width="1" height="1">
+ <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+ <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div {
+ background-color: purple;
+ mask: url(#mask);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+
+ </head>
+
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3a.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3a.html
new file mode 100644
index 000000000..b3a6d3965
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3a.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: multiple SVG masks</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-image-3-ref.html">
+ <meta name="assert" content="Test checks whether SVG mask as mask layer works correctly or not.">
+ <svg height="0">
+ <mask id="mask1" x="0" y="0" width="1" height="1" >
+ <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ <mask id="mask2" x="0" y="0" width="1" height="1" >
+ <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div {
+ background-color: purple;
+ mask-image: url(#mask1), url(#mask2);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+
+ </head>
+
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3b.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3b.html
new file mode 100644
index 000000000..bd805cde9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3b.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-image-3-ref.html">
+ <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not.">
+ <svg height="0">
+ <mask id="mask1" x="0" y="0" width="1" height="1" >
+ <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div {
+ background-color: purple;
+ mask-image: url(support/50x50-opaque-blue.svg), url(#mask1);
+ mask-repeat: no-repeat, repeat;
+ mask-position: 0 0, 0 0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+
+ </head>
+
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3c.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3c.html
new file mode 100644
index 000000000..32bd4454d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3c.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-image-3-ref.html">
+ <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not.">
+ <svg height="0">
+ <mask id="mask1" x="0" y="0" width="1" height="1" >
+ <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div {
+ background-color: purple;
+ mask-image: url(#mask1), url(support/50x50-opaque-blue.svg);
+ mask-repeat: repeat-x, no-repeat;
+ mask-position: 0 0, 0 0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+
+ </head>
+
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3d.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3d.html
new file mode 100644
index 000000000..f1ef1be70
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3d.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-image-3-ref.html">
+ <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not.">
+ <svg height="0">
+ <mask id="mask1" x="10%" y="10%" width="0.8" height="0.8" >
+ <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div {
+ background-color: purple;
+ mask: url(#mask1), url(support/50x50-opaque-blue.svg);
+ mask-repeat: no-repeat, no-repeat;
+ mask-position: 0 0, 0 0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+
+ </head>
+
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3e.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3e.html
new file mode 100644
index 000000000..15223e34d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3e.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-image-3-ref.html">
+ <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not.">
+ <svg height="0">
+ <mask id="mask1" x="0" y="0" width="1" height="1" >
+ <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div.outter {
+ margin: 0px;
+ padding: 0px;
+ width: 200px;
+ height: 200px;
+ transform: translate(-10px, -10px);
+ }
+ div.inner {
+ background-color: purple;
+ mask-image: url(support/50x50-opaque-blue.svg), url(#mask1);
+ mask-repeat: no-repeat, repeat;
+ mask-position: 0 0, 0 0;
+ /*mask: url(#mask1);*/
+ width: 100px;
+ height: 100px;
+ transform: translate(10px, 10px);
+ }
+ </style>
+
+ </head>
+ <body>
+ <div class="outter">
+ <div class="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3f.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3f.html
new file mode 100644
index 000000000..e925105ba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3f.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: SVG masks apply on border area</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-image-3-ref.html">
+ <meta name="assert" content="Test checks whether SVG mask layer can be positioned on box-shadow area correctly or not.">
+ <svg height="0">
+ <mask id="mask1" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse">
+ <rect x="-100" y="-100" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ <mask id="mask2" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse">
+ <circle cx="-50" cy="-50" r="25" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div {
+ background-color: red;
+ mask-image: url(#mask1), url(#mask2);
+ box-shadow: 0 0 0 100px purple;
+ width: 100px;
+ height: 100px;
+ position: relative;
+ left: 100px;
+ top: 100px;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3g.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3g.html
new file mode 100644
index 000000000..1236c0c33
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3g.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: SVG masks apply on border area</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-image-3-ref.html">
+ <meta name="assert" content="Test checks whether apply transfrom to a SVG mask layer works correctly or not.">
+ <svg height="0">
+ <mask id="mask1" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse">
+ <rect x="-100" y="-100" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ <mask id="mask2" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse">
+ <circle cx="-50" cy="-50" r="25" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div.outter {
+ margin: 0px;
+ padding: 0px;
+ width: 200px;
+ height: 200px;
+ transform: translate(-10px, -20px);
+ }
+ div.inner {
+ background-color: red;
+ mask-image: url(#mask1), url(#mask2);
+ mask-repeat: no-repeat, no-repeat;
+ box-shadow: 0 0 0 100px purple;
+ position: relative;
+ width: 100px;
+ height: 100px;
+ left: 100px;
+ top: 100px;
+ transform: translate(10px, 20px);
+ }
+ </style>
+ </head>
+ <body>
+ <div class="outter">
+ <div class="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3h.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3h.html
new file mode 100644
index 000000000..37608bfe2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3h.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clip-path in SVG mask</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-image-3-ref.html">
+ <meta name="assert" content="Test checks whether clip-path in SVG mask works correctly or not.">
+ <svg height="0">
+ <mask id="mask1" x="0" y="0" width="1" height="1" >
+ <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ <mask id="mask2" x="0" y="0" width="1" height="1" >
+ <rect x="25" y="25" width="50" height="50" style="stroke:none; fill: #ffffff" clip-path="circle(50% at 50% 50%)"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div {
+ background-color: purple;
+ mask-image: url(#mask1), url(#mask2);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+
+ </head>
+
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-4a.html b/layout/reftests/w3c-css/submitted/masking/mask-image-4a.html
new file mode 100644
index 000000000..ae3ad76a2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-4a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: unresovlable mask url</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="blank.html">
+ <meta name="assert" content="Test checks non-existent url should be counted as an image layer of transparent black.">
+ <style type="text/css">
+ div {
+ background-color: purple;
+ width: 100px;
+ height: 100px;
+ }
+
+ div.mask-by-png {
+ mask-image: url(non-existent.png);
+ }
+ </style>
+ </head>
+ <body>
+ <div class="mask-by-png"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-4b.html b/layout/reftests/w3c-css/submitted/masking/mask-image-4b.html
new file mode 100644
index 000000000..ed0022a4c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-4b.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: unresovlable mask url</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="blank.html">
+ <meta name="assert" content="Test checks a mask reference to a none-mask SVG element should be counted as an image layer of transparent black.">
+ <svg height="0">
+ <clipPath id="clip1">
+ <circle cx="50" cy="50" r="25"/>
+ </clipPath>
+ </svg>
+ <style type="text/css">
+ div {
+ background-color: purple;
+ width: 100px;
+ height: 100px;
+ }
+
+ div.mask-by-reference {
+ mask-image: url(#clip1);
+ }
+ </style>
+ </head>
+ <body>
+ <div class="mask-by-reference"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-5-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-5-ref.html
new file mode 100644
index 000000000..19a251ef0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-5-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: data url mask</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style type="text/css">
+ div {
+ background-color: purple;
+ width: 50px;
+ height: 50px;
+ }
+ </style>
+ </head>
+ <body>
+ <div/>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-5.html b/layout/reftests/w3c-css/submitted/masking/mask-image-5.html
new file mode 100644
index 000000000..d98ddf8de
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-5.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: data url mask</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-image-5-ref.html">
+ <meta name="assert" content="Test checks handling data url mask correctly.">
+ <style type="text/css">
+ div {
+ background-color: purple;
+ width: 50px;
+ height: 50px;
+ }
+ div.mask-by-data-url {
+ /* a 50x50 opaque blue rect */
+ mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHg9IjAiIHk9IjAiICB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9ImJsdWUiIGZpbGwtb3BhY2l0eT0iMSIvPgo8L3N2Zz4K");
+ }
+ </style>
+ </head>
+ <body>
+ <div class="mask-by-data-url"/>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-6-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-6-ref.html
new file mode 100644
index 000000000..d85e075fd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-6-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask on inline element</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style type="text/css">
+ div {
+ width: 100px;
+ height: 100px;
+ font-size: 100px;
+ line-height: 100px;
+ }
+
+ div.mask-by-png {
+ mask-image: url(support/transparent-100x50-blue-100x50.png);
+ }
+ </style>
+ </head>
+ <body>
+ <div class="mask-by-png">A</div>
+ <div class="mask-by-png">B</div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-6.html b/layout/reftests/w3c-css/submitted/masking/mask-image-6.html
new file mode 100644
index 000000000..ac31e4cf4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask on inline element</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-image-6-ref.html">
+ <meta name="assert" content="Test checks whether mask on inline elemnt works correctly or not.">
+ <style type="text/css">
+ div {
+ width: 100px;
+ height: 100px;
+ }
+ span {
+ font-size: 100px;
+ line-height: 100px;
+ mask-image: url(support/transparent-100x50-blue-100x50.png);
+ mask-position: center;
+ mask-repeat: repeat;
+ }
+
+ </style>
+ </head>
+ <body>
+ <div>
+ <span>A B</span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-mode-a.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-a.html
new file mode 100644
index 000000000..38977a0aa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-mode-a.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-mode with vector image</title>
+ <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode">
+ <link rel="match" href="mask-mode-ref.html">
+ <meta name="assert" content="Test checks that mask an SVG image referenced by mask-image is correct with different mask mode.">
+ <style type="text/css">
+ div {
+ background-color: blue;
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ width: 100px;
+ height: 100px;
+ top: 10px;
+ }
+
+ div.auto {
+ left: 10px;
+ mask-mode: match-source;
+ mask-image: url(support/blue-100x100.svg);
+ }
+
+ div.alpha {
+ left: 120px;
+ mask-mode: alpha;
+ mask-image: url(support/blue-100x100.svg);
+ }
+
+ div.luminance1 {
+ left: 230px;
+ mask-mode: luminance;
+ mask-image: url(support/blue-100x100.svg);
+ }
+
+ div.luminance2 {
+ left: 340px;
+ mask-mode: luminance;
+ mask-image: url(support/red-100x100.svg);
+ }
+
+ div.luminance3 {
+ left: 450px;
+ mask-mode: luminance;
+ mask-image: url(support/green-100x100.svg);
+ }
+ </style>
+ </head>
+ <body>
+ <div class="auto"></div>
+ <div class="alpha"></div>
+ <div class="luminance1"></div>
+ <div class="luminance2"></div>
+ <div class="luminance3"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-mode-b.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-b.html
new file mode 100644
index 000000000..e5c11e9bf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-mode-b.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-mode with raster image</title>
+ <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode">
+ <link rel="match" href="mask-mode-ref.html">
+ <meta name="assert" content="Test checks that mask a PNG image referenced by mask-image is correct with different mask mode.">
+ <style type="text/css">
+ div {
+ background-color: blue;
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ width: 100px;
+ height: 100px;
+ top: 10px;
+ }
+
+ div.auto {
+ left: 10px;
+ mask-mode: match-source;
+ mask-image: url(support/blue-100x100.png);
+ }
+
+ div.alpha {
+ left: 120px;
+ mask-mode: alpha;
+ mask-image: url(support/blue-100x100.png);
+ }
+
+ div.luminance1 {
+ left: 230px;
+ mask-mode: luminance;
+ mask-image: url(support/blue-100x100.png);
+ }
+
+ div.luminance2 {
+ left: 340px;
+ mask-mode: luminance;
+ mask-image: url(support/red-100x100.png);
+ }
+
+ div.luminance3 {
+ left: 450px;
+ mask-mode: luminance;
+ mask-image: url(support/green-100x100.png);
+ }
+ </style>
+ </head>
+ <body>
+ <div class="auto"></div>
+ <div class="alpha"></div>
+ <div class="luminance1"></div>
+ <div class="luminance2"></div>
+ <div class="luminance3"></div>
+ </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-mode-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-ref.html
new file mode 100644
index 000000000..0f7dbd571
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-mode-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS mask-mode reference</title>
+ <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style type="text/css">
+ div {
+ background-color: white;
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ width: 100px;
+ height: 100px;
+ top: 10px;
+ }
+
+ div.auto {
+ left: 10px;
+ background-image: url(support/blue-100x100.svg);
+ }
+
+ div.alpha {
+ left: 120px;
+ background-image: url(support/blue-100x100.svg);
+ }
+
+ div.luminance1 {
+ left: 230px;
+ background-image: url(support/blue-luminance-100x100.svg);
+ }
+
+ div.luminance2 {
+ left: 340px;
+ background-image: url(support/red-luminance-100x100.svg);
+ }
+
+ div.luminance3 {
+ left: 450px;
+ background-image: url(support/green-luminance-100x100.svg);
+ }
+ </style>
+ </head>
+ <body>
+ <div class="auto"></div>
+ <div class="alpha"></div>
+ <div class="luminance1"></div>
+ <div class="luminance2"></div>
+ <div class="luminance3"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type-ref.html
new file mode 100644
index 000000000..2b5e1fd3e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS mask-mode reference</title>
+ <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style type="text/css">
+ div {
+ background-color: blue;
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ width: 100px;
+ height: 100px;
+ top: 10px;
+ }
+
+ div.match-luminance {
+ left: 10px;
+ background-image: url(support/blue-luminance-100x100.svg);
+ }
+
+ div.match-alpha {
+ left: 120px;
+ background-image: url(support/blue-100x100.svg);
+ }
+
+ div.luminance-luminance {
+ top: 120px;
+ left: 10px;
+ background-image: url(support/blue-luminance-100x100.svg);
+ }
+
+ div.luminance-alpha {
+ top: 120px;
+ left: 120px;
+ background-image: url(support/blue-luminance-100x100.svg);
+ }
+
+ div.alpha-luminance {
+ top: 230px;
+ left: 10px;
+ background-image: url(support/blue-100x100.svg);
+ }
+
+ div.alpha-alpha {
+ top: 230px;
+ left: 120px;
+ background-image: url(support/blue-100x100.svg);
+ }
+ </style>
+
+ </head>
+ <body>
+ <div class="match-luminance"></div>
+ <div class="match-alpha"></div>
+ <div class="luminance-luminance"></div>
+ <div class="luminance-alpha"></div>
+ <div class="alpha-luminance"></div>
+ <div class="alpha-alpha"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type.html
new file mode 100644
index 000000000..5c75ce71d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-mode with vector image</title>
+ <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode">
+ <link rel="match" href="mask-mode-to-mask-type-ref.html">
+ <meta name="assert" content="Test checks the fallback logic between mask-mode and mask-type.">
+ <style type="text/css">
+ div {
+ background-color: blue;
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ width: 100px;
+ height: 100px;
+ top: 10px;
+ }
+
+ div.match-luminance {
+ left: 10px;
+ mask-mode: match-source;
+ mask-image: url("#svg-luminance");
+ }
+
+ div.match-alpha {
+ left: 120px;
+ mask-mode: match-source;
+ mask-image: url("#svg-alpha");
+ }
+
+ div.luminance-luminance {
+ top: 120px;
+ left: 10px;
+ mask-mode: luminance;
+ mask-image: url("#svg-luminance");
+ }
+
+ div.luminance-alpha {
+ top: 120px;
+ left: 120px;
+ mask-mode: luminance;
+ mask-image: url("#svg-alpha");
+ }
+
+ div.alpha-luminance {
+ top: 230px;
+ left: 10px;
+ mask-mode: alpha;
+ mask-image: url("#svg-luminance");
+ }
+
+ div.alpha-alpha {
+ top: 230px;
+ left: 120px;
+ mask-mode: alpha;
+ mask-image: url("#svg-alpha");
+ }
+
+ #svg-luminance {
+ mask-type: luminance;
+ }
+
+ #svg-alpha {
+ mask-type: alpha;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="match-luminance"></div>
+ <div class="match-alpha"></div>
+ <div class="luminance-luminance"></div>
+ <div class="luminance-alpha"></div>
+ <div class="alpha-luminance"></div>
+ <div class="alpha-alpha"></div>
+ <svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <mask id="svg-luminance">
+ <rect x="0" y="0" width="100%" height="100%" fill="blue"/>
+ </mask>
+ <mask id="svg-alpha">
+ <rect x="0" y="0" width="100%" height="100%" fill="blue"/>
+ </mask>
+ </defs>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-opacity-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1-ref.html
new file mode 100644
index 000000000..5def84f06
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: mask with opacity</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style type="text/css">
+ div {
+ position: absolute;
+ left: 10px;
+ top: 60px;
+ background-color: rgba(0,0,255,0.5);
+ width: 100px;
+ height: 50px;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-opacity-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1a.html
new file mode 100644
index 000000000..1bd42abfb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1a.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: mask with filter and opacity</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-opacity-1-ref.html">
+ <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not.">
+ <style type="text/css">
+ div {
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ background-color: rgb(255,255,0);
+ width: 100px;
+ height: 100px;
+ filter: invert(100%);
+ mask-image: url(support/blue-100x50-transparent-100x50.png);
+ opacity: 0.5;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-opacity-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1b.html
new file mode 100644
index 000000000..0de78f761
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1b.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: mask with opacity</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-opacity-1-ref.html">
+ <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not.">
+ <svg height="0">
+ <mask id="myMask" x="0" y="0" width="100" height="100" >
+ <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </svg>
+ <style type="text/css">
+ div {
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ background-color: rgb(0,0,255);
+ width: 100px;
+ height: 100px;
+ mask-image: url(support/blue-100x50-transparent-100x50.png);
+ opacity: 0.5;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-opacity-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1c.html
new file mode 100644
index 000000000..1673d7c4e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-image: filter with opacity</title>
+ <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+ <link rel="match" href="mask-opacity-1-ref.html">
+ <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not.">
+ <style type="text/css">
+ div {
+ position: absolute;
+ left: 10px;
+ top: 60px;
+ background-color: rgb(255,255,0);
+ width: 100px;
+ height: 50px;
+ filter: invert(100%);
+ opacity: 0.5;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-origin-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-1-ref.html
new file mode 100644
index 000000000..df7e684d2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-1-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-origin: mask positioning area</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 {
+ border: 1px solid black;
+ width: 100px;
+ height: 100px;
+ position: relative;
+ }
+
+ div.inner {
+ width: 50px;
+ height: 50px;
+ background-color: purple;
+ position: absolute;
+ }
+
+ #border { left: 4px; top: 1px; }
+ #padding { left: 10px; top: 9px; }
+ #content { left: 13px; top: 15px; }
+ </style>
+ </head>
+ <body>
+ <div class="outer"><div class="inner" id="border"></div></div>
+ <div class="outer"><div class="inner" id="border"></div></div>
+ <div class="outer"><div class="inner" id="padding"></div></div>
+ <div class="outer"><div class="inner" id="content"></div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-origin-1.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-1.html
new file mode 100644
index 000000000..3788a5591
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-1.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-origin: mask positioning area</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-origin">
+ <link rel="match" href="mask-origin-1-ref.html">
+ <meta name="assert" content="Test checks whether setting mask position area works correctly or not.">
+ <style type="text/css">
+ div.outer {
+ border: 1px solid black;
+ width: 100px;
+ height: 100px;
+ }
+
+ div.inner {
+ /*
+ * content box: 60 x 60
+ * padding box: 72 x 78
+ * border box: 80 x 90
+ * margin box: 86 x 94
+ */
+ margin: 1px 2px 3px 4px;
+ border: solid transparent;
+ border-width: 8px 2px 4px 6px;
+ padding: 6px 9px 12px 3px;
+ width: 60px;
+ height: 60px;
+ background-color: purple;
+ mask-image: url(support/50x50-opaque-blue.svg);
+ mask-repeat: no-repeat;
+ mask-position: left top;
+ }
+
+ #border { mask-origin: border-box; }
+ #padding { mask-origin: padding-box; }
+ #content { mask-origin: content-box; }
+ </style>
+ </head>
+ <body>
+ <div class="outer"><div class="inner"></div></div>
+ <div class="outer"><div class="inner" id="border"></div></div>
+ <div class="outer"><div class="inner" id="padding"></div></div>
+ <div class="outer"><div class="inner" id="content"></div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-origin-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-2-ref.html
new file mode 100644
index 000000000..bbb5ef2c4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-2-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-origin: mask positioning area</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 {
+ border: 1px solid black;
+ width: 125px;
+ height: 125px;
+ position: relative;
+ }
+
+ div.inner {
+ width: 50px;
+ height: 50px;
+ background-color: purple;
+ position: absolute;
+ }
+
+ #pos-left-auto { left: 0px; top: 22px; }
+ #pos-left-bottom { left: 0px; top: 44px; }
+ #pos-right-top { left: 36px; top: 0px; }
+ #pos-right-bottom { left: 36px; top: 44px; }
+ </style>
+ </head>
+ <body>
+ <div class="outer"><div class="inner" id="pos-left-auto"></div></div>
+ <div class="outer"><div class="inner" id="pos-left-bottom"></div></div>
+ <div class="outer"><div class="inner" id="pos-right-top"></div></div>
+ <div class="outer"><div class="inner" id="pos-right-bottom"></div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-origin-2.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-2.html
new file mode 100644
index 000000000..90ee89b15
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-2.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-origin: mask positioning area</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-origin">
+ <link rel="match" href="mask-origin-2-ref.html">
+ <meta name="assert" content="Test checks whether setting mask origin to margin-box works correctly or not.">
+ <style type="text/css">
+ div.outer {
+ border: 1px solid black;
+ width: 125px;
+ height: 125px;
+ }
+
+ div.inner {
+ /*
+ * content box: 60 x 60
+ * padding box: 72 x 78
+ * border box: 80 x 90
+ * margin box: 86 x 94
+ */
+ margin: 1px 2px 3px 4px;
+ border: solid red;
+ border-width: 8px 2px 4px 6px;
+ padding: 6px 9px 12px 3px;
+ width: 60px;
+ height: 60px;
+ position: relative;
+ background-color: blue;
+ mask-image: url(support/50x50-opaque-blue.svg);
+ mask-repeat: no-repeat;
+ mask-origin: margin-box;
+ }
+
+ div.overflow {
+ position: absolute;
+ left: -10px;
+ top: -9px;
+ border: solid transparent;
+ border-width: 15px 13px 19px 13px;
+ width: 60px;
+ height: 60px;
+ background-color: purple;
+ }
+
+ #pos-left-auto { mask-position: left; }
+ #pos-left-bottom { mask-position: left bottom; }
+ #pos-right-top { mask-position: right top; }
+ #pos-right-bottom { mask-position: right bottom; }
+ </style>
+ </head>
+ <body>
+ <div class="outer">
+ <div class="inner" id="pos-left-auto">
+ <div class="overflow"></div>
+ </div>
+ </div>
+ <div class="outer">
+ <div class="inner" id="pos-left-bottom">
+ <div class="overflow"></div>
+ </div>
+ </div>
+ <div class="outer">
+ <div class="inner" id="pos-right-top">
+ <div class="overflow"></div>
+ </div>
+ </div>
+ <div class="outer">
+ <div class="inner" id="pos-right-bottom">
+ <div class="overflow"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1-ref.html
new file mode 100644
index 000000000..e323bd352
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1a.html
new file mode 100644
index 000000000..cee15ee71
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1b.html
new file mode 100644
index 000000000..669810e61
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1c.html
new file mode 100644
index 000000000..9a1671c3d
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-2-ref.html
new file mode 100644
index 000000000..46be4b8b0
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-2a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-2a.html
new file mode 100644
index 000000000..d8427338d
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-2b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-2b.html
new file mode 100644
index 000000000..b5f7b3105
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-3-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-3-ref.html
new file mode 100644
index 000000000..dd2630356
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-3a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-3a.html
new file mode 100644
index 000000000..724a1e3ab
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-3b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-3b.html
new file mode 100644
index 000000000..742a65ea1
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-4-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4-ref.html
new file mode 100644
index 000000000..7ddf68b28
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-4a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4a.html
new file mode 100644
index 000000000..9d17692e8
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-4b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4b.html
new file mode 100644
index 000000000..9b46546d3
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-4c.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4c.html
new file mode 100644
index 000000000..70959c098
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-4d.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4d.html
new file mode 100644
index 000000000..e5dce03b4
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-5-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-5-ref.html
new file mode 100644
index 000000000..dc8c9ecb9
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-5.html b/layout/reftests/w3c-css/submitted/masking/mask-position-5.html
new file mode 100644
index 000000000..295402263
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-6-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-6-ref.html
new file mode 100644
index 000000000..b94527eb0
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-6.html b/layout/reftests/w3c-css/submitted/masking/mask-position-6.html
new file mode 100644
index 000000000..e1d9eca55
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-7-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-7-ref.html
new file mode 100644
index 000000000..c3c8d85eb
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-7.html b/layout/reftests/w3c-css/submitted/masking/mask-position-7.html
new file mode 100644
index 000000000..30e9a7581
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1-ref.html
new file mode 100644
index 000000000..01ed86d12
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style type="text/css">
+ div.outer {
+ width: 128px;
+ height: 128px;
+ position: relative;
+ border: 1px solid black;
+ }
+
+ .color {
+ background-color: purple;
+ }
+
+ #default {
+ position: absolute;
+ width: 50px; height: 50px;
+ }
+
+ #repeat-x {
+ position: absolute;
+ width: 100%; height: 50px;
+ }
+
+ #repeat-y {
+ position: absolute;
+ width: 50px; height: 100%;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="outer color"></div>
+ <div class="outer">
+ <div class="color" id="default"></div>
+ </div>
+ <div class="outer color"></div>
+ <div class="outer">
+ <div class="color" id="repeat-x"></div>
+ </div>
+ <div class="outer">
+ <div class="color" id="repeat-y"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html
new file mode 100644
index 000000000..a7fc586fd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">
+ <link rel="match" href="mask-repeat-1-ref.html">
+ <meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
+ <style type="text/css">
+ div {
+ width: 128px;
+ height: 128px;
+ }
+
+ div.outer {
+ border: 1px solid black;
+ }
+
+ div.inner {
+ background-color: purple;
+ mask-image: url(support/50x50-opaque-blue.svg);
+ mask-position: left top;
+ }
+
+ #no-repeat {
+ mask-repeat: no-repeat no-repeat;
+ }
+ #repeat {
+ mask-repeat: repeat repeat;
+ }
+ #repeat-x {
+ mask-repeat: repeat no-repeat;
+ }
+ #repeat-y {
+ mask-repeat: no-repeat repeat;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="outer"><div class="inner"></div></div>
+ <div class="outer"><div class="inner" id="no-repeat"></div></div>
+ <div class="outer"><div class="inner" id="repeat"></div></div>
+ <div class="outer"><div class="inner" id="repeat-x"></div></div>
+ <div class="outer"><div class="inner" id="repeat-y"></div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2-ref.html
new file mode 100644
index 000000000..fa386cdac
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style type="text/css">
+ div.outer {
+ width: 128px;
+ height: 128px;
+ position: relative;
+ border: 1px solid black;
+ }
+
+ div.inner {
+ width: 50px;
+ height: 50px;
+ position: absolute;
+ background-color: purple;
+ }
+
+ #pos-top-left { left: 0; top: 0; }
+ #pos-top-right { right: 0; top: 0; }
+ #pos-bottom-left { left: 0; bottom: 0; }
+ #pos-bottom-right { right: 0; bottom: 0; }
+ </style>
+ </head>
+ <body>
+ <div class="outer">
+ <div class="inner" id="pos-top-left"></div>
+ <div class="inner" id="pos-top-right"></div>
+ <div class="inner" id="pos-bottom-left"></div>
+ <div class="inner" id="pos-bottom-right"></div>
+ </div>
+ <div class="outer">
+ <div class="inner" id="pos-top-left"></div>
+ <div class="inner" id="pos-top-right"></div>
+ </div>
+ <div class="outer">
+ <div class="inner" id="pos-top-left"></div>
+ <div class="inner" id="pos-bottom-left"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html
new file mode 100644
index 000000000..e349239fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">
+ <link rel="match" href="mask-repeat-2-ref.html">
+ <meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
+ <style type="text/css">
+ div {
+ width: 128px;
+ height: 128px;
+ }
+
+ div.outer {
+ border: 1px solid black;
+ }
+
+ div.inner {
+ background-color: purple;
+ mask-image: url(support/50x50-opaque-blue.svg);
+ mask-position: left top;
+ }
+
+ #space {
+ mask-repeat: space;
+ }
+ #space-x {
+ mask-repeat: space no-repeat;
+ }
+ #space-y {
+ mask-repeat: no-repeat space;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="outer"><div class="inner" id="space"></div></div>
+ <div class="outer"><div class="inner" id="space-x"></div></div>
+ <div class="outer"><div class="inner" id="space-y"></div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-3-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3-ref.html
new file mode 100644
index 000000000..4d4b869ce
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style type="text/css">
+ div.outer {
+ width: 150px;
+ height: 150px;
+ border: 1px solid black;
+ }
+
+ .color {
+ background-color: purple;
+ }
+
+ #round {
+ width: 150px;
+ height: 150px;
+ }
+
+ #round-x {
+ width: 150px;
+ height: 50px;
+ }
+
+ #round-y {
+ width: 50px;
+ height: 150px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="outer"><div class="color" id="round"></div></div>
+ <div class="outer"><div class="color" id="round-x"></div></div>
+ <div class="outer"><div class="color" id="round-y"></div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html
new file mode 100644
index 000000000..cb950d4f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">
+ <link rel="match" href="mask-repeat-3-ref.html">
+ <meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
+ <style type="text/css">
+ div {
+ width: 150px;
+ height: 150px;
+ }
+
+ div.outer {
+ border: 1px solid black;
+ }
+
+ div.inner {
+ background-color: purple;
+ mask-image: url(support/50x50-opaque-blue.svg);
+ mask-position: left top;
+ }
+
+ #round {
+ mask-repeat: round;
+ }
+ #round-x {
+ mask-repeat: round no-repeat;
+ }
+ #round-y {
+ mask-repeat: no-repeat round;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="outer"><div class="inner" id="round"></div></div>
+ <div class="outer"><div class="inner" id="round-x"></div></div>
+ <div class="outer"><div class="inner" id="round-y"></div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html
new file mode 100644
index 000000000..01d55f962
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.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-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-position: left top;
+ mask-size: auto auto;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length-ref.html
new file mode 100644
index 000000000..aa2123192
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length.html
new file mode 100644
index 000000000..5ef49cc61
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-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-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-position: left top;
+ mask-size: auto 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-percent.html
new file mode 100644
index 000000000..f2644bb1b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-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-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-position: left top;
+ mask-size: auto 15.625%;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-ref.html
new file mode 100644
index 000000000..73e3df270
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto.html
new file mode 100644
index 000000000..6560a81ee
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto.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-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-position: left top;
+ mask-size: auto;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border-ref.html
new file mode 100644
index 000000000..afbeb72f1
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border.html
new file mode 100644
index 000000000..a04557639
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border.html
@@ -0,0 +1,37 @@
+<!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-position: left top;
+ mask-clip: border-box;
+ mask-origin: border-box;
+ mask-size: contain;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding-ref.html
new file mode 100644
index 000000000..041e48d03
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding.html
new file mode 100644
index 000000000..4f321d9c5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding.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-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-position: left top;
+ mask-clip: padding-box;
+ mask-origin: padding-box;
+ mask-size: contain;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer"><div id="inner"></div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty-ref.html
new file mode 100644
index 000000000..50ab373eb
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty.html
new file mode 100644
index 000000000..fcae5ba0e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty.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-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-position: left top;
+ mask-size: contain;
+ mask-position: 50% 50%;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-ref.html
new file mode 100644
index 000000000..a7346bfcb
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain.html
new file mode 100644
index 000000000..19fc42d6e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain.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-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-position: left top;
+ mask-size: contain;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-cover-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-cover-ref.html
new file mode 100644
index 000000000..961019bf1
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-cover.html b/layout/reftests/w3c-css/submitted/masking/mask-size-cover.html
new file mode 100644
index 000000000..171e11805
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-cover.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">
+ <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-position: left top;
+ mask-origin: content-box;
+ mask-clip: content-box;
+ mask-size: cover;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer"></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html
new file mode 100644
index 000000000..7152f6ff9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.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-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-position: left top;
+ mask-size: 32px auto;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length-length-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-length-ref.html
new file mode 100644
index 000000000..5411da9f8
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-length.html
new file mode 100644
index 000000000..f9cf2cb6b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-length.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-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-position: left top;
+ mask-size: 32px 64px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent-ref.html
new file mode 100644
index 000000000..26195541d
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.html
new file mode 100644
index 000000000..ba5bbbc55
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.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-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-position: left top;
+ mask-size: 16px 25%;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length.html
new file mode 100644
index 000000000..961357e12
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length.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-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-position: left top;
+ mask-size: 32px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.html
new file mode 100644
index 000000000..603346d6e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.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-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-position: left top;
+ mask-size: 50% auto;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.html
new file mode 100644
index 000000000..4ac9c8e81
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.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-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-position: left top;
+ mask-size: 50% 32px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-ref.html
new file mode 100644
index 000000000..96a3d1bdc
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch-ref.html
new file mode 100644
index 000000000..2c023ec13
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch.html
new file mode 100644
index 000000000..69f89b8a9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch.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-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-position: left top;
+ mask-size: 100% 100%;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.html
new file mode 100644
index 000000000..7b04d9b6d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.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-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-position: left top;
+ mask-size: 50% 25%;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent.html
new file mode 100644
index 000000000..2e056df52
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent.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-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-position: left top;
+ mask-size: 50%;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="inner"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/reftest-stylo.list b/layout/reftests/w3c-css/submitted/masking/reftest-stylo.list
new file mode 100644
index 000000000..bc897987e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/reftest-stylo.list
@@ -0,0 +1,85 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# All mask properties test cases are meant to be failed
+# until bug 1251161 is fixed, which means enabling mask shorthand.
+# To enable it in compile time, refer to bug 1243734
+
+# mask-composite test cases
+== mask-composite-1a.html mask-composite-1a.html
+== mask-composite-1b.html mask-composite-1b.html
+== mask-composite-1c.html mask-composite-1c.html
+== mask-composite-2a.html mask-composite-2a.html
+== mask-composite-2b.html mask-composite-2b.html
+== mask-composite-2c.html mask-composite-2c.html
+
+# mask-mode test cases
+== mask-mode-a.html mask-mode-a.html
+== mask-mode-b.html mask-mode-b.html
+== mask-mode-to-mask-type.html mask-mode-to-mask-type.html
+
+# mask-image test cases
+== mask-image-1a.html mask-image-1a.html
+== mask-image-1b.html mask-image-1b.html
+== mask-image-1c.html mask-image-1c.html
+== mask-image-2.html mask-image-2.html
+== mask-image-3a.html mask-image-3a.html
+== mask-image-3b.html mask-image-3b.html
+== mask-image-3c.html mask-image-3c.html
+== mask-image-3d.html mask-image-3d.html
+== mask-image-3e.html mask-image-3e.html
+== mask-image-3f.html mask-image-3f.html
+== mask-image-3g.html mask-image-3g.html
+== mask-image-4a.html mask-image-4a.html
+== mask-image-4b.html mask-image-4b.html
+
+# mask-clip test cases
+== mask-clip-1.html mask-clip-1.html
+
+# mask-position test cases
+== mask-position-1a.html mask-position-1a.html
+== mask-position-1b.html mask-position-1b.html
+== mask-position-1c.html mask-position-1c.html
+== mask-position-2a.html mask-position-2a.html
+== mask-position-2b.html mask-position-2b.html
+== mask-position-3a.html mask-position-3a.html
+== mask-position-3b.html mask-position-3b.html
+== mask-position-4a.html mask-position-4a.html
+== mask-position-4b.html mask-position-4b.html
+== mask-position-4c.html mask-position-4c.html
+== mask-position-4d.html mask-position-4d.html
+== mask-position-5.html mask-position-5.html
+== mask-position-6.html mask-position-6.html
+== mask-position-7.html mask-position-7.html
+
+# mask-repeat test cases
+== mask-repeat-1.html mask-repeat-1.html
+# bug 1258623
+== mask-repeat-2.html mask-repeat-2.html
+# bug 1258626
+== mask-repeat-3.html mask-repeat-3.html
+# bug 1258626
+
+# mask-origin test cases
+== mask-origin-1.html mask-origin-1.html
+# bug 1258286
+== mask-origin-2.html mask-origin-2.html
+# bug 1260094
+
+# mask-size test cases
+== mask-size-auto.html mask-size-auto.html
+== mask-size-auto-auto.html mask-size-auto-auto.html
+== mask-size-auto-length.html mask-size-auto-length.html
+== mask-size-auto-percent.html mask-size-auto-percent.html
+== mask-size-contain-clip-border.html mask-size-contain-clip-border.html
+== mask-size-contain-clip-padding.html mask-size-contain-clip-padding.html
+== mask-size-contain-position-fifty-fifty.html mask-size-contain-position-fifty-fifty.html
+== mask-size-contain.html mask-size-contain.html
+== mask-size-cover.html mask-size-cover.html
+== mask-size-length.html mask-size-length.html
+== mask-size-length-auto.html mask-size-length-auto.html
+== mask-size-length-length.html mask-size-length-length.html
+== mask-size-length-percent.html mask-size-length-percent.html
+== mask-size-percent.html mask-size-percent.html
+== mask-size-percent-auto.html mask-size-percent-auto.html
+== mask-size-percent-length.html mask-size-percent-length.html
+== mask-size-percent-percent.html mask-size-percent-percent.html
+== mask-size-percent-percent-stretch.html mask-size-percent-percent-stretch.html
diff --git a/layout/reftests/w3c-css/submitted/masking/reftest.list b/layout/reftests/w3c-css/submitted/masking/reftest.list
new file mode 100644
index 000000000..0cb5611c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/reftest.list
@@ -0,0 +1,112 @@
+# For those test items with failure type fuzzy-if added, please refer to bug 1231643#c10.
+
+# mask-composite test cases
+fails == mask-composite-1a.html mask-composite-1-ref.html
+fails == mask-composite-1b.html mask-composite-1-ref.html
+fails == mask-composite-1c.html mask-composite-1-ref.html
+fails == mask-composite-2a.html mask-composite-2-ref.html
+fails == mask-composite-2b.html mask-composite-2-ref.html
+fails == mask-composite-2c.html mask-composite-2-ref.html
+
+# mask-mode test cases
+fails == mask-mode-a.html mask-mode-ref.html
+fails == mask-mode-b.html mask-mode-ref.html
+fails == mask-mode-to-mask-type.html mask-mode-to-mask-type-ref.html
+
+# 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
+== mask-image-1d.html mask-image-1-ref.html
+fails == mask-image-2.html mask-image-2-ref.html
+fails == mask-image-3a.html mask-image-3-ref.html
+fails == mask-image-3b.html mask-image-3-ref.html
+fails == mask-image-3c.html mask-image-3-ref.html
+fails == mask-image-3d.html mask-image-3-ref.html
+fails == mask-image-3e.html mask-image-3-ref.html
+fails == mask-image-3f.html mask-image-3-ref.html
+fails == mask-image-3g.html mask-image-3-ref.html
+fails == mask-image-3h.html mask-image-3-ref.html
+fails == mask-image-4a.html blank.html
+fails == mask-image-4b.html blank.html
+== mask-image-5.html mask-image-5-ref.html
+== mask-image-6.html mask-image-6-ref.html
+
+# mask-clip test cases
+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
+
+# mask-repeat test cases
+fails == mask-repeat-1.html mask-repeat-1-ref.html
+fails == mask-repeat-2.html mask-repeat-2-ref.html
+fails == mask-repeat-3.html mask-repeat-3-ref.html
+
+# mask-origin test cases
+fails == mask-origin-1.html mask-origin-1-ref.html
+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
+
+default-preferences pref(layout.css.clip-path-shapes.enabled,true)
+
+fuzzy-if(winWidget,1,21) == clip-path-contentBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-contentBox-1b.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-contentBox-1c.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-paddingBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-paddingBox-1b.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-paddingBox-1c.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-borderBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-borderBox-1b.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-borderBox-1c.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-marginBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-fillBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-strokeBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-strokeBox-1b.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-viewBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-viewBox-1b.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-viewBox-1c.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,9,98) == clip-path-geometryBox-2.html clip-path-geometryBox-2-ref.html
+
+== clip-path-localRef-1.html clip-path-localRef-1-ref.html
+
+default-preferences
+
+# mask with opacity test cases
+fails == mask-opacity-1a.html mask-opacity-1-ref.html
+fails == mask-opacity-1b.html mask-opacity-1-ref.html
+fuzzy(1,5000) == mask-opacity-1c.html mask-opacity-1-ref.html
+
+== clip-path-mix-blend-mode-1.html clip-path-mix-blend-mode-1-ref.html
diff --git a/layout/reftests/w3c-css/submitted/masking/support/50x100-opaque-blue.svg b/layout/reftests/w3c-css/submitted/masking/support/50x100-opaque-blue.svg
new file mode 100644
index 000000000..c9a82b493
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/50x50-opaque-blue.svg b/layout/reftests/w3c-css/submitted/masking/support/50x50-opaque-blue.svg
new file mode 100644
index 000000000..a68a1fa5b
--- /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>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.png b/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.png
new file mode 100644
index 000000000..3b72d5ce5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.svg
new file mode 100644
index 000000000..38cae60fc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.png b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.png
new file mode 100644
index 000000000..65b1e88a5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg
new file mode 100644
index 000000000..459f21d5c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <rect x="0" y="0" width="100%" height="50%" fill="blue" fill-opacity="0"/>
+ <rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-luminance-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/blue-luminance-100x100.svg
new file mode 100644
index 000000000..5b79155b6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/blue-luminance-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="100%" height="100%" fill="RGB(238,238,255)" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/green-100x100.png b/layout/reftests/w3c-css/submitted/masking/support/green-100x100.png
new file mode 100644
index 000000000..d65838b7f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/green-100x100.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/masking/support/green-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/green-100x100.svg
new file mode 100644
index 000000000..87fd691a0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/green-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="100%" height="100%" fill="lime" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/green-luminance-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/green-luminance-100x100.svg
new file mode 100644
index 000000000..795bd7e5c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/green-luminance-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="100%" height="100%" fill="RGB(73,73,255)" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg
new file mode 100644
index 000000000..78f699355
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <defs>
+ <mask id="mask" mask-type="alpha">
+ <rect x="0" y="0" width="100" height="50" fill-opacity="1"/>
+ <rect x="0" y="50" width="100" height="50" fill-opacity="0"/>
+ </mask>
+ </defs>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/red-100x100.png b/layout/reftests/w3c-css/submitted/masking/support/red-100x100.png
new file mode 100644
index 000000000..43b8e542a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/red-100x100.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/masking/support/red-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/red-100x100.svg
new file mode 100644
index 000000000..0ba285bf0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/red-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="100%" height="100%" fill="red" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/red-luminance-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/red-luminance-100x100.svg
new file mode 100644
index 000000000..05075f521
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/red-luminance-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="100%" height="100%" fill="RGB(201,201,255)" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.png b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.png
new file mode 100644
index 000000000..f45174665
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg
new file mode 100644
index 000000000..658aed9f1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <rect x="0" y="0" width="100%" height="50%" fill="blue" fill-opacity="1"/>
+ <rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="0"/>
+</svg>