let turquoise = new Color("oklch(.7 .1 180)");
// Custom functional format:
turquoise.toString({format: {
name: "oklch",
coords: [
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Polar interpolation discontinuity | |
*/ | |
div:nth-of-type(1) { | |
background: linear-gradient(to right in oklch, oklch(70% 0.1 0), oklch(70% 0.1 180)); | |
} | |
div:nth-of-type(2) { | |
background: linear-gradient(to right in oklch, oklch(70% 0.1 0), oklch(70% 0.1 179)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Polar interpolation issues | |
*/ | |
div { | |
padding: 2em; | |
flex: 1; | |
} | |
div:nth-of-type(1) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* none-containing values as intermediate stops | |
*/ | |
div:nth-of-type(1) { | |
background: linear-gradient(to right in oklch, oklch(80% 0.1 0), oklch(80% 0.1 170)); | |
} | |
div:nth-of-type(2) { | |
background: linear-gradient(to right in oklch, oklch(80% 0.1 0), oklch(50% none none), oklch(80% 0.1 170)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* keyword + <percentage> in <position> | |
*/ | |
background: linear-gradient(45deg, #f06, yellow) no-repeat left 10% / 1em 1em; | |
min-height: 100vh; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* none keyword test | |
* Pass: There should be no red, nor any distinct squares | |
*/ | |
html { | |
background: red; /* if you see this, the none keyword is not supported */ | |
background: color-mix(in hsl, hsl(80 50% 90%) 0%, hsl(none none 50%)); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* CSS nesting testcase | |
*/ | |
body { | |
background: red; | |
} | |
html { | |
& body { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Tooltips | |
*/ | |
span { | |
font: bold 300%/1.5 system-ui; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* text-wrap: balance bug | |
*/ | |
body { width: 750px } | |
div { | |
width: 200px; height: 200px; | |
background: red; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* OKLch rainbow? | |
*/ | |
--hc: 70% .2; | |
background: linear-gradient(to left in oklch longer, oklch(var(--hc) 0), oklch(var(--hc) 359)); |
NewerOlder