LeaVerou

/* Test for discrete animations */

@keyframes discrete {
	from { --background: lime }
	to { --background: green }
}

body {
	background: var(--background, red);
	animation: 2s discrete infinite linear;

LeaVerou

/* Dynamic custom property references? You wish */

--foo: --bar;
--bar: green;

background: red;
background: var(var(--foo));

LeaVerou

/**
 * Relative Color Syntax (RCS) + system colors testcase
 * Green: PASS Orange: FAIL Red: No RCS support
 */

background: red;
background: oklch(from gold l c h);
background: oklch(from canvas .7 0.2 140);

LeaVerou

/**
 * accentColor system color
 */

accent-color: lime;
background: accentColor;

LeaVerou

/**
 * Relative Color Syntax (RCS) testcase
 */

background: red;
background: oklch(from yellowgreen l calc(c * 1.2) calc(h + 10));

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;