Specification test cases
The test cases below are imported from the Turbo CSS specification.
They have been executed upon loading this page.
Center
t1 bg-center
.t1.bg-center {
background-position: center;
}
Top
t1 bg-top
.t1.bg-top {
background-position: top;
}
Right top
t1 bg-right-top
.t1.bg-right-top {
background-position: right top;
}
Top right
t1 bg-top-right
.t1.bg-top-right {
background-position: top right;
}
Right
t1 bg-right
.t1.bg-right {
background-position: right;
}
Right bottom
t1 bg-right-bottom
.t1.bg-right-bottom {
background-position: right bottom;
}
Bottom right
t1 bg-bottom-right
.t1.bg-bottom-right {
background-position: bottom right;
}
Bottom
t1 bg-bottom
.t1.bg-bottom {
background-position: bottom;
}
Left bottom
t1 bg-left-bottom
.t1.bg-left-bottom {
background-position: left bottom;
}
Bottom left
t1 bg-bottom-left
.t1.bg-bottom-left {
background-position: bottom left;
}
Left
t1 bg-left
.t1.bg-left {
background-position: left;
}
Left top
t1 bg-left-top
.t1.bg-left-top {
background-position: left top;
}
Top left
t1 bg-top-left
.t1.bg-top-left {
background-position: top left;
}
Position provided as percentage.
t1 bg-pos-10%-20%
.t1.bg-pos-10\%-20\% {
background-position: 10% 20%;
}
Position provided in px units.
t1 bg-pos-10px-20px
.t1.bg-pos-10px-20px {
background-position: 10px 20px;
}
Units must be provided when providing position in
numeric form
t1 bg-pos-10-20
Error: invalid arguments passed to utility function [bg-pos] in [bg-pos-10-20]
invalid arguments passed to utility function [bg] in [bg-pos-10-20]
Position X.
t1 bg-pos-x-10%
.t1.bg-pos-x-10\% {
background-position-x: 10%;
}
Position Y.
t1 bg-pos-y-10%
.t1.bg-pos-y-10\% {
background-position-y: 10%;
}