LeaVerou

/**
 * Never use circle size to convey information
 */

div {
	display: inline-flex; align-items: center; justify-content: center;
	width: 200px;
	aspect-ratio: 1 / 1;
	padding: 1em;
	background: radial-gradient(closest-side, hsl(220 10% 70%) calc(var(--p)), transparent 0) hsl(220 10% 90%);

LeaVerou

/**
 * Invalid custom property values
 */

@property --foo {
	syntax: "red | orange";
	initial-value: red;
	inherits: false;
}
html { --foo: green }

LeaVerou

/**
 * Division by <length> test
 */

div {
	background: green;
	width: 100px;
	height: calc(100px * (100vw / 100vh));
}

LeaVerou

// Highlights all custom elements on the page.
// 7/31/2016: updated to work with both shadow dom v0 and v1.
// To create a bookmarklet, use http://ted.mielczarek.org/code/mozilla/bookmarklet.html

var allCustomElements = [];

function isCustomElement(el) {
  const isAttr = el.getAttribute('is');
  // Check for <super-button> and <button is="super-button">.
  return el.localName.includes('-') || isAttr && isAttr.includes('-');

LeaVerou

/**
 * Overriding presentational HTML
 */

div {
	background: pink;
}

LeaVerou

/**
 * Negative opacity
 */

body { background: red }

@supports (opacity: -3.1415926535) {
	body { background: green }
}

LeaVerou

// Migrate Tape tests to Chai tets (used by Mocha)
// This will not get you 100% of the way, but it will get you most of the way there (depending on your tests).
// I mainly only had to rewrite tests that used subtests (`t.test()`): For those, I used `describe` for the outer test, and converted `t.test()` to `test()`

import { assert } from '@esm-bundle/chai';

assert.ok = assert.isOk.bind(assert);
assert.pass = assert.isOk.bind(assert, true);
assert.end = () => {}; // no-op
assert.plan = () => {}; // no-op, doesn't seem to be needed with WTR

LeaVerou

{
	"workbench.colorTheme": "Solarized Light",
	"editor.fontFamily": "Consolas, Menlo, Monaco, 'Courier New', monospace",
	"editor.insertSpaces": false,
	"editor.inlineSuggest.enabled": true,
	"editor.fontSize": 14.5,
	"editor.renderWhitespace": "boundary",
	"editor.codeLens": false,
	"editor.inlayHints.fontFamily": "Consolas, Menlo, Monaco, 'Courier New', monospace",
	"diffEditor.codeLens": true,

LeaVerou

Test

let color = new Color("p3", [0, 1, 0]);
let redgreen = color.range("red", {
	space: "lch", // interpolation space
	outputSpace: "srgb"
});
redgreen(.5); // midpoint

LeaVerou

Tab's example

let middleRed = new Color("rgb(100 0 0)");
let middleGreen = new Color("rgb(0 100 0)");
let mixed = middleRed.mix(middleGreen, -.2, {space: "srgb"});

middleRed.hue;
mixed.hue;