Specification test cases
The test cases below are imported from the Turbo CSS specification.
They have been executed upon loading this page.
Passing argument of type number.
t1 p-1
.t1.p-1 {
padding: 1px;
}
Passing argument of type number with fraction.
t1 p-1.5
.t1.p-1\.5 {
padding: 1.5px;
}
Passing negative argument of type number, prefix form.
t1 -p-1
.t1.-p-1 {
padding: -1px;
}
Passing negative argument of type number, infix form.
t1 p--1
.t1.p--1 {
padding: -1px;
}
Passing argument of type length.
t1 p-1em
.t1.p-1em {
padding: 1em;
}
Passing argument of type length with fraction.
t1 p-1.5em
.t1.p-1\.5em {
padding: 1.5em;
}
Passing negative argument of type length with fraction, prefix form.
t1 -p-1.5em
.t1.-p-1\.5em {
padding: -1.5em;
}
Passing negative argument of type length with fraction, infix form.
t1 p--1.5em
.t1.p--1\.5em {
padding: -1.5em;
}
Passing argument of type percentage.
t1 p-2%
.t1.p-2\% {
padding: 2%;
}
Passing argument of type percentage, with fraction.
t1 p-33.33%
.t1.p-33\.33\% {
padding: 33.33%;
}
Passing negative argument of type percentage, prefix form.
t1 -p-2%
.t1.-p-2\% {
padding: -2%;
}
Passing negative argument of type percentage, infix form.
t1 p--2%
.t1.p--2\% {
padding: -2%;
}
Utility function px-
t1 px-2
.t1.px-2 {
padding-left: 2px;
padding-right: 2px;
}
Utility function py-
t1 py-2
.t1.py-2 {
padding-top: 2px;
padding-bottom: 2px;
}
Utility function pt-
t1 pt-2
.t1.pt-2 {
padding-top: 2px;
}
Utility function pr-
t1 pr-2
.t1.pr-2 {
padding-right: 2px;
}
Utility function pb-
t1 pb-2
.t1.pb-2 {
padding-bottom: 2px;
}
Utility function pl-
t1 pl-2
.t1.pl-2 {
padding-left: 2px;
}
Invalid number of arguments
t1 p-1-2
Error: invalid arguments passed to utility function [p] in [p-1-2]
Invalid argument of type angle
t1 p-1deg
Error: invalid arguments passed to utility function [p] in [p-1deg]
Special alias `full` for padding-top 100% which is
common.
t1 pt-full
.t1.pt-full {
padding-top: 100%;
}
Definition order.
t1
p-1
px-1
py-1
pt-1
pr-1
pb-1
pl-1
.t1.p-1 {
padding: 1px;
}
.t1.px-1 {
padding-left: 1px;
padding-right: 1px;
}
.t1.py-1 {
padding-top: 1px;
padding-bottom: 1px;
}
.t1.pt-1 {
padding-top: 1px;
}
.t1.pr-1 {
padding-right: 1px;
}
.t1.pb-1 {
padding-bottom: 1px;
}
.t1.pl-1 {
padding-left: 1px;
}