Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

172 lines (162 sloc) 7.108 kb
<!DOCTYPE html>
<html>
<head>
<title>Tests for background-size</title>
<style>
html { -pie-load-path: "../build"; }
.test {
width: 25%;
height: 100px;
border: 10px dotted #C9C;
padding: 10px;
border-radius: 30px;
behavior: url(../build/PIE.htc);
}
.normal {
background: #CCF url(border.png) no-repeat;
-pie-background: #CCF url(border.png) no-repeat;
}
.normal-br {
background: #CCF url(border.png) no-repeat 100% 100%;
-pie-background: #CCF url(border.png) no-repeat 100% 100%;
}
.contain {
background: #CCF url(border.png) no-repeat 0 0;
background-size: contain;
-pie-background: #CCF url(border.png) no-repeat 0 0 / contain;
}
.contain-br {
background: #CCF url(border.png) no-repeat 100% 100%;
background-size: contain;
-pie-background: #CCF url(border.png) no-repeat 100% 100% / contain;
}
.contain-border {
background: #CCF url(border.png) no-repeat 0 0 border-box;
background-size: contain;
-pie-background: #CCF url(border.png) no-repeat 0 0 / contain border-box;
}
.contain-border-br {
background: #CCF url(border.png) no-repeat 100% 100% border-box;
background-size: contain;
-pie-background: #CCF url(border.png) no-repeat 100% 100% / contain border-box;
}
.contain-content {
background: #CCF url(border.png) no-repeat 0 0 content-box;
background-size: contain;
-pie-background: #CCF url(border.png) no-repeat 0 0 / contain content-box;
}
.contain-content-br {
background: #CCF url(border.png) no-repeat 100% 100% content-box;
background-size: contain;
-pie-background: #CCF url(border.png) no-repeat 100% 100% / contain content-box;
}
.cover {
background: #CCF url(border.png) no-repeat 0 0;
background-size: cover;
-pie-background: #CCF url(border.png) no-repeat 0 0 / cover;
}
.cover-br {
background: #CCF url(border.png) no-repeat 100% 100%;
background-size: cover;
-pie-background: #CCF url(border.png) no-repeat 100% 100% / cover;
}
.cover-border {
background: #CCF url(border.png) no-repeat 0 0 border-box;
background-size: cover;
-pie-background: #CCF url(border.png) no-repeat 0 0 / cover border-box;
}
.cover-border-br {
background: #CCF url(border.png) no-repeat 100% 100% border-box;
background-size: cover;
-pie-background: #CCF url(border.png) no-repeat 100% 100% / cover border-box;
}
.cover-content {
background: #CCF url(border.png) no-repeat 0 0 content-box;
background-size: cover;
-pie-background: #CCF url(border.png) no-repeat 0 0 / cover content-box;
}
.cover-content-br {
background: #CCF url(border.png) no-repeat 100% 100% content-box;
background-size: cover;
-pie-background: #CCF url(border.png) no-repeat 100% 100% / cover content-box;
}
.scale-px {
background: #CCF url(border.png) no-repeat 0 0;
background-size: 50px;
-pie-background: #CCF url(border.png) no-repeat 0 0 / 50px;
}
.scale-px-br {
background: #CCF url(border.png) no-repeat 100% 100%;
background-size: 50px;
-pie-background: #CCF url(border.png) no-repeat 100% 100% / 50px;
}
.scale-100pct {
background: #CCF url(border.png) no-repeat 0 0;
background-size: 100%;
-pie-background: #CCF url(border.png) no-repeat 0 0 / 100%;
}
.scale-100pct-br {
background: #CCF url(border.png) no-repeat 100% 100%;
background-size: 100%;
-pie-background: #CCF url(border.png) no-repeat 100% 100% / 100%;
}
.scale-100pct-50pct {
background: #CCF url(border.png) no-repeat 0 0;
background-size: 100% 50%;
-pie-background: #CCF url(border.png) no-repeat 0 0 / 100% 50%;
}
.scale-100pct-50pct-br {
background: #CCF url(border.png) no-repeat 100% 100%;
background-size: 100% 50%;
-pie-background: #CCF url(border.png) no-repeat 100% 100% / 100% 50%;
}
.scale-50pct-100pct {
background: #CCF url(border.png) no-repeat 0 0;
background-size: 50% 100%;
-pie-background: #CCF url(border.png) no-repeat 0 0 / 50% 100%;
}
.scale-50pct-100pct-br {
background: #CCF url(border.png) no-repeat 100% 100%;
background-size: 50% 100%;
-pie-background: #CCF url(border.png) no-repeat 100% 100% / 50% 100%;
}
.scale-50px-90pct {
background: #CCF url(border.png) no-repeat 0 0;
background-size: 50px 90%;
-pie-background: #CCF url(border.png) no-repeat 0 0 / 50px 90%;
}
.scale-50px-90pct-br {
background: #CCF url(border.png) no-repeat 100% 100%;
background-size: 50px 90%;
-pie-background: #CCF url(border.png) no-repeat 100% 100% / 50px 90%;
}
</style>
</head>
<body>
<h1>Tests for background-size</h1>
<div class="test normal">natural size</div>
<div class="test normal-br">natural size, bottom right</div>
<div class="test contain">contain</div>
<div class="test contain-br">contain, bottom right</div>
<div class="test contain-border">contain, border-box</div>
<div class="test contain-border-br">contain, border-box, bottom right</div>
<div class="test contain-content">contain, content-box</div>
<div class="test contain-content-br">contain, content-box, bottom right</div>
<div class="test cover">cover</div>
<div class="test cover-br">cover, bottom right</div>
<div class="test cover-border">cover, border-box</div>
<div class="test cover-border-br">cover, border-box, bottom right</div>
<div class="test cover-content">cover, content-box</div>
<div class="test cover-content-br">cover, content-box, bottom right</div>
<div class="test scale-px">50px</div>
<div class="test scale-px-br">50px, bottom right</div>
<div class="test scale-100pct">100%</div>
<div class="test scale-100pct-br">100%, bottom right</div>
<div class="test scale-100pct-50pct">100% 50%</div>
<div class="test scale-100pct-50pct-br">100% 50%, bottom right</div>
<div class="test scale-50pct-100pct">50% 100%</div>
<div class="test scale-50pct-100pct-br">50% 100%, bottom right</div>
<div class="test scale-50px-90pct">50px 90%</div>
<div class="test scale-50px-90pct-br">50px 90%, bottom right</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.