Specification test cases
The test cases below are imported from the Turbo CSS specification.
They have been executed upon loading this page.
Border color by name.
t1 b-c-blue
.t1.b-c-blue {
border-color: #12A4E2;
}
Unknown color name.
t1 b-c-unknownname
Error: unknown color definition [unknownname]
in class name [b-c-unknownname]
Border color by name and shade.
t1 b-c-blue-500
.t1.b-c-blue-500 {
border-color: #12A4E2;
}
Border color by name, shade, opacity.
t1 b-c-blue-500-50
.t1.b-c-blue-500-50 {
border-color: #12A4E280;
}
Border color by HEX color value in lowercase format.
t1 b-c-hex-abcdef
.t1.b-c-hex-abcdef {
border-color: #ABCDEF;
}
Border color by HEX color value in uppercase format.
t1 b-c-hex-ABCDEF
.t1.b-c-hex-ABCDEF {
border-color: #ABCDEF;
}
Border color by HEX color value with alpha channel.
t1 b-c-hex-12345678
.t1.b-c-hex-12345678 {
border-color: #12345678;
}
Border color by rgb color value.
t1 b-c-rgb-12-34-56
.t1.b-c-rgb-12-34-56 {
border-color: rgb(12, 34, 56);
}
Border color by rgba color value.
t1 b-c-rgb-12-34-56-78
.t1.b-c-rgb-12-34-56-78 {
border-color: rgba(12, 34, 56, 78%);
}
Border color by hsl color value.
t1 b-c-hsl-60-20-40
.t1.b-c-hsl-60-20-40 {
border-color: hsl(60deg, 20%, 40%);
}
Border color by hsla color value.
t1 b-c-hsl-60-20-40-66
.t1.b-c-hsl-60-20-40-66 {
border-color: hsla(60deg, 20%, 40%, 66%);
}
Left and right border color by name.
t1 bx-c-blue
.t1.bx-c-blue {
border-left-color: #12A4E2;
border-right-color: #12A4E2;
}
Left and right border color with unknown name.
t1 bx-c-unknownname
Error: unknown color definition [unknownname]
in class name [bx-c-unknownname]
Left and right border color by name and shade.
t1 bx-c-blue-500
.t1.bx-c-blue-500 {
border-left-color: #12A4E2;
border-right-color: #12A4E2;
}
Left and right border color by name, shade, opacity.
t1 bx-c-blue-500-50
.t1.bx-c-blue-500-50 {
border-left-color: #12A4E280;
border-right-color: #12A4E280;
}
Left and right border color by HEX color value in lowercase format.
t1 bx-c-hex-abcdef
.t1.bx-c-hex-abcdef {
border-left-color: #ABCDEF;
border-right-color: #ABCDEF;
}
Left and right border color by HEX color value in uppercase format.
t1 bx-c-hex-ABCDEF
.t1.bx-c-hex-ABCDEF {
border-left-color: #ABCDEF;
border-right-color: #ABCDEF;
}
Left and right border color by HEX color value with alpha channel.
t1 bx-c-hex-12345678
.t1.bx-c-hex-12345678 {
border-left-color: #12345678;
border-right-color: #12345678;
}
Left and right border color by rgb color value.
t1 bx-c-rgb-12-34-56
.t1.bx-c-rgb-12-34-56 {
border-left-color: rgb(12, 34, 56);
border-right-color: rgb(12, 34, 56);
}
Left and right border color by rgba color value.
t1 bx-c-rgb-12-34-56-78
.t1.bx-c-rgb-12-34-56-78 {
border-left-color: rgba(12, 34, 56, 78%);
border-right-color: rgba(12, 34, 56, 78%);
}
Left and right border color by hsl color value.
t1 bx-c-hsl-60-20-40
.t1.bx-c-hsl-60-20-40 {
border-left-color: hsl(60deg, 20%, 40%);
border-right-color: hsl(60deg, 20%, 40%);
}
Left and right border color by hsla color value.
t1 bx-c-hsl-60-20-40-66
.t1.bx-c-hsl-60-20-40-66 {
border-left-color: hsla(60deg, 20%, 40%, 66%);
border-right-color: hsla(60deg, 20%, 40%, 66%);
}
Top and bottom border color by name.
t1 by-c-blue
.t1.by-c-blue {
border-top-color: #12A4E2;
border-bottom-color: #12A4E2;
}
Top and bottom border color with unknown name.
t1 by-c-unknownname
Error: unknown color definition [unknownname]
in class name [by-c-unknownname]
Top and bottom border color by name and shade.
t1 by-c-blue-500
.t1.by-c-blue-500 {
border-top-color: #12A4E2;
border-bottom-color: #12A4E2;
}
Top and bottom border color by name, shade, opacity.
t1 by-c-blue-500-50
.t1.by-c-blue-500-50 {
border-top-color: #12A4E280;
border-bottom-color: #12A4E280;
}
Top and bottom border color by HEX color value in lowercase format.
t1 by-c-hex-abcdef
.t1.by-c-hex-abcdef {
border-top-color: #ABCDEF;
border-bottom-color: #ABCDEF;
}
Top and bottom border color by HEX color value in uppercase format.
t1 by-c-hex-ABCDEF
.t1.by-c-hex-ABCDEF {
border-top-color: #ABCDEF;
border-bottom-color: #ABCDEF;
}
Top and bottom border color by HEX color value with alpha channel.
t1 by-c-hex-12345678
.t1.by-c-hex-12345678 {
border-top-color: #12345678;
border-bottom-color: #12345678;
}
Top and bottom border color by rgb color value.
t1 by-c-rgb-12-34-56
.t1.by-c-rgb-12-34-56 {
border-top-color: rgb(12, 34, 56);
border-bottom-color: rgb(12, 34, 56);
}
Top and bottom border color by rgba color value.
t1 by-c-rgb-12-34-56-78
.t1.by-c-rgb-12-34-56-78 {
border-top-color: rgba(12, 34, 56, 78%);
border-bottom-color: rgba(12, 34, 56, 78%);
}
Top and bottom border color by hsl color value.
t1 by-c-hsl-60-20-40
.t1.by-c-hsl-60-20-40 {
border-top-color: hsl(60deg, 20%, 40%);
border-bottom-color: hsl(60deg, 20%, 40%);
}
Top and bottom border color by hsla color value.
t1 by-c-hsl-60-20-40-66
.t1.by-c-hsl-60-20-40-66 {
border-top-color: hsla(60deg, 20%, 40%, 66%);
border-bottom-color: hsla(60deg, 20%, 40%, 66%);
}
Top border color by name.
t1 bt-c-blue
.t1.bt-c-blue {
border-top-color: #12A4E2;
}
Top border color with unknown name.
t1 bt-c-unknownname
Error: unknown color definition [unknownname]
in class name [bt-c-unknownname]
Top border color by name and shade.
t1 bt-c-blue-500
.t1.bt-c-blue-500 {
border-top-color: #12A4E2;
}
Top border color by name, shade, opacity.
t1 bt-c-blue-500-50
.t1.bt-c-blue-500-50 {
border-top-color: #12A4E280;
}
Top border color by HEX color value in lowercase format.
t1 bt-c-hex-abcdef
.t1.bt-c-hex-abcdef {
border-top-color: #ABCDEF;
}
Top border color by HEX color value in uppercase format.
t1 bt-c-hex-ABCDEF
.t1.bt-c-hex-ABCDEF {
border-top-color: #ABCDEF;
}
Top border color by HEX color value with alpha channel.
t1 bt-c-hex-12345678
.t1.bt-c-hex-12345678 {
border-top-color: #12345678;
}
Top border color by rgb color value.
t1 bt-c-rgb-12-34-56
.t1.bt-c-rgb-12-34-56 {
border-top-color: rgb(12, 34, 56);
}
Top border color by rgba color value.
t1 bt-c-rgb-12-34-56-78
.t1.bt-c-rgb-12-34-56-78 {
border-top-color: rgba(12, 34, 56, 78%);
}
Top border color by hsl color value.
t1 bt-c-hsl-60-20-40
.t1.bt-c-hsl-60-20-40 {
border-top-color: hsl(60deg, 20%, 40%);
}
Top border color by hsla color value.
t1 bt-c-hsl-60-20-40-66
.t1.bt-c-hsl-60-20-40-66 {
border-top-color: hsla(60deg, 20%, 40%, 66%);
}
Right border color by name.
t1 br-c-blue
.t1.br-c-blue {
border-right-color: #12A4E2;
}
Right border color with unknown name.
t1 br-c-unknownname
Error: unknown color definition [unknownname]
in class name [br-c-unknownname]
Right border color by name and shade.
t1 br-c-blue-500
.t1.br-c-blue-500 {
border-right-color: #12A4E2;
}
Right border color by name, shade, opacity.
t1 br-c-blue-500-50
.t1.br-c-blue-500-50 {
border-right-color: #12A4E280;
}
Right border color by HEX color value in lowercase format.
t1 br-c-hex-abcdef
.t1.br-c-hex-abcdef {
border-right-color: #ABCDEF;
}
Right border color by HEX color value in uppercase format.
t1 br-c-hex-ABCDEF
.t1.br-c-hex-ABCDEF {
border-right-color: #ABCDEF;
}
Right border color by HEX color value with alpha channel.
t1 br-c-hex-12345678
.t1.br-c-hex-12345678 {
border-right-color: #12345678;
}
Right border color by rgb color value.
t1 br-c-rgb-12-34-56
.t1.br-c-rgb-12-34-56 {
border-right-color: rgb(12, 34, 56);
}
Right border color by rgba color value.
t1 br-c-rgb-12-34-56-78
.t1.br-c-rgb-12-34-56-78 {
border-right-color: rgba(12, 34, 56, 78%);
}
Right border color by hsl color value.
t1 br-c-hsl-60-20-40
.t1.br-c-hsl-60-20-40 {
border-right-color: hsl(60deg, 20%, 40%);
}
Right border color by hsla color value.
t1 br-c-hsl-60-20-40-66
.t1.br-c-hsl-60-20-40-66 {
border-right-color: hsla(60deg, 20%, 40%, 66%);
}
Bottom border color by name.
t1 bb-c-blue
.t1.bb-c-blue {
border-bottom-color: #12A4E2;
}
Bottom border color with unknown name.
t1 bb-c-unknownname
Error: unknown color definition [unknownname]
in class name [bb-c-unknownname]
Bottom border color by name and shade.
t1 bb-c-blue-500
.t1.bb-c-blue-500 {
border-bottom-color: #12A4E2;
}
Bottom border color by name, shade, opacity.
t1 bb-c-blue-500-50
.t1.bb-c-blue-500-50 {
border-bottom-color: #12A4E280;
}
Bottom border color by HEX color value in lowercase format.
t1 bb-c-hex-abcdef
.t1.bb-c-hex-abcdef {
border-bottom-color: #ABCDEF;
}
Bottom border color by HEX color value in uppercase format.
t1 bb-c-hex-ABCDEF
.t1.bb-c-hex-ABCDEF {
border-bottom-color: #ABCDEF;
}
Bottom border color by HEX color value with alpha channel.
t1 bb-c-hex-12345678
.t1.bb-c-hex-12345678 {
border-bottom-color: #12345678;
}
Bottom border color by rgb color value.
t1 bb-c-rgb-12-34-56
.t1.bb-c-rgb-12-34-56 {
border-bottom-color: rgb(12, 34, 56);
}
Bottom border color by rgba color value.
t1 bb-c-rgb-12-34-56-78
.t1.bb-c-rgb-12-34-56-78 {
border-bottom-color: rgba(12, 34, 56, 78%);
}
Bottom border color by hsl color value.
t1 bb-c-hsl-60-20-40
.t1.bb-c-hsl-60-20-40 {
border-bottom-color: hsl(60deg, 20%, 40%);
}
Bottom border color by hsla color value.
t1 bb-c-hsl-60-20-40-66
.t1.bb-c-hsl-60-20-40-66 {
border-bottom-color: hsla(60deg, 20%, 40%, 66%);
}
Left border color by name.
t1 bl-c-blue
.t1.bl-c-blue {
border-left-color: #12A4E2;
}
Left border color with unknown name.
t1 bl-c-unknownname
Error: unknown color definition [unknownname]
in class name [bl-c-unknownname]
Left border color by name and shade.
t1 bl-c-blue-500
.t1.bl-c-blue-500 {
border-left-color: #12A4E2;
}
Left border color by name, shade, opacity.
t1 bl-c-blue-500-50
.t1.bl-c-blue-500-50 {
border-left-color: #12A4E280;
}
Left border color by HEX color value in lowercase format.
t1 bl-c-hex-abcdef
.t1.bl-c-hex-abcdef {
border-left-color: #ABCDEF;
}
Left border color by HEX color value in uppercase format.
t1 bl-c-hex-ABCDEF
.t1.bl-c-hex-ABCDEF {
border-left-color: #ABCDEF;
}
Left border color by HEX color value with alpha channel.
t1 bl-c-hex-12345678
.t1.bl-c-hex-12345678 {
border-left-color: #12345678;
}
Left border color by rgb color value.
t1 bl-c-rgb-12-34-56
.t1.bl-c-rgb-12-34-56 {
border-left-color: rgb(12, 34, 56);
}
Left border color by rgba color value.
t1 bl-c-rgb-12-34-56-78
.t1.bl-c-rgb-12-34-56-78 {
border-left-color: rgba(12, 34, 56, 78%);
}
Left border color by hsl color value.
t1 bl-c-hsl-60-20-40
.t1.bl-c-hsl-60-20-40 {
border-left-color: hsl(60deg, 20%, 40%);
}
Left border color by hsla color value.
t1 bl-c-hsl-60-20-40-66
.t1.bl-c-hsl-60-20-40-66 {
border-left-color: hsla(60deg, 20%, 40%, 66%);
}
Definition order.
t1
b-c-black
bx-c-black
by-c-black
bt-c-black
br-c-black
bb-c-black
bl-c-black
.t1.b-c-black {
border-color: #000000;
}
.t1.bx-c-black {
border-left-color: #000000;
border-right-color: #000000;
}
.t1.by-c-black {
border-top-color: #000000;
border-bottom-color: #000000;
}
.t1.bt-c-black {
border-top-color: #000000;
}
.t1.br-c-black {
border-right-color: #000000;
}
.t1.bb-c-black {
border-bottom-color: #000000;
}
.t1.bl-c-black {
border-left-color: #000000;
}