зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1243675 - Part 3. Add mask-position property reftest. r=dbaron
MozReview-Commit-ID: 5ViQaPZ5BI
This commit is contained in:
Astley Chen
Родитель
66ebeef592
Коммит
ef2ad5e844
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: position 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 {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
#inner1 { right: 10px; bottom: 35px; }
|
||||
#inner2 { right: 30px; bottom: 25px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner" id="inner1"></div></div>
|
||||
<div class="outer"><div class="inner" id="inner1"></div></div>
|
||||
<div class="outer"><div class="inner" id="inner2"></div></div>
|
||||
<div class="outer"><div class="inner" id="inner2"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: mask positioning</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-position">
|
||||
<link rel="match" href="mask-position-1-ref.html">
|
||||
<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#inner1 { mask-position: right 20% bottom 70%; }
|
||||
#inner2 { mask-position: bottom 70% right 20%; }
|
||||
#inner3 { mask-position: right 30px bottom 25px; }
|
||||
#inner4 { mask-position: bottom 25px right 30px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner" id="inner1"></div></div>
|
||||
<div class="outer"><div class="inner" id="inner2"></div></div>
|
||||
<div class="outer"><div class="inner" id="inner3"></div></div>
|
||||
<div class="outer"><div class="inner" id="inner4"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: mask positioning</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-position">
|
||||
<link rel="match" href="mask-position-1-ref.html">
|
||||
<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#inner1 { mask-position: left 40px top 15px; }
|
||||
#inner2 { mask-position: top 30% left 80%; }
|
||||
#inner3 { mask-position: left 20px top 25px }
|
||||
#inner4 { mask-position: top 25px left 20px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner" id="inner1"></div></div>
|
||||
<div class="outer"><div class="inner" id="inner2"></div></div>
|
||||
<div class="outer"><div class="inner" id="inner3"></div></div>
|
||||
<div class="outer"><div class="inner" id="inner4"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: mask positioning</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-position">
|
||||
<link rel="match" href="mask-position-1-ref.html">
|
||||
<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#inner1 { mask-position: left 80% bottom 70%; }
|
||||
#inner2 { mask-position: right 20% top 30%; }
|
||||
#inner3 { mask-position: bottom 50% left 40%; }
|
||||
#inner4 { mask-position: right 60% top 50%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner" id="inner1"></div></div>
|
||||
<div class="outer"><div class="inner" id="inner2"></div></div>
|
||||
<div class="outer"><div class="inner" id="inner3"></div></div>
|
||||
<div class="outer"><div class="inner" id="inner4"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: position 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">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: mask positioning</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-position">
|
||||
<link rel="match" href="mask-position-2-ref.html">
|
||||
<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: left 40% bottom 60%;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: mask positioning</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-position">
|
||||
<link rel="match" href="mask-position-2-ref.html">
|
||||
<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: 40% 40%;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: position 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">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
margin-left: 25px;
|
||||
margin-top: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: mask positioning</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-position">
|
||||
<link rel="match" href="mask-position-3-ref.html">
|
||||
<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: center bottom 80%;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: mask positioning</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-position">
|
||||
<link rel="match" href="mask-position-3-ref.html">
|
||||
<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: center 20%;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: position 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">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
margin-left: 0px;
|
||||
margin-top: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: mask positioning</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-position">
|
||||
<link rel="match" href="mask-position-4-ref.html">
|
||||
<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: left center;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: mask positioning</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-position">
|
||||
<link rel="match" href="mask-position-4-ref.html">
|
||||
<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: left;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: mask positioning</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-position">
|
||||
<link rel="match" href="mask-position-4-ref.html">
|
||||
<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: left bottom 50%;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: mask positioning</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-position">
|
||||
<link rel="match" href="mask-position-4-ref.html">
|
||||
<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask: url(support/50x50-opaque-blue.svg) left no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: position 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">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#inner1 {
|
||||
margin-left: 35px;
|
||||
margin-top: 0px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
#inner2 {
|
||||
margin-left: 35px;
|
||||
margin-top: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner1"></div>
|
||||
<div id="inner2"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: mask positioning</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-position">
|
||||
<link rel="match" href="mask-position-5-ref.html">
|
||||
<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: top, bottom;
|
||||
mask-repeat: no-repeat, no-repeat;
|
||||
mask-image: url(support/50x50-opaque-blue.svg),
|
||||
url(support/50x50-opaque-blue.svg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: position 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">
|
||||
.outer {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
margin-left: 20px;
|
||||
margin-top: 50px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: mask positioning</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-position">
|
||||
<link rel="match" href="mask-position-6-ref.html">
|
||||
<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.outer > div {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#inner1 {
|
||||
mask-position: left 20px bottom;
|
||||
}
|
||||
|
||||
#inner2 {
|
||||
mask-position: left 40% bottom;
|
||||
}
|
||||
|
||||
#inner3 {
|
||||
mask-position: right 60% bottom;
|
||||
}
|
||||
|
||||
#inner4 {
|
||||
mask-position: right 30px bottom;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div id="inner1"></div></div>
|
||||
<div class="outer"><div id="inner2"></div></div>
|
||||
<div class="outer"><div id="inner3"></div></div>
|
||||
<div class="outer"><div id="inner4"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: position 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">
|
||||
.outer {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
margin-left: 50px;
|
||||
margin-top: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-position: mask positioning</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-position">
|
||||
<link rel="match" href="mask-position-7-ref.html">
|
||||
<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.outer > div {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#inner1 {
|
||||
mask-position: right top 40%;
|
||||
}
|
||||
|
||||
#inner2 {
|
||||
mask-position: right top 20px;
|
||||
}
|
||||
|
||||
#inner3 {
|
||||
mask-position: right bottom 60%;
|
||||
}
|
||||
|
||||
#inner4 {
|
||||
mask-position: right bottom 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div id="inner1"></div></div>
|
||||
<div class="outer"><div id="inner2"></div></div>
|
||||
<div class="outer"><div id="inner3"></div></div>
|
||||
<div class="outer"><div id="inner4"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -20,3 +20,19 @@ fails == mask-image-2.html mask-image-2-ref.html
|
|||
|
||||
# mask-clip test cases
|
||||
fails == 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
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0"?>
|
||||
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="50" height="50" fill="blue" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 168 B |
Загрузка…
Ссылка в новой задаче