Skip to content

Commit

Permalink
In test doc, separate out standard background-size property to be lon…
Browse files Browse the repository at this point in the history 
…ghand since current browsers don't yet support the slash-notation in the shorthand.
  • Loading branch information
Jason Johnston committed Nov 11, 2011
1 parent a6d4640 commit 1c3fb0d
Showing 1 changed file with 44 additions and 22 deletions.
66 changes: 44 additions & 22 deletions tests/background-size-tests.html
View file
Expand Up @@ -23,91 +23,113 @@
-pie-background: #CCF url(border.png) no-repeat 100% 100%;
}
.contain {
background: #CCF url(border.png) no-repeat 0 0 / 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% / contain;
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 / contain border-box;
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% / contain border-box;
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 / contain content-box;
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% / contain content-box;
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 / 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% / cover;
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 / cover border-box;
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% / cover border-box;
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 / cover content-box;
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% / cover content-box;
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 / 50px;
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% / 50px;
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 / 100%;
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% / 100%;
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 / 100% 50%;
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% / 100% 50%;
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 / 50% 100%;
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% / 50% 100%;
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 / 50px 90%;
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% / 50px 90%;
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>
Expand Down

0 comments on commit 1c3fb0d

Please sign in to comment.