90 lines
2.8 KiB
HTML
90 lines
2.8 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<style type="text/css">
|
|
.s300
|
|
{
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.s250
|
|
{
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
.s200
|
|
{
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
div
|
|
{
|
|
margin: 6px;
|
|
border: 1px dotted green;
|
|
background-color: black;
|
|
-webkit-mask-image: url(resources/white.gif);
|
|
-webkit-mask-origin: padding;
|
|
-webkit-mask-size: 25px 25px;
|
|
}
|
|
|
|
div
|
|
{
|
|
padding: 1px;
|
|
float: left;
|
|
}
|
|
|
|
p
|
|
{
|
|
clear: both;
|
|
}
|
|
|
|
.negative
|
|
{
|
|
-webkit-mask-position: -13px -13px;
|
|
}
|
|
|
|
.positive
|
|
{
|
|
-webkit-mask-position: 13px 13px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>
|
|
Mask version of test for <i><a href="http://bugs.webkit.org/show_bug.cgi?id=5399">http://bugs.webkit.org/show_bug.cgi?id=5399</a>
|
|
no-repeat on negatively positioned fill images is ignored</i>.
|
|
</p>
|
|
<p>Element with mask image starting at (-13, -13) with no-repeat set:</p>
|
|
<div class="negative s300" style="-webkit-mask-repeat: no-repeat;"></div>
|
|
<div class="negative s250" style="-webkit-mask-repeat: no-repeat;"></div>
|
|
<div class="negative s200" style="-webkit-mask-repeat: no-repeat;"></div>
|
|
|
|
<p>Element with mask image starting at (-13, -13) with repeat-y set:</p>
|
|
<div class="negative s300" style="-webkit-mask-repeat: repeat-y"></div>
|
|
<div class="negative s250" style="-webkit-mask-repeat: repeat-y"></div>
|
|
<div class="negative s200" style="-webkit-mask-repeat: repeat-y"></div>
|
|
|
|
<p>Element with mask image starting at (-13, -13) with repeat-x set:</p>
|
|
<div class="negative s300" style="-webkit-mask-repeat: repeat-x"></div>
|
|
<div class="negative s250" style="-webkit-mask-repeat: repeat-x"></div>
|
|
<div class="negative s200" style="-webkit-mask-repeat: repeat-x"></div>
|
|
|
|
<p>Element with mask image starting at (13, 13) with no-repeat set:</p>
|
|
<div class="positive s300" style="-webkit-mask-repeat: no-repeat;"></div>
|
|
<div class="positive s250" style="-webkit-mask-repeat: no-repeat;"></div>
|
|
<div class="positive s200" style="-webkit-mask-repeat: no-repeat;"></div>
|
|
|
|
<p>Element with mask image starting at (13, 13) with repeat-y set:</p>
|
|
<div class="positive s300" style="-webkit-mask-repeat: repeat-y"></div>
|
|
<div class="positive s250" style="-webkit-mask-repeat: repeat-y"></div>
|
|
<div class="positive s200" style="-webkit-mask-repeat: repeat-y"></div>
|
|
|
|
<p>Element with mask image starting at (13, 13) with repeat-x set:</p>
|
|
<div class="positive s300" style="-webkit-mask-repeat: repeat-x"></div>
|
|
<div class="positive s250" style="-webkit-mask-repeat: repeat-x"></div>
|
|
<div class="positive s200" style="-webkit-mask-repeat: repeat-x"></div>
|
|
</body>
|
|
</html>
|