blob: 7fb9f6c6210b81af0b4b36d66d72fea959dd79f5 [file] [log] [blame]
<!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-image: url(resources/gradient.gif);
}
div
{
padding: 1px;
float: left;
}
p
{
clear: both;
}
.negative
{
background-position: -13px -13px;
}
.positive
{
background-position: 13px 13px;
}
</style>
</head>
<body>
<p>
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 background images are ignored</i>.
</p>
<p>Element with background image starting at (-13, -13) with no-repeat set:</p>
<div class="negative s300" style="background-repeat: no-repeat;"></div>
<div class="negative s250" style="background-repeat: no-repeat;"></div>
<div class="negative s200" style="background-repeat: no-repeat;"></div>
<p>Element with background image starting at (-13, -13) with repeat-y set:</p>
<div class="negative s300" style="background-repeat: repeat-y"></div>
<div class="negative s250" style="background-repeat: repeat-y"></div>
<div class="negative s200" style="background-repeat: repeat-y"></div>
<p>Element with background image starting at (-13, -13) with repeat-x set:</p>
<div class="negative s300" style="background-repeat: repeat-x"></div>
<div class="negative s250" style="background-repeat: repeat-x"></div>
<div class="negative s200" style="background-repeat: repeat-x"></div>
<p>Element with background image starting at (13, 13) with no-repeat set:</p>
<div class="positive s300" style="background-repeat: no-repeat;"></div>
<div class="positive s250" style="background-repeat: no-repeat;"></div>
<div class="positive s200" style="background-repeat: no-repeat;"></div>
<p>Element with background image starting at (13, 13) with repeat-y set:</p>
<div class="positive s300" style="background-repeat: repeat-y"></div>
<div class="positive s250" style="background-repeat: repeat-y"></div>
<div class="positive s200" style="background-repeat: repeat-y"></div>
<p>Element with background image starting at (13, 13) with repeat-x set:</p>
<div class="positive s300" style="background-repeat: repeat-x"></div>
<div class="positive s250" style="background-repeat: repeat-x"></div>
<div class="positive s200" style="background-repeat: repeat-x"></div>
<p style="position:absolute;height:5000px"></p>
<table style="clear:both; -webkit-transform: translate(650px, -150px) rotate(45deg); -webkit-transform-origin: 100% 0" border=5><tr><td>
<div class="negative s300" style="background-repeat: no-repeat;"></div>
<div class="negative s250" style="background-repeat: no-repeat;"></div>
<div class="negative s200" style="background-repeat: no-repeat;"></div>
<p>Element with background image starting at (-13, -13) with repeat-y set:</p>
<div class="negative s300" style="background-repeat: repeat-y"></div>
<div class="negative s250" style="background-repeat: repeat-y"></div>
<div class="negative s200" style="background-repeat: repeat-y"></div>
<p>Element with background image starting at (-13, -13) with repeat-x set:</p>
<div class="negative s300" style="background-repeat: repeat-x"></div>
<div class="negative s250" style="background-repeat: repeat-x"></div>
<div class="negative s200" style="background-repeat: repeat-x"></div>
<p>Element with background image starting at (13, 13) with no-repeat set:</p>
<div class="positive s300" style="background-repeat: no-repeat;"></div>
<div class="positive s250" style="background-repeat: no-repeat;"></div>
<div class="positive s200" style="background-repeat: no-repeat;"></div>
<p>Element with background image starting at (13, 13) with repeat-y set:</p>
<div class="positive s300" style="background-repeat: repeat-y"></div>
<div class="positive s250" style="background-repeat: repeat-y"></div>
<div class="positive s200" style="background-repeat: repeat-y"></div>
<p>Element with background image starting at (13, 13) with repeat-x set:</p>
<div class="positive s300" style="background-repeat: repeat-x"></div>
<div class="positive s250" style="background-repeat: repeat-x"></div>
<div class="positive s200" style="background-repeat: repeat-x"></div>
</table>
</body>
</html>