LeaVerou

function getAllProperties(obj){
    var allProps = []
      , curr = obj
    do{
        var props = Object.getOwnPropertyNames(curr)
        props.forEach(function(prop){
            if (allProps.indexOf(prop) === -1)
                allProps.push(prop)
        })
    }while(curr = Object.getPrototypeOf(curr))

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: [