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

LeaVerou

/**
 * Number of angles created by corner-shape
 */

path {
	fill: slategray;
}

text {
	font: bold 100% Helvetica Neue;

LeaVerou

/**
 * CSS Grid vs Lea: 1-0
 */

.slide {
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 2.5rem;
	box-sizing: border-box;

LeaVerou

body { background: red }

@container style(--foo: 1) {
	body { background: green; }
}

html { --foo: 1 }

LeaVerou

javascript:{ let table = document.querySelector("#specifications + div > table.standard-table, #specifications + table.standard-table"); table.scrollIntoView({behavior: "smooth"}); table.querySelector("a")?.click(); } undefined;

LeaVerou

/**
 * meter gencontent
 */

meter::before {
	content: "before"
}

meter::after {
	content: "after"