const calc_size_auto_tests = [
	'calc-size(auto, size)',
	'calc-size(auto, size + 16px)',
	'calc-size(auto, size - 10rem)',
	'calc-size(auto, size * 0.9)',
	'calc-size(auto, size / 2)',
]

const calc_size_default_tests = [
	'calc-size(stretch, size)', // -webkit-fill-available
	'calc-size(stretch, size - 1em)',
	'calc-size(0px, 0px)',
	'calc-size(300px, size)',
	'calc-size(50%, size)',
	'calc-size(min-content, size)',
	'calc-size(max-content, size)',
	'calc-size(fit-content, size)',
	'calc-size(min-content, size * 2)',
	'calc-size(max-content, size / 2)',
	'calc-size(fit-content, 30px + size / 2)',
	'calc-size(fit-content, 50% + size / 2)',
	'calc-size(fit-content, 260px + size * -0.3)',
	'calc-size(fit-content, -100px + size)',
	'calc-size(any, 0px)',
	'calc-size(any, 25em)',
	'calc-size(any, 40%)',
	'calc-size(any, 50px + 30%)',
	'calc-size(any, 30% + 2.6rem)',
	'calc-size(30px, 25em)',
	'calc-size(10px, sign(size) * size)',
	// Nested calc-size()
	'calc-size(calc-size(any, 30px), size)',
	'calc-size(calc-size(any, 30px), 25em)',
	'calc-size(calc-size(2in, 30px), 25em)',
	'calc-size(calc-size(50%, 30px), 25em)',
	'calc-size(calc-size(max-content, size), size)',
	'calc-size(calc-size(max-content, size), size)',
]

