mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1346265 - Part 3. Test cases. r=mstange 

Since -moz-element is moz only feature, the test case for -moz-element is
created under reftests/image-element folder.

MozReview-Commit-ID: G4V0G3cX7qr

--HG--
extra : rebase_source : f681d64fe4b9331a35fb082c7ed135f58c3f5a9d
This commit is contained in:
cku 2017-03-13 12:47:30 +08:00
Родитель e17dd9d6ff
Коммит 99c7a15344
5 изменённых файлов: 174 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

48
layout/reftests/image-element/mask-image-element-ref.html Normal file
Просмотреть файл

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<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('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/></svg>');
}
div.alpha {
left: 120px;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/></svg>');
}
div.luminance1 {
left: 230px;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="rgb(238,238,255)" fill-opacity="1"/></svg>');
}
div.luminance2 {
left: 340px;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="rgb(201,201,255)" fill-opacity="1"/></svg>');
}
div.luminance3 {
left: 450px;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="rgb(73,73,255)" fill-opacity="1"/></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>

63
layout/reftests/image-element/mask-image-element.html Normal file
Просмотреть файл

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<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: -moz-element(#blue-bg);
}
div.alpha {
left: 120px;
mask-mode: alpha;
mask-image: -moz-element(#blue-bg);
}
div.luminance1 {
left: 230px;
mask-mode: luminance;
mask-image: -moz-element(#blue-bg);
}
div.luminance2 {
left: 340px;
mask-mode: luminance;
mask-image: -moz-element(#red-bg);
}
div.luminance3 {
left: 450px;
mask-mode: luminance;
mask-image: -moz-element(#lime-bg);
}
</style>
</head>
<body>
<div class="auto"></div>
<div class="alpha"></div>
<div class="luminance1"></div>
<div class="luminance2"></div>
<div class="luminance3"></div>
<div style="overflow:hidden; height:0;">
<div id="blue-bg" style="width:100px; height:100px; background-color: blue;"> </div>
</div>
<div style="overflow:hidden; height:0;">
<div id="red-bg" style="width:100px; height:100px; background-color: red;"></div>
</div>
<div style="overflow:hidden; height:0;">
<div id="lime-bg" style="width:100px; height:100px; background-color: lime;"></div>
</div>
</body>
</html>

2
layout/reftests/image-element/reftest.list
Просмотреть файл

@ -45,3 +45,5 @@ HTTP == invalidate-1.html invalidate-1-ref.html
== pattern-html-01.html pattern-html-01-ref.svg
== pattern-html-02.html pattern-html-02-ref.svg
== referenced-from-binding-01.html referenced-from-binding-01-ref.html
fuzzy-if(skiaContent,1,30000) == mask-image-element.html mask-image-element-ref.html

60
layout/reftests/w3c-css/submitted/masking/mask-mode-c.html Normal file
Просмотреть файл

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Masking: mask-mode with 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="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: linear-gradient(blue 0%, blue 100%);
}
div.alpha {
left: 120px;
mask-mode: alpha;
mask-image: linear-gradient(blue 0%, blue 100%);
}
div.luminance1 {
left: 230px;
mask-mode: luminance;
mask-image: linear-gradient(blue 0%, blue 100%);
}
div.luminance2 {
left: 340px;
mask-mode: luminance;
mask-image: linear-gradient(red 0%, red 100%);
}
div.luminance3 {
left: 450px;
mask-mode: luminance;
mask-image: linear-gradient(lime 0%, lime 100%);
}
</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>

1
layout/reftests/w3c-css/submitted/masking/reftest.list
Просмотреть файл

@ -11,6 +11,7 @@ fuzzy-if(skiaContent||winWidget,64,5200) == mask-composite-2b.html mask-composit
# mask-mode test cases
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-c.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