зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1243675 - Part 1. Add mask-image property reftest. r=dbaron
MozReview-Commit-ID: CvjgVprfoaw
This commit is contained in:
Astley Chen
Родитель
9f800c9f45
Коммит
f3e2585697
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,6 +1,19 @@
|
|||
fails == mask-composite-1a.html mask-composite-1-ref.html # bug 1251161
|
||||
fails == mask-composite-1b.html mask-composite-1-ref.html # bug 1251161
|
||||
fails fails-if(cocoaWidget) == mask-composite-2a.html mask-composite-2-ref.html # bug 1231643; bug 1251161
|
||||
fails fails-if(cocoaWidget) == mask-composite-2b.html mask-composite-2-ref.html # bug 1231643; bug 1251161
|
||||
fails == mask-mode-a.html mask-mode-ref.html # bug 1251161
|
||||
fails == mask-mode-b.html mask-mode-ref.html # bug 1251161
|
||||
# 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
|
||||
fails == mask-composite-1a.html mask-composite-1-ref.html
|
||||
fails == mask-composite-1b.html mask-composite-1-ref.html
|
||||
fails fails-if(cocoaWidget) == mask-composite-2a.html mask-composite-2-ref.html # bug 1231643;
|
||||
fails fails-if(cocoaWidget) == mask-composite-2b.html mask-composite-2-ref.html # bug 1231643;
|
||||
|
||||
# mask-mode test cases
|
||||
fails == mask-mode-a.html mask-mode-ref.html
|
||||
fails == mask-mode-b.html mask-mode-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
|
||||
fails == mask-image-2.html mask-image-2-ref.html
|
||||
|
|
|
|||
|
|
@ -1,5 +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>
|
||||
<rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 239 B После Ширина: | Высота: | Размер: 241 B |
|
|
@ -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>
|
||||
|
После Ширина: | Высота: | Размер: 290 B |
|
|
@ -1,5 +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>
|
||||
<rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="0"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 239 B После Ширина: | Высота: | Размер: 241 B |
Загрузка…
Ссылка в новой задаче