Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
172 lines (162 sloc) 6.94 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>
Something went wrong with that request. Please try again.