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 m-1
.t1.m-1 {
margin: 1px;
}
Passing argument of type number with fraction.
t1 m-1.5
.t1.m-1\.5 {
margin: 1.5px;
}
Passing negative argument of type number, prefix form.
t1 -m-1
.t1.-m-1 {
margin: -1px;
}
Passing negative argument of type number, infix form.
t1 m--1
.t1.m--1 {
margin: -1px;
}
Passing argument of type length.
t1 m-1em
.t1.m-1em {
margin: 1em;
}
Passing argument of type length with fraction.
t1 m-1.5em
.t1.m-1\.5em {
margin: 1.5em;
}
Passing negative argument of type length with fraction, prefix form.
t1 -m-1.5em
.t1.-m-1\.5em {
margin: -1.5em;
}
Passing negative argument of type length with fraction, infix form.
t1 m--1.5em
.t1.m--1\.5em {
margin: -1.5em;
}
Passing argument of type percentage.
t1 m-2%
.t1.m-2\% {
margin: 2%;
}
Passing argument of type percentage, with fraction.
t1 m-33.33%
.t1.m-33\.33\% {
margin: 33.33%;
}
Passing negative argument of type percentage, prefix form.
t1 -m-2%
.t1.-m-2\% {
margin: -2%;
}
Passing negative argument of type percentage, infix form.
t1 m--2%
.t1.m--2\% {
margin: -2%;
}
Passing argument auto.
t1 m-auto
.t1.m-auto {
margin: auto;
}
Utility function mx-
t1 mx-2
.t1.mx-2 {
margin-left: 2px;
margin-right: 2px;
}
Utility function my-
t1 my-2
.t1.my-2 {
margin-top: 2px;
margin-bottom: 2px;
}
Utility function mt-
t1 mt-2
.t1.mt-2 {
margin-top: 2px;
}
Utility function mr-
t1 mr-2
.t1.mr-2 {
margin-right: 2px;
}
Utility function mb-
t1 mb-2
.t1.mb-2 {
margin-bottom: 2px;
}
Utility function ml-
t1 ml-2
.t1.ml-2 {
margin-left: 2px;
}
Invalid number of arguments
t1 m-1-2
Error: invalid arguments passed to utility function [m] in [m-1-2]
Invalid argument of type angle
t1 m-1deg
Error: invalid arguments passed to utility function [m] in [m-1deg]
Definition order.
t1
m-1
mx-1
my-1
mt-1
mr-1
mb-1
ml-1
.t1.m-1 {
margin: 1px;
}
.t1.mx-1 {
margin-left: 1px;
margin-right: 1px;
}
.t1.my-1 {
margin-top: 1px;
margin-bottom: 1px;
}
.t1.mt-1 {
margin-top: 1px;
}
.t1.mr-1 {
margin-right: 1px;
}
.t1.mb-1 {
margin-bottom: 1px;
}
.t1.ml-1 {
margin-left: 1px;
}