mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-01 14:45:29 +00:00
292 lines
7.6 KiB
HTML
292 lines
7.6 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html lang="en-US">
|
|
<head>
|
|
<title>Pixel rounding of background image tiling</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta http-equiv="Content-Style-Type" content="text/css">
|
|
<style type="text/css">
|
|
|
|
body { background: black; }
|
|
|
|
.set {
|
|
height: 60px;
|
|
position: relative;
|
|
}
|
|
|
|
.item {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
.item1 { left: 0px; }
|
|
.item2 { left: 15px; }
|
|
.item3 { left: 30px; }
|
|
.item4 { left: 45px; }
|
|
.item5 { left: 60px; }
|
|
|
|
.tl {
|
|
top: 0px;
|
|
background-image: url(corner-tl.png);
|
|
background-position: top left;
|
|
}
|
|
|
|
.tr {
|
|
top: 15px;
|
|
background-image: url(corner-tr.png);
|
|
background-position: top right;
|
|
}
|
|
|
|
.bl {
|
|
top: 30px;
|
|
background-image: url(corner-bl.png);
|
|
background-position: bottom left;
|
|
}
|
|
|
|
.br {
|
|
top: 45px;
|
|
background-image: url(corner-br.png);
|
|
background-position: bottom right;
|
|
}
|
|
|
|
.varydim .item1 { height: 10.0px; width: 11.0px; }
|
|
.varydim .item2 { height: 10.4px; width: 10.6px; }
|
|
.varydim .item3 { height: 10.5px; width: 10.5px; }
|
|
.varydim .item4 { height: 10.6px; width: 10.4px; }
|
|
.varydim .item5 { height: 11.0px; width: 10.0px; }
|
|
|
|
.varypos .item1 { margin-top: 0.0px; margin-left: 1.0px; }
|
|
.varypos .item2 { margin-top: 0.4px; margin-left: 0.6px; }
|
|
.varypos .item3 { margin-top: 0.5px; margin-left: 0.5px; }
|
|
.varypos .item4 { margin-top: 0.6px; margin-left: 0.4px; }
|
|
.varypos .item5 { margin-top: 1.0px; margin-left: 0.0px; }
|
|
|
|
.varydim.athalf .item {
|
|
margin-top: 0.5px; margin-left: 0.5px;
|
|
}
|
|
|
|
.varypos.athalf .item {
|
|
width: 10.5px; height: 10.5px;
|
|
}
|
|
|
|
.border .item {
|
|
/* force the tiling codepath by making sure there are multiple images */
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="set varydim">
|
|
<div class="tl item item1"></div>
|
|
<div class="tl item item2"></div>
|
|
<div class="tl item item3"></div>
|
|
<div class="tl item item4"></div>
|
|
<div class="tl item item5"></div>
|
|
|
|
<div class="tr item item1"></div>
|
|
<div class="tr item item2"></div>
|
|
<div class="tr item item3"></div>
|
|
<div class="tr item item4"></div>
|
|
<div class="tr item item5"></div>
|
|
|
|
<div class="bl item item1"></div>
|
|
<div class="bl item item2"></div>
|
|
<div class="bl item item3"></div>
|
|
<div class="bl item item4"></div>
|
|
<div class="bl item item5"></div>
|
|
|
|
<div class="br item item1"></div>
|
|
<div class="br item item2"></div>
|
|
<div class="br item item3"></div>
|
|
<div class="br item item4"></div>
|
|
<div class="br item item5"></div>
|
|
</div>
|
|
|
|
<div class="set varypos">
|
|
<div class="tl item item1"></div>
|
|
<div class="tl item item2"></div>
|
|
<div class="tl item item3"></div>
|
|
<div class="tl item item4"></div>
|
|
<div class="tl item item5"></div>
|
|
|
|
<div class="tr item item1"></div>
|
|
<div class="tr item item2"></div>
|
|
<div class="tr item item3"></div>
|
|
<div class="tr item item4"></div>
|
|
<div class="tr item item5"></div>
|
|
|
|
<div class="bl item item1"></div>
|
|
<div class="bl item item2"></div>
|
|
<div class="bl item item3"></div>
|
|
<div class="bl item item4"></div>
|
|
<div class="bl item item5"></div>
|
|
|
|
<div class="br item item1"></div>
|
|
<div class="br item item2"></div>
|
|
<div class="br item item3"></div>
|
|
<div class="br item item4"></div>
|
|
<div class="br item item5"></div>
|
|
</div>
|
|
|
|
<div class="set varydim athalf">
|
|
<div class="tl item item1"></div>
|
|
<div class="tl item item2"></div>
|
|
<div class="tl item item3"></div>
|
|
<div class="tl item item4"></div>
|
|
<div class="tl item item5"></div>
|
|
|
|
<div class="tr item item1"></div>
|
|
<div class="tr item item2"></div>
|
|
<div class="tr item item3"></div>
|
|
<div class="tr item item4"></div>
|
|
<div class="tr item item5"></div>
|
|
|
|
<div class="bl item item1"></div>
|
|
<div class="bl item item2"></div>
|
|
<div class="bl item item3"></div>
|
|
<div class="bl item item4"></div>
|
|
<div class="bl item item5"></div>
|
|
|
|
<div class="br item item1"></div>
|
|
<div class="br item item2"></div>
|
|
<div class="br item item3"></div>
|
|
<div class="br item item4"></div>
|
|
<div class="br item item5"></div>
|
|
</div>
|
|
|
|
<div class="set varypos athalf">
|
|
<div class="tl item item1"></div>
|
|
<div class="tl item item2"></div>
|
|
<div class="tl item item3"></div>
|
|
<div class="tl item item4"></div>
|
|
<div class="tl item item5"></div>
|
|
|
|
<div class="tr item item1"></div>
|
|
<div class="tr item item2"></div>
|
|
<div class="tr item item3"></div>
|
|
<div class="tr item item4"></div>
|
|
<div class="tr item item5"></div>
|
|
|
|
<div class="bl item item1"></div>
|
|
<div class="bl item item2"></div>
|
|
<div class="bl item item3"></div>
|
|
<div class="bl item item4"></div>
|
|
<div class="bl item item5"></div>
|
|
|
|
<div class="br item item1"></div>
|
|
<div class="br item item2"></div>
|
|
<div class="br item item3"></div>
|
|
<div class="br item item4"></div>
|
|
<div class="br item item5"></div>
|
|
</div>
|
|
|
|
<div class="set varydim border">
|
|
<div class="tl item item1"></div>
|
|
<div class="tl item item2"></div>
|
|
<div class="tl item item3"></div>
|
|
<div class="tl item item4"></div>
|
|
<div class="tl item item5"></div>
|
|
|
|
<div class="tr item item1"></div>
|
|
<div class="tr item item2"></div>
|
|
<div class="tr item item3"></div>
|
|
<div class="tr item item4"></div>
|
|
<div class="tr item item5"></div>
|
|
|
|
<div class="bl item item1"></div>
|
|
<div class="bl item item2"></div>
|
|
<div class="bl item item3"></div>
|
|
<div class="bl item item4"></div>
|
|
<div class="bl item item5"></div>
|
|
|
|
<div class="br item item1"></div>
|
|
<div class="br item item2"></div>
|
|
<div class="br item item3"></div>
|
|
<div class="br item item4"></div>
|
|
<div class="br item item5"></div>
|
|
</div>
|
|
|
|
<div class="set varypos border">
|
|
<div class="tl item item1"></div>
|
|
<div class="tl item item2"></div>
|
|
<div class="tl item item3"></div>
|
|
<div class="tl item item4"></div>
|
|
<div class="tl item item5"></div>
|
|
|
|
<div class="tr item item1"></div>
|
|
<div class="tr item item2"></div>
|
|
<div class="tr item item3"></div>
|
|
<div class="tr item item4"></div>
|
|
<div class="tr item item5"></div>
|
|
|
|
<div class="bl item item1"></div>
|
|
<div class="bl item item2"></div>
|
|
<div class="bl item item3"></div>
|
|
<div class="bl item item4"></div>
|
|
<div class="bl item item5"></div>
|
|
|
|
<div class="br item item1"></div>
|
|
<div class="br item item2"></div>
|
|
<div class="br item item3"></div>
|
|
<div class="br item item4"></div>
|
|
<div class="br item item5"></div>
|
|
</div>
|
|
|
|
<div class="set varydim athalf border">
|
|
<div class="tl item item1"></div>
|
|
<div class="tl item item2"></div>
|
|
<div class="tl item item3"></div>
|
|
<div class="tl item item4"></div>
|
|
<div class="tl item item5"></div>
|
|
|
|
<div class="tr item item1"></div>
|
|
<div class="tr item item2"></div>
|
|
<div class="tr item item3"></div>
|
|
<div class="tr item item4"></div>
|
|
<div class="tr item item5"></div>
|
|
|
|
<div class="bl item item1"></div>
|
|
<div class="bl item item2"></div>
|
|
<div class="bl item item3"></div>
|
|
<div class="bl item item4"></div>
|
|
<div class="bl item item5"></div>
|
|
|
|
<div class="br item item1"></div>
|
|
<div class="br item item2"></div>
|
|
<div class="br item item3"></div>
|
|
<div class="br item item4"></div>
|
|
<div class="br item item5"></div>
|
|
</div>
|
|
|
|
<div class="set varypos athalf border">
|
|
<div class="tl item item1"></div>
|
|
<div class="tl item item2"></div>
|
|
<div class="tl item item3"></div>
|
|
<div class="tl item item4"></div>
|
|
<div class="tl item item5"></div>
|
|
|
|
<div class="tr item item1"></div>
|
|
<div class="tr item item2"></div>
|
|
<div class="tr item item3"></div>
|
|
<div class="tr item item4"></div>
|
|
<div class="tr item item5"></div>
|
|
|
|
<div class="bl item item1"></div>
|
|
<div class="bl item item2"></div>
|
|
<div class="bl item item3"></div>
|
|
<div class="bl item item4"></div>
|
|
<div class="bl item item5"></div>
|
|
|
|
<div class="br item item1"></div>
|
|
<div class="br item item2"></div>
|
|
<div class="br item item3"></div>
|
|
<div class="br item item4"></div>
|
|
<div class="br item item5"></div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|