.test-1 {
	--perc-50: 50%;
	background-image: linear-gradient(in oklch 90deg, black 20% var(--perc-50),blue 70% 75%);
}

.test-2-0 {
	background-image: linear-gradient(in oklch shorter hue 90deg, red 25% 50%, blue 70% 75%);
}

.test-2-1 {
	background-image: linear-gradient(in oklab 90deg, red 25% 50%, blue 70% 75%);
}

.test-2-2 {
	background-image: linear-gradient(in hsl longer hue 90deg, red 25% 50%, blue 70% 75%);
}

.test-2-3 {
	background-image: linear-gradient(90deg in oklab, red 25% 50%, blue 70% 75%);
}

.unknown-color-stop-variable {
	--red: red;
	/* Color stop variable */
	background-image: linear-gradient(in oklch 90deg, black, var(--red), blue);
}

.unknown-interpolation-hint {
	--perc-10: 10%;
	/* Interpolation hint */
	background-image: linear-gradient(in oklch 90deg, black, var(--perc-10), blue);
}

.unknown-position-1 {
	background-image: linear-gradient(in oklch, red, green 45%, blue);
}

.unknown-position-2 {
	background-image: linear-gradient(in oklch, red 0%, green, blue 100%);
}

.unknown-color {
	background-image: linear-gradient(in oklch, red 0%, 25%, blue 100%);
}

.invalid-order {
	background-image: linear-gradient(in oklch, red 0%, 100% blue);
}

.test-visual-effect-1-1 {
	background-image: linear-gradient(in srgb, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-2-1 {
	background-image: linear-gradient(in srgb-linear, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-3-1 {
	background-image: linear-gradient(in lab, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-4-1 {
	background-image: linear-gradient(in oklab, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-5-1 {
	background-image: linear-gradient(in xyz, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-6-1 {
	background-image: linear-gradient(in xyz-d65, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-7-1 {
	background-image: linear-gradient(in xyz-d50, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-8-1-a {
	background-image: linear-gradient(in hsl, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-8-1-b {
	background-image: linear-gradient(in hsl shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-8-1-c {
	background-image: linear-gradient(in hsl longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-8-1-d {
	background-image: linear-gradient(in hsl increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-8-1-e {
	background-image: linear-gradient(in hsl decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-9-1-a {
	background-image: linear-gradient(in hwb, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-9-1-b {
	background-image: linear-gradient(in hwb shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-9-1-c {
	background-image: linear-gradient(in hwb longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-9-1-d {
	background-image: linear-gradient(in hwb increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-9-1-e {
	background-image: linear-gradient(in hwb decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-10-1-a {
	background-image: linear-gradient(in lch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-10-1-b {
	background-image: linear-gradient(in lch shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-10-1-c {
	background-image: linear-gradient(in lch longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-10-1-d {
	background-image: linear-gradient(in lch increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-10-1-e {
	background-image: linear-gradient(in lch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-11-1-a {
	background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-11-1-b {
	background-image: linear-gradient(in oklch shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-11-1-c {
	background-image: linear-gradient(in oklch longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-11-1-d {
	background-image: linear-gradient(in oklch increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-11-1-e {
	background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

.test-visual-effect-1-2 {
	background-image: linear-gradient(in srgb, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-2-2 {
	background-image: linear-gradient(in srgb-linear, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-3-2 {
	background-image: linear-gradient(in lab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-4-2 {
	background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-5-2 {
	background-image: linear-gradient(in xyz, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-6-2 {
	background-image: linear-gradient(in xyz-d65, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-7-2 {
	background-image: linear-gradient(in xyz-d50, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-8-2-a {
	background-image: linear-gradient(in hsl, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-8-2-b {
	background-image: linear-gradient(in hsl shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-8-2-c {
	background-image: linear-gradient(in hsl longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-8-2-d {
	background-image: linear-gradient(in hsl increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-8-2-e {
	background-image: linear-gradient(in hsl decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-9-2-a {
	background-image: linear-gradient(in hwb, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-9-2-b {
	background-image: linear-gradient(in hwb shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-9-2-c {
	background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-9-2-d {
	background-image: linear-gradient(in hwb increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-9-2-e {
	background-image: linear-gradient(in hwb decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-10-2-a {
	background-image: linear-gradient(in lch, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-10-2-b {
	background-image: linear-gradient(in lch shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-10-2-c {
	background-image: linear-gradient(in lch longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-10-2-d {
	background-image: linear-gradient(in lch increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-10-2-e {
	background-image: linear-gradient(in lch decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-11-2-a {
	background-image: linear-gradient(in oklch, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-11-2-b {
	background-image: linear-gradient(in oklch shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-11-2-c {
	background-image: linear-gradient(in oklch longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-11-2-d {
	background-image: linear-gradient(in oklch increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-visual-effect-11-2-e {
	background-image: linear-gradient(in oklch decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.patterns-1 {
	background:
		conic-gradient(in oklch from -45deg, #EB6841 90deg, #0000 0 180deg, #EDC951 0 270deg, #0000 0) 0 calc(64px/2)/64px 64px,
		conic-gradient(in oklch from 135deg at 50% 0, #EB6841 90deg, #EDC951 0) 0 0/calc(2*64px) 64px;
}

.patterns-2 {
	background:
		conic-gradient(in hsl longer hue at 20px calc(100% - 20px), #0000 270deg, #C02942 0) calc(20px + 15px) 0,
		linear-gradient(#53777A 20px, #0000 0) 0 15px,
		conic-gradient(at 20px calc(100% - 20px) in hsl longer hue, #0000 90deg, #53777A 0 180deg, #C02942 0),
		#ECD078;
}

.manual_fallback {
	background-image: red;
	background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

to-clone {
	background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

.test-teal-dead-zone {
	background-image: linear-gradient(in oklch longer hue to right, red 0%, blue 100%);
}

.wpt-oklab-gradient {
	background: linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 100%);
}

.wpt-srgb-gradient {
	background: linear-gradient(to right in srgb, rgb(255 0 0) 0%, rgb(0 255 0) 100%);
}

.wpt-srgb-linear-gradient {
	background: linear-gradient(to right in srgb-linear, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 100%);
}

.wpt-xyz-gradient {
	background: linear-gradient(to right in xyz, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 100%);
}

.color-with-longer-interpolation-method {
	background: conic-gradient(in oklch longer hue, rgb(255 150 150) 0deg, rgb(255 150 150) 360deg);
}

.issue-948 {
	background-1: linear-gradient(#fff 0 0);
	background-2: linear-gradient(in #fff 0 0); /* incorrect syntax, but omitting the comma to catch regressions */
}

.experimental-features-from-the-color-parser {
	background-image: linear-gradient(in oklab 90deg, contrast-color(pink) 25% 50%, blue 70% 75%);
}
