Bug 1311270 - Part 9. Test cases for new mask-clip/mask-origin values.
MozReview-Commit-ID: 2zdh6tHXXqg
--- a/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html
@@ -27,16 +27,24 @@
}
div.content {
left: 210px;
margin: 15px 13px;
width: 40px;
height: 11px;
}
+
+ div.no-clip {
+ left: 310px;
+ margin: 1px 4px;
+ width: 100px;
+ height: 25px;
+ }
</style>
</head>
<body>
<div class="color border"></div>
<div class="color padding"></div>
<div class="color content"></div>
+ <div class="color no-clip"></div>
</body>
</html>
--- a/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html
@@ -2,19 +2,19 @@
<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.">
+ <meta name="assert" content="border-box, padding-box, content-box and no-clip values of mask-clip should clip to the appropriate boxes.">
<style type="text/css">
- div {
+ div.outer {
/*
* 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;
@@ -42,16 +42,36 @@
left: 110px;
mask-clip: padding-box;
}
div.content {
left: 210px;
mask-clip: content-box;
}
+
+ div.no-clip {
+ background-color: yellow;
+ left: 310px;
+ mask-clip: no-clip;
+ }
+
+ div.no-clip-inner {
+ background-color: purple;
+ position: absolute;
+ /* allign with border area of the parent*/
+ top: -8px;
+ left: -6px;
+ width: 100px;
+ height: 50px;
+ }
+
</style>
</head>
<body>
<div class="outer mask border"></div>
<div class="outer mask padding"></div>
<div class="outer mask content"></div>
+ <div class="outer mask no-clip">
+ <div class="no-clip-inner"></div>
+ </div>
</body>
</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-2-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS mask-clip 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">
+ svg {
+ position: absolute;
+ top: 10px;
+ border: 1px solid black;
+ }
+ </style>
+ </head>
+ <body>
+ <svg width="200" height="200" style="left: 10px;">
+ <rect x="20" y="20" width="100" height="100" fill="blue"/>
+ </svg>
+ <svg width="200" height="200" style="left: 220px;">
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </svg>
+ <svg width="200" height="200" style="left: 10px; top: 220px;">
+ <rect x="50" y="50" width="50" height="50" fill="green"/>
+ <rect x="60" y="60" width="40" height="40" fill="blue"/>
+ </svg>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-2.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-clip: clip mask 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-clip">
+ <link rel="match" href="mask-clip-2-ref.html">
+ <meta name="assert" content="fill-box, stroke-box and view-box values of mask-clip should clip to the appropriate boxes.">
+ <style type="text/css">
+ svg {
+ position: absolute;
+ top: 10px;
+ border: 1px solid black;
+ }
+
+ rect.mask {
+ fill: blue;
+ mask-origin: fill-box;
+ mask-repeat: no-repeat;
+ mask-image: url(support/50x50-opaque-blue.svg);
+ }
+
+ rect.view {
+ mask-clip: view-box;
+ }
+
+ rect.fill {
+ mask-clip: fill-box;
+ }
+
+ rect.stroke {
+ mask-clip: stroke-box;
+ }
+ </style>
+ </head>
+ <body>
+ <svg width="200" height="200" viewBox="100 100 100 100" preserveAspectRatio="none" style="left: 10px;">
+ <rect class="view mask" x="110" y="110" width="50" height="100"/>
+ </svg>
+ <svg width="200" height="200" style="left: 220px;">
+ <rect class="fill mask" x="50" y="50" width="150" height="150"/>
+ </svg>
+ <svg width="200" height="200" style="left: 10px; top: 220px;">
+ <rect class="stroke mask" x="50" y="50" width="100" height="100" stroke="green" stroke-width="20"/>
+ </svg>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-3-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-origin: mask positioning area</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">
+ svg {
+ position: absolute;
+ top: 10px;
+ border: 1px solid black;
+ }
+ </style>
+ </head>
+ <body>
+ <svg width="200" height="200" style="left: 10px;">
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </svg>
+ <svg width="200" height="200" style="left: 240px;">
+ <rect x="50" y="50" width="50" height="50" fill="green"/>
+ <rect x="60" y="60" width="40" height="40" fill="blue"/>
+ </svg>
+ <svg width="200" height="200" style="left: 10px; top: 220px;">
+ <rect x="60" y="40" width="50" height="50" fill="green"/>
+ <rect x="80" y="60" width="30" height="30" fill="blue"/>
+ </svg>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-3.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask-origin: mask positioning 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-origin">
+ <link rel="match" href="mask-origin-3-ref.html">
+ <meta name="assert" content="Test checks whether setting mask position area works correctly or not.">
+ <style type="text/css">
+ svg {
+ position: absolute;
+ top: 10px;
+ border: 1px solid black;
+ }
+ rect.mask {
+ fill: blue;
+ mask-origin: fill-box;
+ mask-clip: fill-box;
+ mask-repeat: no-repeat;
+ mask-image: url(support/50x50-opaque-blue.svg);
+ }
+
+ rect.view {
+ mask-origin: view-box;
+ mask-clip: view-box;
+ }
+
+ rect.fill {
+ mask-origin: fill-box;
+ mask-clip: stroke-box;
+ }
+
+ rect.stroke {
+ mask-origin: stroke-box;
+ mask-clip: stroke-box;
+ }
+ </style>
+ </head>
+ <body>
+ <svg width="200" height="200" viewBox="100 100 100 100" preserveAspectRatio="none" style="left: 10px;">
+ <rect class="view mask" x="125" y="125" width="100" height="100"/>
+ </svg>
+ <svg width="200" height="200" style="left: 240px;">
+ <rect class="fill mask" x="50" y="50" width="80" height="80" stroke="green" stroke-width="20"/>
+ </svg>
+ <svg width="200" height="200" style="left: 10px; top: 220px;">
+ <rect class="stroke mask" x="70" y="50" width="80" height="80" stroke="green" stroke-width="20"/>
+ </svg>
+ </body>
+</html>
--- a/layout/reftests/w3c-css/submitted/masking/reftest.list
+++ b/layout/reftests/w3c-css/submitted/masking/reftest.list
@@ -30,16 +30,17 @@ pref(layout.css.clip-path-shapes.enabled
fuzzy-if(skiaContent,71,203) == mask-image-3i.html mask-image-3-ref.html
== mask-image-4a.html blank.html
== 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
== mask-clip-1.html mask-clip-1-ref.html
+== mask-clip-2.html mask-clip-2-ref.html
# mask-position test cases
== mask-position-1a.html mask-position-1-ref.html
== mask-position-1b.html mask-position-1-ref.html
== mask-position-1c.html mask-position-1-ref.html
== mask-position-2a.html mask-position-2-ref.html
== mask-position-2b.html mask-position-2-ref.html
== mask-position-3a.html mask-position-3-ref.html
@@ -55,16 +56,17 @@ fuzzy-if(skiaContent,71,203) == mask-ima
# mask-repeat test cases
== mask-repeat-1.html mask-repeat-1-ref.html
== mask-repeat-2.html mask-repeat-2-ref.html
== mask-repeat-3.html mask-repeat-3-ref.html
# mask-origin test cases
== mask-origin-1.html mask-origin-1-ref.html
fails == mask-origin-2.html mask-origin-2-ref.html # bug 1260094
+== mask-origin-3.html mask-origin-3-ref.html
# mask-size test cases
== mask-size-auto.html mask-size-auto-ref.html
== mask-size-auto-auto.html mask-size-auto-ref.html
== mask-size-auto-length.html mask-size-auto-length-ref.html
== mask-size-auto-percent.html mask-size-auto-length-ref.html
== mask-size-contain-clip-border.html mask-size-contain-clip-border-ref.html
== mask-size-contain-clip-padding.html mask-size-contain-clip-padding-ref.html
