зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1243675 - Part 6. Add mask-size property reftest. r=dbaron
MozReview-Commit-ID: AKYv1z4rBCV
This commit is contained in:
Astley Chen
Родитель
866b7b078c
Коммит
379d4f965b
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-auto-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: auto auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-auto-length-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: auto 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-auto-length-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: auto 15.625%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
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-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-auto-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-contain-clip-border-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#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-clip: border-box;
|
||||
mask-origin: border-box;
|
||||
mask-size: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
border: 20px solid white;
|
||||
width: 24px;
|
||||
height: 88px;
|
||||
}
|
||||
|
||||
#innermost {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner">
|
||||
<div id="innermost"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-contain-clip-padding-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#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-clip: padding-box;
|
||||
mask-origin: padding-box;
|
||||
mask-size: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner1 {
|
||||
width: 64px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#inner2 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
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-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-contain-position-fifty-fifty-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: 50% 50%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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: 10px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
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-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-contain-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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: 10px solid transparent;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
background-clip: content-box;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-cover-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<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-origin: content-box;
|
||||
mask-clip: content-box;
|
||||
mask-size: cover;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-length-length-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x100-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 32px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 32px;
|
||||
height: 64px;
|
||||
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-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-length-length-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x100-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 32px 64px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
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-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-length-percent-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x100-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 16px 25%;
|
||||
}
|
||||
</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-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-length-length-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x100-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 32px;
|
||||
}
|
||||
</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-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-percent-percent-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 50% auto;
|
||||
}
|
||||
</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-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-percent-percent-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 50% 32px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-size: mask layer size</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: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: purple;
|
||||
}
|
||||
</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-size: mask layer size</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 {
|
||||
width: 60px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
height: 60px;
|
||||
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-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-percent-percent-stretch-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 60px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/transparent-100x50-blue-100x50.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
</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-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-percent-percent-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 50% 25%;
|
||||
}
|
||||
</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-size: mask layer size</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-size">
|
||||
<link rel="match" href="mask-size-percent-percent-ref.html">
|
||||
<meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 50%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -45,3 +45,23 @@ fails == mask-repeat-3.html mask-repeat-3-ref.html # bug 1258626
|
|||
# mask-origin test cases
|
||||
fails == mask-origin-1.html mask-origin-1-ref.html # bug 1258286
|
||||
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
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0"?>
|
||||
<svg width="50" height="100" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="50" height="100" fill="blue" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 170 B |
Загрузка…
Ссылка в новой задаче