export default {
	title: 'CSS Values and Units Module Level 5',
	links: {
		tr: 'css-values-5',
		dev: 'css-values-5',
	},
	status: {
		stability: 'experimental',
	},
	properties: {
		'interpolate-size': {
			links: {
				tr: '#interpolate-size',
				dev: '#interpolate-size',
			},
			tests: [
				'numeric-only',
				'allow-keywords',
			],
		},
	},
	values: {
		properties: ['width', 'padding'],
		'calc-size()': {
			links: {
				tr: '#calc-size',
				dev: '#calc-size',
			},
			properties: [ 'width', 'min-width', 'height', 'min-height', 'block-size', 'min-block-size', 'inline-size', 'min-inline-size', ],
			// Note: The none keyword is not usable within calc-size().
			tests: [
				...calc_size_auto_tests,
				...calc_size_default_tests,
			],
		},
		'calc-size() in max-width or max-height': {
			links: {
				tr: '#calc-size',
				dev: '#calc-size',
			},
			properties: [ 'max-width', 'max-height', 'max-block-size', 'max-inline-size', ],
			// Note: The none keyword is not usable within calc-size().
			tests: calc_size_default_tests,
		},
		'calc-size() in flex-basis': {
			links: {
				tr: '#calc-size',
				dev: '#calc-size',
			},
			properties: [ 'flex-basis', ],
			// Note: The none keyword is not usable within calc-size().
			tests: [
				'calc-size(content, size)',
				'calc-size(content, size + 1vw)',
				'calc-size(content, size - 1em)',
				'calc-size(content, size * 7)',
				'calc-size(content, size / 0.9)',
				'calc-size(content, size * 1.6 + 23px)',
				...calc_size_auto_tests,
				...calc_size_default_tests,
			],
		},
		'attr()': {
			links: {
				tr: '#attr-notation',
				dev: '#attr-notation',
			},
			tests: [
				'attr(data-value)',
				'attr(data-value, "Hello!")',
				'attr(data-value type(*))',
				'attr(data-value type(<angle>))',
				'attr(data-value type(<color>))',
				'attr(data-value type(<custom-ident>))',
				'attr(data-value type(<image>))',
				'attr(data-value type(<integer>))',
				'attr(data-value type(<length>))',
				'attr(data-value type(<length-percentage>))',
				'attr(data-value type(<number>))',
				'attr(data-value type(<percentage>))',
				'attr(data-value type(<resolution>))',
				'attr(data-value type(<string>))',
				'attr(data-value type(<time>))',
				'attr(data-value type(<url>))',
				'attr(data-value type(<transform-function>))',
				'attr(data-value type(<length> | auto))',
				'attr(data-value type(<length>+))',
				'attr(data-value type(<length>#))',
				'attr(data-value type("<length>"))',
				'attr(data-value string)',
				'attr(data-value px)',
				'attr(data-value deg)',
				'attr(data-value %)',
			],
		},
		'first-valid()': {
			links: {
				tr: '#first-valid',
				dev: '#first-valid',
			},
			tests: [
				'first-valid(10px)',
				'first-valid(foo)',
				'first-valid(foo; 10px)',
			],
		},
		'progress()': {
			links: {
				tr: '#progress-func',
				dev: '#progress-func',
			},
			tests: [
				'calc(100px * progress(150px, 100px, 200px))',
				'calc(100px * progress(12%, 10%, 20%))',
				'calc(100px * progress(200deg, 180deg, 360deg))',
				'calc(100px * progress(4, 0, 10))',
				'calc(100px * progress(2, 0, pi))',
				'calc(100px * progress(150px, 100px + 200px, 200px + 600px))',
				'calc(100px * progress(3em, 3 * (1em + 2em), (7em + 1em) / 2))',
			],
		},
		'media-progress()': {
			links: {
				tr: '#media-progress-func',
				dev: '#media-progress-func',
			},
			tests: [
				'calc(100px * media-progress(width, 500px, 1000px))',
				'calc(100px * media-progress(width, 20%, 50%))',
				'calc(100px * media-progress(width, 100px + 200px, 200px + 600px))',
				'calc(100px * media-progress(width, 3 * (10% + 20%), (60% + 10%) / 2))',
				'calc(100px * media-progress(height, 500px, 1000px))',
				'calc(100px * media-progress(resolution, 1dppx, 4dppx))',
			],
		},
		'container-progress()': {
			links: {
				tr: '#container-progress-func',
				dev: '#container-progress-func',
			},
			tests: [
				'calc(100px * container-progress(width, 500px, 1000px))',
				'calc(100px * container-progress(width, 20%, 50%))',
				'calc(100px * container-progress(width, 100px + 200px, 200px + 600px))',
				'calc(100px * container-progress(width, 3 * (10% + 20%), (60% + 10%) / 2))',
				'calc(100px * container-progress(height, 500px, 1000px))',
				'calc(100px * container-progress(width of --test-container, 500px, 1000px))',
				'calc(100px * container-progress(width of --test-container, 20%, 50%))',
				'calc(100px * container-progress(width of --test-container, 100px + 200px, 200px + 600px))',
				'calc(100px * container-progress(width of --test-container, 3 * (10% + 20%), (60% + 10%) / 2))',
				'calc(100px * container-progress(height of --test-container, 500px, 1000px))',
			],
		},
		'calc-mix() with lengths and percentages': {
			links: {
				tr: '#calc-mix',
				dev: '#calc-mix',
			},
			tests: [
				'calc-mix(0.5, 100px, 200px)',
				'calc-mix(0.5, 10%, 20%)',
				'calc-mix(0.5, -infinity, infinity)',
				'calc-mix(0.5, 100px + 200px, 200px + 600px)',
				'calc-mix(0.5, 3 * (10% + 20%), (60% + 10%) / 2)',
				'calc-mix(50%, 100px, 200px)',
				'calc-mix(--scroll-progress-timeline, 100px, 200px)',
				'calc-mix(scroll(), 100px, 200px)',
				'calc-mix(view(), 100px, 200px)',
				'calc-mix(--scroll-progress-timeline by linear(0, 0.25, 1), 100px, 200px)',
				'calc-mix(--scroll-progress-timeline by ease-in, 100px, 200px)',
				'calc-mix(--scroll-progress-timeline by cubic-bezier(0.5, 0, 0.3, 1), 100px, 200px)',
				'calc-mix(--scroll-progress-timeline by steps(10, start), 100px, 200px)',
			],
		},
		'calc-mix() with numbers': {
			links: {
				tr: '#calc-mix',
				dev: '#calc-mix',
			},
			properties: ['line-height'],
			tests: [
				'calc-mix(0.5, 0, 10)',
				'calc-mix(0.5, 1 + 2, 3 + 4)',
				'calc-mix(0.5, 3 * (1 + 2), (3 + 4) / 2)',
				'calc-mix(50%, 0, 10)',
				'calc-mix(--scroll-progress-timeline, 0, 10)',
				'calc-mix(scroll(), 0, 10)',
				'calc-mix(view(), 0, 10)',
				'calc-mix(--scroll-progress-timeline by linear(0, 0.25, 1), 0, 10)',
				'calc-mix(--scroll-progress-timeline by ease-in, 0, 10)',
				'calc-mix(--scroll-progress-timeline by cubic-bezier(0.5, 0, 0.3, 1), 0, 10)',
				'calc-mix(--scroll-progress-timeline by steps(10, start), 0, 10)',
			],
		},
		'color-mix()': {
			links: {
				tr: '#color-mix',
				dev: '#color-mix',
				mdn: 'color_value/color-mix',
			},
			properties: ['color', 'background-color', 'border-color', 'text-decoration-color', 'column-rule-color'],
			tests: [
				'color-mix(0.5 in srgb, teal, olive)',
				'color-mix(0.5 in srgb, rgb(255, 0, 0, .2), olive)',
				'color-mix(0.5 in srgb, currentColor, rgba(0, 0, 0, .5)',
				'color-mix(0.5 in srgb, currentColor, rgba(0, 0, 0, .5)',
				'color-mix(0.5 in lch, teal, olive)',
				'color-mix(0.5 in hsl, teal, olive)',
				'color-mix(0.5 in hwb, teal, olive)',
				'color-mix(0.5 in xyz, teal, olive)',
				'color-mix(0.5 in lab, teal, olive)',
				'color-mix(50% in srgb, teal, olive)',
				'color-mix(--scroll-progress-timeline in srgb, teal, olive)',
				'color-mix(scroll() in srgb, teal, olive)',
				'color-mix(view() in srgb, teal, olive)',
				'color-mix(--scroll-progress-timeline by linear(0, 0.25, 1) in srgb, teal, olive)',
				'color-mix(--scroll-progress-timeline by ease-in in srgb, teal, olive)',
				'color-mix(--scroll-progress-timeline by cubic-bezier(0.5, 0, 0.3, 1) in srgb, teal, olive)',
				'color-mix(--scroll-progress-timeline by steps(10, start) in srgb, teal, olive)',
			],
		},
		'cross-fade()': {
			links: {
				tr: '#cross-fade',
				dev: '#cross-fade',
			},
			properties: ['background-image', 'list-style-image', 'border-image', 'cursor', 'content'],
			tests: [
				'cross-fade(0.5, url(a.png), url(b.png))',
				'cross-fade(0.5, url(a.png), white)',
				'cross-fade(0.5, black, url(b.png))',
				'cross-fade(0.5, black, white)',
				'cross-fade(50%, url(a.png), url(b.png))',
				'cross-fade(--scroll-progress-timeline, url(a.png), url(b.png))',
				'cross-fade(scroll(), url(a.png), url(b.png))',
				'cross-fade(view(), url(a.png), url(b.png))',
				'cross-fade(--scroll-progress-timeline by linear(0, 0.25, 1), url(a.png), url(b.png))',
				'cross-fade(--scroll-progress-timeline by ease-in, url(a.png), url(b.png))',
				'cross-fade(--scroll-progress-timeline by cubic-bezier(0.5, 0, 0.3, 1), url(a.png), url(b.png))',
				'cross-fade(--scroll-progress-timeline by steps(10, start), url(a.png), url(b.png))',
			],
		},
		'transform-mix()': {
			links: {
				tr: '#transform-mix',
				dev: '#transform-mix',
			},
			properties: ['transform-function'],
			tests: [
				'transform-mix(0.5, translate(5px))',
				'transform-mix(0.5, translate(5px, 10px))',
				'transform-mix(0.5, translateY(5px))',
				'transform-mix(0.5, translateX(5px))',
				'transform-mix(0.5, translateY(5%))',
				'transform-mix(0.5, translateX(5%))',
				'transform-mix(0.5, scale(2))',
				'transform-mix(0.5, scale(2, -1))',
				'transform-mix(0.5, scaleX(2))',
				'transform-mix(0.5, scaleY(2.5))',
				'transform-mix(0.5, rotate(45deg))',
				'transform-mix(0.5, skew(45deg))',
				'transform-mix(0.5, skew(45deg, 15deg))',
				'transform-mix(0.5, skewX(45deg))',
				'transform-mix(0.5, skewY(45deg))',
				'transform-mix(0.5, matrix(1,-.2,0,1,0,0))',
				'transform-mix(0.5, matrix(1,-.2,0,1,10,10))',
				'transform-mix(0.5, translate(50px, -24px) rotate(180deg) scale(.5) skew(0, 22.5deg))',
				'transform-mix(0.5, translateZ(5px))',
				'transform-mix(0.5, scaleZ(1.5))',
				'transform-mix(0.5, rotateX(-45deg))',
				'transform-mix(0.5, rotateY(-45deg))',
				'transform-mix(0.5, rotateZ(-45deg))',
				'transform-mix(0.5, perspective(600px))',
				'transform-mix(50%, rotate(45deg))',
				'transform-mix(--scroll-progress-timeline, rotate(45deg))',
				'transform-mix(scroll(), rotate(45deg))',
				'transform-mix(view(), rotate(45deg))',
				'transform-mix(--scroll-progress-timeline by linear(0, 0.25, 1), rotate(45deg))',
				'transform-mix(--scroll-progress-timeline by ease-in, rotate(45deg))',
				'transform-mix(--scroll-progress-timeline by cubic-bezier(0.5, 0, 0.3, 1), rotate(45deg))',
				'transform-mix(--scroll-progress-timeline by steps(10, start), rotate(45deg))',
			],
		},
		'mix() with lengths and percentages': {
			links: {
				tr: '#mix',
				dev: '#mix',
			},
			tests: [
				'mix(0.5, 100px, 200px)',
				'mix(0.5, 10%, 20%)',
				'mix(0.5, -infinity, infinity)',
				'mix(50%, 100px, 200px)',
				'mix(--scroll-progress-timeline, 100px, 200px)',
				'mix(scroll(), 100px, 200px)',
				'mix(view(), 100px, 200px)',
				'mix(--scroll-progress-timeline by linear(0, 0.25, 1), 100px, 200px)',
				'mix(--scroll-progress-timeline by ease-in, 100px, 200px)',
				'mix(--scroll-progress-timeline by cubic-bezier(0.5, 0, 0.3, 1), 100px, 200px)',
				'mix(--scroll-progress-timeline by steps(10, start), 100px, 200px)',
				'mix(0.5 of --keyframes-name, 100px, 200px)',
			],
		},
		'mix() with numbers': {
			links: {
				tr: '#mix',
				dev: '#mix',
			},
			properties: ['line-height'],
			tests: [
				'mix(0.5, 0, 10)',
				'mix(50%, 0, 10)',
				'mix(--scroll-progress-timeline, 0, 10)',
				'mix(scroll(), 0, 10)',
				'mix(view(), 0, 10)',
				'mix(--scroll-progress-timeline by linear(0, 0.25, 1), 0, 10)',
				'mix(--scroll-progress-timeline by ease-in, 0, 10)',
				'mix(--scroll-progress-timeline by cubic-bezier(0.5, 0, 0.3, 1), 0, 10)',
				'mix(--scroll-progress-timeline by steps(10, start), 0, 10)',
				'mix(50% of --keyframes-name, 0, 10)',
			],
		},
		'mix() with colors': {
			links: {
				tr: '#mix',
				dev: '#mix',
			},
			properties: ['color', 'background-color', 'text-decoration-color', 'column-rule-color'],
			tests: [
				'mix(0.5, #f00, #00f)',
				'mix(0.5, red, blue)',
				'mix(0.5, rgb(255, 0, 0), rgb(0, 0, 255))',
				'mix(0.5, hsl(0, 100%, 50%), hsl(240, 100%, 50%))',
				'mix(0.5, color(display-p3 1 0 0), color(display-p3 0 0 1))',
				'mix(50%, #f00, #00f)',
				'mix(--scroll-progress-timeline, #f00, #00f)',
				'mix(scroll(), #f00, #00f)',
				'mix(view(), #f00, #00f)',
				'mix(--scroll-progress-timeline by linear(0, 0.25, 1), #f00, #00f)',
				'mix(--scroll-progress-timeline by ease-in, #f00, #00f)',
				'mix(--scroll-progress-timeline by cubic-bezier(0.5, 0, 0.3, 1), #f00, #00f)',
				'mix(--scroll-progress-timeline by steps(10, start), #f00, #00f)',
				'mix(50% of --keyframes-name, #f00, #00f)',
			],
		},
		'mix() with keywords': {
			links: {
				tr: '#mix',
				dev: '#mix',
			},
			properties: ['position'],
			tests: [
				'mix(0.5, left, right)',
				'mix(50%, left, right)',
				'mix(--scroll-progress-timeline, left, right)',
				'mix(scroll(), left, right)',
				'mix(view(), left, right)',
				'mix(--scroll-progress-timeline by linear(0, 0.25, 1), left, right)',
				'mix(--scroll-progress-timeline by ease-in, left, right)',
				'mix(--scroll-progress-timeline by cubic-bezier(0.5, 0, 0.3, 1), left, right)',
				'mix(--scroll-progress-timeline by steps(10, start), left, right)',
				'mix(50% of --keyframes-name, left, right)',
			],
		},
		'mix() with value lists': {
			links: {
				tr: '#mix',
				dev: '#mix',
			},
			properties: ['background-image'],
			tests: [
				'mix(\n  0.5;\n  linear-gradient(red, transparent), radial-gradient(transparent, yellow);\n  linear-gradient(tramsüaremt. green), radial-gradient(blue, transparent)\n)',
				'mix(\n  50%;\n  linear-gradient(red, transparent), radial-gradient(transparent, yellow);\n  linear-gradient(tramsüaremt. green), radial-gradient(blue, transparent)\n)',
				'mix(\n  --scroll-progress-timeline;\n  linear-gradient(red, transparent), radial-gradient(transparent, yellow);\n  linear-gradient(tramsüaremt. green), radial-gradient(blue, transparent)\n)',
				'mix(\n  scroll();\n  linear-gradient(red, transparent), radial-gradient(transparent, yellow);\n  linear-gradient(tramsüaremt. green), radial-gradient(blue, transparent)\n)',
				'mix(\n  view();\n  linear-gradient(red, transparent), radial-gradient(transparent, yellow);\n  linear-gradient(tramsüaremt. green), radial-gradient(blue, transparent)\n)',
				'mix(\n  --scroll-progress-timeline by linear(0, 0.25, 1);\n  linear-gradient(red, transparent), radial-gradient(transparent, yellow);\n  linear-gradient(tramsüaremt. green), radial-gradient(blue, transparent)\n)',
				'mix(\n  --scroll-progress-timeline by ease-in;\n  linear-gradient(red, transparent), radial-gradient(transparent, yellow);\n  linear-gradient(tramsüaremt. green), radial-gradient(blue, transparent)\n)',
				'mix(\n  --scroll-progress-timeline by cubic-bezier(0.5, 0, 0.3, 1);\n  linear-gradient(red, transparent), radial-gradient(transparent, yellow);\n  linear-gradient(tramsüaremt. green), radial-gradient(blue, transparent)\n)',
				'mix(\n  --scroll-progress-timeline by steps(10, start);\n  linear-gradient(red, transparent), radial-gradient(transparent, yellow);\n  linear-gradient(tramsüaremt. green), radial-gradient(blue, transparent)\n)',
				'mix(\n  50% of --keyframes-name;\n  linear-gradient(red, transparent), radial-gradient(transparent, yellow);\n  linear-gradient(tramsüaremt. green), radial-gradient(blue, transparent)\n)',
			],
		},
		'if()': {
			links: {
				tr: '#if-notation',
				dev: '#if-notation',
			},
			tests: [
				'if(media(screen): 100px)',
				'if(media((min-width: 600px)): 100px)',
				'if(media(screen and (min-width: 600px)): 100px)',
				'if(media(not screen): 100px)',
				'if(media(only screen): 100px)',
				'if(media((width < 600px)): 100px)',
				'if(media((width < 600px) or (width > 1000px)): 100px)',
				'if(media(600px < width < 1000px): 100px)',
				'if(media((width < 600px)): 100px;)',
				'if(media((width < 600px)): 100px; else: 200px)',
				'if(media((width < 600px)): 100px; else: 200px;)',
				'if(media((width < 600px)): 10%; else: 20%)',
				'if(supports(line-clamp: 3): 100px; else: 200px)',
				'if(style(--x): 100px; else: 200px)',
				'if(style(((--x))): 100px; else: 200px)',
				'if(style(not (--x)): 100px; else: 200px)',
				'if(style(--x: true): 100px; else: 200px)',
				'if(style(--x and --y): 100px; else: 200px)',
				'if(media(width < 600px): 100px; media(width > 1000px): 300px; else: 200px;)',
				'if(media(width < 600px): 10%; media(width > 1000px): 30%; else: 20%)',
				'if(supports(line-clamp: 3): 100px; supports(line-clamp: auto): 300px; else: 200px)',
				'if(style(--x: true): 100px; style(--x: false): 300px; else: 200px)',
				'if(not style(--x) and media(width < 600px): 100px; else: 200px)',
				'if(style(--x) and media(width < 600px): 100px; else: 200px)',
				'if(style(--x) or media(width < 600px): 100px; else: 200px)',
				'if(style(--x): media(width < 600px): 100px; else: 200px)',
			],
		},
		'if() with numbers': {
			links: {
				tr: '#if-notation',
				dev: '#if-notation',
			},
			properties: ['line-height'],
			tests: [
				'if(media(width < 600px): 1; else: 2)',
				'if(supports(line-clamp: 3): 1; else: 2)',
				'if(style(--responsive: true): 1; else: 2)',
				'if(media(width < 600px): 1; media(width > 1000px): 3; else: 2;',
				'if(supports(line-clamp: 3): 1; supports(line-clamp: auto): 3; else: 2',
				'if(style(--responsive: true): 1; style(--responsive: false): 3; else: 2',
			],
		},
		'if() with colors': {
			links: {
				tr: '#if-notation',
				dev: '#if-notation',
			},
			properties: ['color', 'background-color', 'text-decoration-color', 'column-rule-color'],
			tests: [
				'if(media(width < 600px): red; else: blue)',
				'if(supports(line-clamp: 3): red; else: blue)',
				'if(style(--responsive: true): red; else: blue)',
				'if(media(width < 600px): red; media(width > 1000px): green; else: blue;',
				'if(supports(line-clamp: 3): red; supports(line-clamp: auto): green; else: blue',
				'if(style(--responsive: true): red; style(--responsive: false): green; else: blue',
			],
		},
		'if() with keywords': {
			links: {
				tr: '#if-notation',
				dev: '#if-notation',
			},
			properties: ['position'],
			tests: [
				'if(media(width < 600px): left; else: right)',
				'if(supports(line-clamp: 3): left; else: right)',
				'if(style(--responsive: true): left; else: right)',
				'if(media(width < 600px): left; media(width > 1000px): center; else: right;',
				'if(supports(line-clamp: 3): left; supports(line-clamp: auto): center; else: right',
				'if(style(--responsive: true): left; style(--responsive: false): center; else: right',
			],
		},
		'inherit()': {
			links: {
				tr: '#inherit-notation',
				dev: '#inherit-notation',
			},
			tests: [
				'inherit(--custom-property)',
				'inherit(--custom-property, 100px)',
				'inherit(--custom-property, 10%)',
				'inherit(--custom-property, 180deg)',
				'inherit(--custom-property, 1s)',
				'inherit(--custom-property, 20)',
				'inherit(--custom-property, 100Hz)',
				'inherit(--custom-property, keyword)',
				'inherit(--custom-property, "string")',
				'inherit(--custom-property, calc(100px + 10%))',
				'inherit(--custom-property, 100px keyword)',
				'inherit(--custom-property, 100px / 10%)',
			],
		},
		'ident()': {
			links: {
				tr: '#ident',
				dev: '#ident',
			},
			properties: ['animation-name'],
			tests: [
				'ident("cool")',
				'ident("cool-" 1)',
				'ident("cool-" ident)',
				'ident("cool-" var(--animation-name))',
				'ident("--" var(--animation-name))',
				'ident("cool-" sibling-index())',
			],
		},
		'random() with lengths': {
			links: {
				tr: '#random',
				dev: '#random',
			},
			tests: [
				'random(0px, 100px)',
				'random(auto, 0px, 100px)',
				'random(--random-value-1, 0px, 100px)',
				'random(element-shared, 0px, 100px)',
				'random(auto element-shared, 0px, 100px)',
				'random(--random-value-1 element-shared, 0px, 100px)',
				'random(fixed 0.5, 0px, 100px)',
				'random(0px, 100px, 50px)',
				'random(auto, 0px, 100px, 50px)',
				'random(--random-value-1, 0px, 100px, 50px)',
				'random(element-shared, 0px, 100px, 50px)',
				'random(auto element-shared, 0px, 100px, 50px)',
				'random(--random-value-1 element-shared, 0px, 100px, 50px)',
				'random(fixed 0.5, 0px, 100px, 50px)',
				'random(50px + 100px, 100px + 200px)',
				'random(1em + 2em, (3em + 4em) / 2)',
				'random(1em + 2em, (3em + 4em) / 2, 0.2em + 0.3em)',
			],
		},
		'random() with degrees': {
			links: {
				tr: '#random',
				dev: '#random',
			},
			properties: ['rotate'],
			tests: [
				'random(45deg, 0.5turn)',
				'random(auto, 45deg, 0.5turn)',
				'random(--random-value-1, 45deg, 0.5turn)',
				'random(element-shared, 45deg, 0.5turn)',
				'random(auto element-shared, 45deg, 0.5turn)',
				'random(--random-value-1 element-shared, 45deg, 0.5turn)',
				'random(fixed 0.5, 45deg, 0.5turn)',
				'random(45deg, 0.5turn, 5deg)',
				'random(auto, 45deg, 0.5turn, 5deg)',
				'random(--random-value-1, 45deg, 0.5turn, 5deg)',
				'random(element-shared, 45deg, 0.5turn, 5deg)',
				'random(auto element-shared, 45deg, 0.5turn, 5deg)',
				'random(--random-value-1 element-shared, 45deg, 0.5turn, 5deg)',
				'random(fixed 0.5, 45deg, 0.5turn, 5deg)',
				'random(10deg + 20deg, 20deg + 40deg)',
				'random(0.2turn + 0.4turn, (0.4turn + 0.6turn) / 2)',
				'random(0.2turn + 0.4turn, (0.4turn + 0.6turn) / 2, 2deg + 3deg)',
			],
		},
		'random-item() with lengths': {
			links: {
				tr: '#random-item',
				dev: '#random-item',
			},
			tests: [
				'random-item(--random-item; 100px)',
				'random-item(--random-item; 0px; 50px; 100px)',
				'random-item(element-shared; 0px; 50px; 100px)',
				'random-item(--random-item; 50%; 100%)',
				'random-item(--random-item; 100px; 10em; 50%; 100%)',
			],
		},
		'random-item() with keywords': {
			links: {
				tr: '#random-item',
				dev: '#random-item',
			},
			properties: ['color'],
			tests: [
				'random-item(--random-item; red; yellow; green; blue)',
			],
		},
		'random-item() with functions': {
			links: {
				tr: '#random-item',
				dev: '#random-item',
			},
			properties: ['background-image'],
			tests: [
				'random-item(--random-item; linear-gradient(red, yellow); linear-gradient(green, blue))',
			],
		},
		'sibling-count()': {
			links: {
				tr: '#tree-counting',
				dev: '#tree-counting',
			},
			tests: [
				'calc(sibling-count() * 10px)',
			],
		},
		'sibling-index()': {
			links: {
				tr: '#tree-counting',
				dev: '#tree-counting',
			},
			tests: [
				'calc(sibling-index() * 10px)',
			],
		},
		'toggle() with lengths and percentages': {
			links: {
				tr: '#toggle-notation',
				dev: '#toggle-notation',
			},
			tests: [
				'toggle(1px, 2px)',
				'toggle(1px, 1em, calc(2% + 3px))',
				'toggle(min(5%, 1rem), 1em, calc(2% + 3px))',
			],
		},
		'toggle() with keywords': {
			links: {
				tr: '#toggle-notation',
				dev: '#toggle-notation',
			},
			properties: ['list-style-type'],
			tests: [
				'toggle(disc, circle)',
				'toggle(disc, circle, --custom-counter-style)',
			],
		},
		'toggle() with mixed values': {
			links: {
				tr: '#toggle-notation',
				dev: '#toggle-notation',
			},
			properties: ['background-position'],
			tests: [
				'toggle(top left, 100px 50px, 50% 50%)',
				'toggle(calc(10% + 2px) min(10%, 5vw), 100px 50px, 50% 50%, 0 0)',
			],
		},
		'Request URL modifiers': {
			links: {
				tr: '#request-url-modifiers',
				dev: '#request-url-modifiers',
			},
			tests: [
				'url("image.png" crossorigin(anonymous))',
				'url("image.png" crossorigin(use-credentials))',
				'url("image.png" integrity("8f6846e1bad406933f9122b201c6de07"))',
				'url("image.png" referrerpolicy(no-referrer))',
				'url("image.png" referrerpolicy(no-referrer-when-downgrade))',
				'url("image.png" referrerpolicy(same-origin))',
				'url("image.png" referrerpolicy(origin))',
				'url("image.png" referrerpolicy(strict-origin))',
				'url("image.png" referrerpolicy(origin-when-cross-origin))',
				'url("image.png" referrerpolicy(strict-origin-when-cross-origin))',
				'url("image.png" referrerpolicy(unsafe-url))',
				'url("image.png" crossorigin(anonymous) referrerpolicy(no-referrer))',
				'url("image.png" crossorigin(anonymous) integrity("8f6846e1bad406933f9122b201c6de07") referrerpolicy(no-referrer))',
			],
		},
	},
};
