Permalink
Browse files

In test doc, separate out standard background-size property to be lon…

…ghand since current browsers don't yet support the slash-notation in the shorthand.
  • Loading branch information...
1 parent a6d4640 commit 1c3fb0d4b52b5ab7c2bad756f02cd882383f3cd1 Jason Johnston committed Nov 11, 2011
Showing with 44 additions and 22 deletions.
  1. +44 −22 tests/background-size-tests.html
@@ -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>

0 comments on commit 1c3fb0d

Please sign in to comment.