зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1243675 - Part 4. Add mask-repeat property reftest. r=dbaron
MozReview-Commit-ID: 7DO9BmHhx8A
This commit is contained in:
Astley Chen
Родитель
ef2ad5e844
Коммит
5b939ccbff
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!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);
|
||||
}
|
||||
|
||||
#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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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);
|
||||
}
|
||||
|
||||
#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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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);
|
||||
}
|
||||
|
||||
#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>
|
||||
|
|
@ -36,3 +36,8 @@ 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 # 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
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче