basic.expect.css

.test-lab {
	color-1: rgb(179, 35, 35);
	color-2: rgb(179, 35, 35);
	color-3: rgba(179, 35, 35, 0.5);
	color-4: rgb(179, 35, 35);
	color-5: rgba(179, 35, 35, 0.5);
	color-6: rgb(222, 105, 147);
	color-7: lab(60% 50 0 foo);
}

.test-lch {
	color-1: rgb(179, 35, 35);
	color-2: rgb(179, 35, 35);
	color-3: rgba(179, 35, 35, 0.5);
	color-4: rgb(179, 35, 35);
	color-5: rgba(179, 35, 35, 0.5);
	color-6: rgb(222, 105, 147);

	color-7: rgb(0, 163, 142);

	color-7: color(display-p3 0.17545 0.64269 0.56213);
	color-8: rgb(0, 163, 142);
	color-8: color(display-p3 0.17545 0.64269 0.56213);
	color-9: rgb(0, 163, 142);
	color-9: color(display-p3 0.17545 0.64269 0.56213);
	color-10: rgb(0, 163, 142);
	color-10: color(display-p3 0.17545 0.64269 0.56213);
	color-11: rgb(0, 163, 142);
	color-11: color(display-p3 0.17545 0.64269 0.56213);

	color-12: rgb(212, 118, 84);
	color-13: rgb(212, 118, 84);
	color-14: rgb(212, 118, 84);
	color-15: rgb(212, 118, 84);
	color-16: rgb(212, 118, 84);
	color-17: lch(60% 50 0.785398unknown);
	color-18: rgb(212, 118, 84);

	color-20: rgb(0, 163, 142);

	color-20: color(display-p3 0.17545 0.64269 0.56213);
	color-21: rgb(0, 163, 142);
	color-21: color(display-p3 0.17545 0.64269 0.56213);
	color-22: rgb(0, 163, 142);
	color-22: color(display-p3 0.17545 0.64269 0.56213);
	color-23: rgb(0, 163, 142);
	color-23: color(display-p3 0.17545 0.64269 0.56213);
}

.test-percentages {
	color-1-ref: rgb(163, 57, 35);
	color-1: rgb(163, 57, 35);
	color-2-ref: rgb(181, 30, 19);
	color-2: rgb(181, 30, 19);
}

.test-numbers {
	color-1: rgb(152, 68, 47);
	color-2: rgb(157, 63, 45);
}

.test-author-provided-fallback {
	color: rgb(0, 0, 0);
	color: lch(100% 0 0);
}

/* this will most likely be a mistake by the author */
.test-author-provided-override {
	color: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
}

.test-alpha-lab {
	color-1: rgb(7, 3, 1);
	color-2: rgb(7, 3, 1);
	color-3: rgb(7, 3, 1);
	color-4: rgba(7, 3, 1, var(--foo));
	color-5: lab(1% 1 1 /);
	color-6: rgba(7, 3, 1, 0.6);
}

.test-alpha-lch {
	color-1: rgb(6, 3, 4);
	color-2: rgb(6, 3, 4);
	color-3: rgb(6, 3, 4);
	color-4: rgba(6, 3, 4, var(--foo));
	color-5: lch(1% 1 1 /);
	color-6: rgba(6, 3, 4, 0.6);
}

.test-ignore {
	prop-1: 'lch(1% 1 1 / 1)';
	prop-2: url('lch(1% 1 1 / 1)');
	prop-3: 'lab(40% 56.6 39)';
}

.test-high-luminance {
	prop-1: rgb(255, 255, 255);
	prop-1: color(display-p3 1 1 1);
	prop-2: rgb(255, 255, 255);
}

.test-low-luminance {
	/* not teal */
	prop-1: rgb(0, 0, 0);
	/* teal */
	prop-2: rgb(0, 0, 0);
	/* teal */
	prop-3: rgb(0, 42, 43);
	prop-3: color(display-p3 0 0.16925 0.17636);
}

.test-multiple-colors {
	background-1: linear-gradient(rgb(97, 112, 56), rgb(212, 118, 84));
	background-2: linear-gradient(rgb(0, 122, 63), rgb(212, 118, 84));
	background-2: linear-gradient(color(display-p3 0.1379 0.48408 0.24136), rgb(212, 118, 84));
}

.test-unparseable-lab-function {
	background-image: lab(; );
}

.test-gamut {
	/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B48%2C-53%2C12%5D%2C%5B58%2C-54%2C69%5D%5D */
	/* out */
	prop-1: rgb(0, 129, 96);
	prop-1: color(display-p3 0 0.51872 0.36985);
	/* out */
	prop-2: rgb(57, 159, 0);
	prop-2: color(display-p3 0.31275 0.62335 0.08647);

	/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B45%2C-13%2C29%5D%2C%5B77%2C33%2C97%5D%5D */
	/* in */
	prop-3: rgb(97, 112, 56);
	/* out */
	prop-4: rgb(255, 171, 57);
	prop-4: color(display-p3 0.99733 0.66278 0.12085);

	/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B76%2C-29%2C-23%5D%2C%5B16%2C-32%2C24%5D%5D */
	/* in */
	prop-5: rgb(85, 204, 229);
	/* out */
	prop-6: rgb(0, 47, 9);
	prop-6: color(display-p3 0.00652 0.18999 0.01056);

	/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B85%2C16%2C29%5D%2C%5B55%2C-42%2C58%5D%5D */
	/* out */
	prop-7: rgb(255, 201, 158);
	prop-7: color(display-p3 0.96684 0.79482 0.64336);
	/* out */
	prop-8: rgb(71, 149, 0);
	prop-8: color(display-p3 0.35483 0.57788 0.15007);

	/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B87%2C-94%2C103%5D%2C%5B88%2C-9%2C62%5D%5D */
	/* out */
	prop-9: rgb(0, 250, 30);
	prop-9: color(display-p3 0.32231 0.99185 0.02929);
	/* in */
	prop-10: rgb(231, 224, 96);

	/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B69%2C-35%2C-39%5D%2C%5B68%2C61%2C39%5D%5D */
	/* out */
	prop-11: rgb(0, 185, 225);
	prop-11: color(display-p3 0.16541 0.72332 0.91352);
	/* out */
	prop-12: rgb(255, 127, 115);
	prop-12: color(display-p3 0.99104 0.47662 0.41939);

	/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C74%5D%2C%5B65%2C81%2C-13%5D%5D */
	/* out */
	prop-13: rgb(122, 156, 0);
	prop-13: color(display-p3 0.49844 0.61099 0.07831);
	/* out */
	prop-14: rgb(255, 104, 181);
	prop-14: color(display-p3 0.99687 0.35134 0.71095);

	/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C15%5D%2C%5B65%2C81%2C-11%5D%5D */
	/* in */
	prop-15: rgb(96, 158, 117);
	/* out */
	prop-16: rgb(255, 105, 178);
	prop-16: color(display-p3 0.99937 0.35096 0.69833);

	/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B78%2C-64%2C-44%5D%2C%5B76%2C81%2C-11%5D%5D */
	/* out */
	prop-17: rgb(0, 212, 236);
	prop-17: color(display-p3 0 0.83775 0.97008);
	/* out */
	prop-18: rgb(255, 165, 203);
	prop-18: color(display-p3 1 0.62352 0.79882);
}

.test-wpt-lab {
	lab-001: rgb(0, 128, 0);
	lab-001: color(display-p3 0.21595 0.49419 0.13153);
	lab-002: rgb(0, 0, 0);
	lab-003: rgb(255, 255, 255);
	lab-004: rgb(193, 78, 121);
	lab-005: rgb(27, 193, 169);
	lab-006: rgb(195, 169, 14);
	lab-007: rgb(33, 135, 237);
	lab-008: rgb(0, 247, 79);
	lab-008: color(display-p3 0 0.99999 0.00123);
}

.test-wpt-lch {
	lch-001: rgb(0, 128, 0);
	lch-001: color(display-p3 0.21595 0.49419 0.13153);
	lch-002: rgb(0, 0, 0);
	lch-003: rgb(255, 255, 255);
	lch-004: rgb(193, 78, 121);
	lch-005: rgb(27, 193, 169);
	lch-006: rgb(195, 169, 14);
	lch-007: rgb(33, 135, 237);
	lch-008: rgb(0, 247, 79);
	lch-008: color(display-p3 0 0.99999 0.00123);
}

.manual_fallback {
	color: red;
	color: lab(40% 56.6 39);
}

to-clone {
	color: rgb(179, 35, 35);
}

.test-css-color-5-interop {
	color-1: lab(from rgb(179, 35, 35) l a b);
	color-2: lch(from rgb(163, 57, 39) l c h);
}