Bug 1294660: Part 2 - update mask test cases and enable mask shorthand reftest.
MozReview-Commit-ID: NlpjAqmHNT
--- a/layout/reftests/w3c-css/submitted/masking/mask-image-3b.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3b.html
@@ -13,16 +13,17 @@
<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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-image-3c.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3c.html
@@ -13,16 +13,17 @@
<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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-image-3d.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3d.html
@@ -13,16 +13,17 @@
<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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-image-3e.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3e.html
@@ -20,16 +20,17 @@
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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html
@@ -16,16 +16,17 @@
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;
}
--- a/layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html
@@ -16,16 +16,17 @@
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;
}
--- a/layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html
@@ -16,16 +16,17 @@
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;
}
--- a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html
@@ -17,16 +17,17 @@
#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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length.html
@@ -16,16 +16,17 @@
}
#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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-percent.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-percent.html
@@ -16,16 +16,17 @@
}
#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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-size-auto.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto.html
@@ -17,16 +17,17 @@
#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>
--- 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
@@ -17,16 +17,17 @@
#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">
--- 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
@@ -17,16 +17,17 @@
#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>
--- 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
@@ -17,16 +17,17 @@
#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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-size-contain.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain.html
@@ -17,16 +17,17 @@
#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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-size-cover.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-cover.html
@@ -11,16 +11,17 @@
<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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html
@@ -17,16 +17,17 @@
#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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-size-length-length.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-length.html
@@ -17,16 +17,17 @@
#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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.html
@@ -17,16 +17,17 @@
#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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-size-length.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length.html
@@ -17,16 +17,17 @@
#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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.html
@@ -17,16 +17,17 @@
#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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.html
@@ -17,16 +17,17 @@
#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>
--- 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
@@ -17,16 +17,17 @@
#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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.html
@@ -17,16 +17,17 @@
#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>
--- a/layout/reftests/w3c-css/submitted/masking/mask-size-percent.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent.html
@@ -17,16 +17,17 @@
#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>
--- a/layout/reftests/w3c-css/submitted/masking/reftest.list
+++ b/layout/reftests/w3c-css/submitted/masking/reftest.list
@@ -1,81 +1,79 @@
-# 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
+# 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-composite-1a.html mask-composite-1-ref.html
+fuzzy-if(skiaContent,64,200) == mask-composite-1b.html mask-composite-1-ref.html
+== mask-composite-1c.html mask-composite-1-ref.html
+fuzzy-if(skiaContent||winWidget,1,5000) == mask-composite-2a.html mask-composite-2-ref.html
+fuzzy-if(skiaContent||winWidget,64,5200) == mask-composite-2b.html mask-composite-2-ref.html
+== 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
+fuzzy-if(skiaContent,1,30000) == mask-mode-a.html mask-mode-ref.html
+fuzzy-if(skiaContent,1,30000) == mask-mode-b.html mask-mode-ref.html
+fuzzy-if(skiaContent,1,30000) == 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-1a.html mask-image-1-ref.html
+== mask-image-1b.html mask-image-1-ref.html
+== 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-4a.html blank.html
-fails == mask-image-4b.html blank.html
+fuzzy-if(skiaContent||winWidget,1,20000) == mask-image-2.html mask-image-2-ref.html
+== mask-image-3a.html mask-image-3-ref.html
+== mask-image-3b.html mask-image-3-ref.html
+fuzzy-if(skiaContent||winWidget,1,43) == mask-image-3c.html mask-image-3-ref.html
+fuzzy-if(skiaContent||winWidget,1,43) == mask-image-3d.html mask-image-3-ref.html
+== mask-image-3e.html mask-image-3-ref.html
+fuzzy-if(skiaContent,50,50) == mask-image-3f.html mask-image-3-ref.html
+== mask-image-3g.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-clip test cases
-fails == mask-clip-1.html mask-clip-1-ref.html
+== 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-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
+== mask-position-3b.html mask-position-3-ref.html
+== mask-position-4a.html mask-position-4-ref.html
+== mask-position-4b.html mask-position-4-ref.html
+== mask-position-4c.html mask-position-4-ref.html
+== mask-position-4d.html mask-position-4-ref.html
+== mask-position-5.html mask-position-5-ref.html
+== mask-position-6.html mask-position-6-ref.html
+== mask-position-7.html mask-position-7-ref.html
# mask-repeat test cases
-fails == mask-repeat-1.html mask-repeat-1-ref.html # bug 1258623
-fails == mask-repeat-2.html mask-repeat-2-ref.html # bug 1258626
-fails == mask-repeat-3.html mask-repeat-3-ref.html # bug 1258626
+== mask-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
-fails == mask-origin-1.html mask-origin-1-ref.html # bug 1258286
+== 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
+== 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
+== mask-size-contain-position-fifty-fifty.html mask-size-contain-position-fifty-fifty-ref.html
+== mask-size-contain.html mask-size-contain-ref.html
+== mask-size-cover.html mask-size-cover-ref.html
+== mask-size-length.html mask-size-length-length-ref.html
+== mask-size-length-auto.html mask-size-length-length-ref.html
+== mask-size-length-length.html mask-size-length-length-ref.html
+== mask-size-length-percent.html mask-size-length-percent-ref.html
+== mask-size-percent.html mask-size-percent-percent-ref.html
+== mask-size-percent-auto.html mask-size-percent-percent-ref.html
+== mask-size-percent-length.html mask-size-percent-percent-ref.html
+== mask-size-percent-percent.html mask-size-percent-percent-ref.html
+== mask-size-percent-percent-stretch.html mask-size-percent-percent-stretch-ref.html
