diff --git a/tests/background-size-tests.html b/tests/background-size-tests.html
index a944b3b..19674e1 100644
--- a/tests/background-size-tests.html
+++ b/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%;
}