LeaVerou

/**
 * 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));

LeaVerou

/**
 * Polar interpolation issues
 */

div {
	padding: 2em;
	flex: 1;
}

div:nth-of-type(1) {

LeaVerou

/**
 * 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));

LeaVerou

Custom coord types

let turquoise = new Color("oklch(.7 .1 180)");

// Custom functional format:
turquoise.toString({format: {
	name: "oklch",
	coords: [

LeaVerou

/**
 * keyword + <percentage> in <position>
 */

background: linear-gradient(45deg, #f06, yellow) no-repeat left 10% / 1em 1em;
min-height: 100vh;

LeaVerou

/**
 * 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%));
}

LeaVerou

/**
 * CSS nesting testcase
 */

body {
	background: red;
}

html {
	& body {

LeaVerou

/**
 * Tooltips
 */

span {
	font: bold 300%/1.5 system-ui;
}

LeaVerou

/**
 * text-wrap: balance bug
 */


body { width: 750px }

div {
	width: 200px; height: 200px; 
	background: red;

LeaVerou

/**
 * OKLch rainbow?
 */

--hc: 70% .2;
background: linear-gradient(to left in oklch longer, oklch(var(--hc) 0), oklch(var(--hc) 359));