From 93b77a6ccc4ba0e80ffde33ab087364457bf683a Mon Sep 17 00:00:00 2001
From: Chris Lilley <chris@w3.org>
Date: Tue, 16 Jan 2024 00:32:57 +0200
Subject: [PATCH] [css-images-4][editorial] Add wpt annotations, fix #9800
 (#9801)

* [css-images-4][editorial] Add wpt annotations, fix #9800

* Update css-images-4/Overview.bs

---------

Co-authored-by: Lea Verou <lea@verou.me>
---
 css-images-4/Overview.bs | 454 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 454 insertions(+)

diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index f92fa7be6f08..b0336e567dc5 100644
--- a/css-images-4/Overview.bs
+++ b/css-images-4/Overview.bs
@@ -20,6 +20,8 @@ Ignored Terms: <offset>, background positioning area, border image area, <meetor
 Ignored Vars: H, P
 Include Can I Use Panels: yes
 Default Highlight: css
+WPT Path Prefix: css/css-images/
+WPT Display: open
 </pre>
 
 <pre class=link-defaults>
@@ -240,6 +242,47 @@ Resolution/Type Negotiation: the ''image-set()'' notation {#image-set-notation}
 		If not specified,
 		it has no effect on the <<image-set-option>>.
 
+	<wpt>
+		image-set/image-set-all-options-invalid.html
+		image-set/image-set-calc-x-rendering-2.html
+		image-set/image-set-calc-x-rendering.html
+		image-set/image-set-computed.sub.html
+		image-set/image-set-conic-gradient-rendering.html
+		image-set/image-set-content-rendering.html
+		image-set/image-set-dpcm-rendering.html
+		image-set/image-set-dpi-rendering-2.html
+		image-set/image-set-dpi-rendering.html
+		image-set/image-set-dppx-rendering.html
+		image-set/image-set-empty-url-rendering.html
+		image-set/image-set-first-match-rendering.html
+		image-set/image-set-linear-gradient-rendering.html
+		image-set/image-set-negative-resolution-rendering-2.html
+		image-set/image-set-negative-resolution-rendering-3.html
+		image-set/image-set-negative-resolution-rendering.html
+		image-set/image-set-no-res-rendering-2.html
+		image-set/image-set-no-res-rendering.html
+		image-set/image-set-no-url-rendering.html
+		image-set/image-set-parsing.html
+		image-set/image-set-radial-gradient-rendering.html
+		image-set/image-set-rendering-2.html
+		image-set/image-set-rendering.html
+		image-set/image-set-repeating-conic-gradient-rendering.html
+		image-set/image-set-repeating-linear-gradient-rendering.html
+		image-set/image-set-repeating-radial-gradient-rendering.html
+		image-set/image-set-resolution-001.html
+		image-set/image-set-resolution-002.html
+		image-set/image-set-resolution-003.html
+		image-set/image-set-type-first-match-rendering.html
+		image-set/image-set-type-rendering-2.html
+		image-set/image-set-type-rendering-3.html
+		image-set/image-set-type-rendering.html
+		image-set/image-set-type-skip-unsupported-rendering.html
+		image-set/image-set-type-unsupported-rendering-2.html
+		image-set/image-set-type-unsupported-rendering.html
+		image-set/image-set-unordered-res-rendering.html
+		image-set/image-set-zero-resolution-rendering-2.html
+		image-set/image-set-zero-resolution-rendering.html
+	</wpt>
 
 	An ''image-set()'' function contains a list of one or more <<image-set-option>>s,
 	and must select only one of them
@@ -367,6 +410,14 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 	and it represents an [=invalid image=] or [=loading image=],
 	the ''image()'' function represents the same.
 
+	<wpt>
+		css-image-fallbacks-and-annotations.html
+		css-image-fallbacks-and-annotations002.html
+		css-image-fallbacks-and-annotations003.html
+		css-image-fallbacks-and-annotations004.html
+		css-image-fallbacks-and-annotations005.html
+	</wpt>
+
 	<div class='example'>
 		The fallback color can be used to ensure that text is still readable
 		even when the image fails to load.
@@ -574,6 +625,15 @@ Combining images: the ''cross-fade()'' notation {#cross-fade-function}
 	(it doesn't participate in the sizing of the result image at all;
 	see details in the sizing details below).
 
+	<wpt>
+		cross-fade-basic.html
+		cross-fade-computed-value.html
+		cross-fade-legacy-crash.html
+		cross-fade-natural-size.html
+		cross-fade-premultiplied-alpha.html
+		cross-fade-target-alpha.html
+	</wpt>
+
 ### ''cross-fade()'' Sizing ### {#cross-fade-sizing}
 
 	The dimensions of the image represented by a ''cross-fade()''
@@ -1029,6 +1089,10 @@ Using Out-Of-Document Sources: the <code>ElementSources</code> interface</h4>
 		};
 	</pre>
 
+	<wpt>
+		idlharness.html
+	</wpt>
+
 	Any entries in the <a idl>elementSources</a> map with a string key
 	and a value that is an object providing a <a>paint source</a>
 	are made available to the ''element()'' function.
@@ -1160,6 +1224,10 @@ Gradients</h2>
 	referred to as the <dfn export>gradient box</dfn>.
 	However, the gradient itself has no [=natural dimensions=].
 
+	<wpt>
+		gradients-with-border.html
+	</wpt>
+
 	<div class='example'>
 		For example, if you use a gradient as a background,
 		by default the gradient will draw into a <a>gradient box</a> the size of the element's padding box.
@@ -1205,6 +1273,27 @@ Linear Gradients: the ''linear-gradient()'' notation {#linear-gradients}
 		<dfn>&lt;side-or-corner></dfn> = [left | right] || [top | bottom]
 	</pre>
 
+	<wpt>
+		color-stop-currentcolor.html
+		gradient-border-box.html
+		gradient-button.html
+		gradient-content-box.html
+		linear-gradient-1.html
+		linear-gradient-2.html
+		multiple-position-color-stop-linear-2.html
+		multiple-position-color-stop-linear.html
+		normalization-linear-2.html
+		normalization-linear-degenerate.html
+		normalization-linear.html
+		tiled-gradients.html
+		gradient/color-stops-parsing.html
+		parsing/gradient-interpolation-method-computed.html
+		parsing/gradient-interpolation-method-invalid.html
+		parsing/gradient-interpolation-method-valid.html
+		parsing/gradient-position-invalid.html
+		parsing/gradient-position-valid.html
+	</wpt>
+
 ### Effects of color space on interpolation: examples ### {#color-interpolation}
 
 	<p><em>This section is non-normative.</em>
@@ -1353,6 +1442,26 @@ Adding <<color-interpolation-method>></h4>
 			<<color-stop-list>>
 	</pre>
 
+	<wpt>
+		empty-radial-gradient-crash.html
+		infinite-radial-gradient-refcrash.html
+		multiple-position-color-stop-radial-2.html
+		multiple-position-color-stop-radial.html
+		normalization-radial-2.html
+		normalization-radial-3.html
+		normalization-radial-4.html
+		normalization-radial-degenerate.html
+		normalization-radial.html
+		radial-gradient-transition-hint-crash.html
+		tiled-radial-gradients.html
+		gradient/color-stops-parsing.html
+		parsing/gradient-interpolation-method-computed.html
+		parsing/gradient-interpolation-method-invalid.html
+		parsing/gradient-interpolation-method-valid.html
+		parsing/gradient-position-invalid.html
+		parsing/gradient-position-valid.html
+	</wpt>
+
 <div class="example">
 	In this example, a radial gradient between the same pair of colors
 	color(display-p3 0.918 0.2 0.161) and #081 is drawn in three different colorspaces.
@@ -1480,6 +1589,27 @@ Conic Gradients: the ''conic-gradient()'' notation</h3>
 	<p class='issue'>
 		Are elliptical conic gradients useful? Do graphics libraries support them?
 
+	<wpt>
+		conic-gradient-angle-negative.html
+		conic-gradient-angle.html
+		conic-gradient-center.html
+		repeating-conic-gradient.html
+		tiled-conic-gradients.html
+		multiple-position-color-stop-conic-2.html
+		multiple-position-color-stop-conic.html
+		normalization-conic-2.html
+		normalization-conic-degenerate.html
+		normalization-conic.html
+		out-of-range-color-stop-conic.html
+		tiled-conic-gradients.html
+		gradient/color-stops-parsing.html
+		parsing/gradient-interpolation-method-computed.html
+		parsing/gradient-interpolation-method-invalid.html
+		parsing/gradient-interpolation-method-valid.html
+		parsing/gradient-position-invalid.html
+		parsing/gradient-position-valid.html
+	</wpt>
+
 <h4 id='conic-color-stops' class='no-toc'>
 Placing Color Stops</h4>
 
@@ -1613,6 +1743,11 @@ Repeating Gradients: the ''repeating-linear-gradient()'', ''repeating-radial-gra
 		<<repeating-radial-gradient()>> = repeating-radial-gradient( [ <<radial-gradient-syntax>> ] )
 	</pre>
 
+	<wpt>
+		gradient-content-box.html
+		gradient/color-stops-parsing.html
+	</wpt>
+
 	<div class=example>
 		Basic repeating conic gradient:
 
@@ -1711,6 +1846,10 @@ Color Stop Lists</h4>
 		<dfn>&lt;color-stop></dfn> = <<color-stop-length>> | <<color-stop-angle>>
 	</pre>
 
+	<wpt>
+		gradient/color-stops-parsing.html
+	</wpt>
+
 	<div class=note>
 		Note that <<color-stop-list>> and <<angular-color-stop-list>> are exactly identical in structure,
 		they just differ on whether they accept <<length>>s or <<angle>>s
@@ -1788,6 +1927,26 @@ Coloring the Gradient Line</h4>
 	the color space used for gradient interpolation
 	is the default interpolation color space, Oklab, as defined in [[css-color-4]].
 
+	<wpt>
+		gradients-with-transparent.html
+		gradient/css-color-4-colors-default-to-oklab-gradient.html
+		gradient/gradient-eval-001.html
+		gradient/gradient-eval-002.html
+		gradient/gradient-eval-003.html
+		gradient/gradient-eval-004.html
+		gradient/gradient-eval-005.html
+		gradient/gradient-eval-006.html
+		gradient/gradient-eval-007.html
+		gradient/gradient-eval-008.html
+		gradient/gradient-eval-009.html
+		gradient/gradient-none-interpolation.html
+		gradient/legacy-color-gradient.html
+		gradient/oklab-gradient.html
+		gradient/srgb-gradient.html
+		gradient/srgb-linear-gradient.html
+		gradient/xyz-gradient.html
+	</wpt>
+
 	<div class="example">
 		For example, given the following gradient definition:
 
@@ -1906,6 +2065,12 @@ Color Stop “Fixup”</h4>
 	all [=color stops=] and [=transition hints=] will have a definite position and color
 	and they will be in ascending order.
 
+	<wpt>
+		gradient-move-stops.html
+		gradient-nan-crash.html
+		gradient-refcrash.html
+	</wpt>
+
 	Note: It is recommended that authors exercise caution
 	when mixing different types of units,
 	such as px, em, or %,
@@ -2147,6 +2312,185 @@ Sizing Objects: the 'object-fit' property {#the-object-fit}
 			Equivalent to ''contain scale-down''.
 	</dl>
 
+	<wpt>
+		inheritance.html
+		object-fit-contain-png-001c.html
+		object-fit-contain-png-001e.html
+		object-fit-contain-png-001i.html
+		object-fit-contain-png-001o.html
+		object-fit-contain-png-001p.html
+		object-fit-contain-png-002c.html
+		object-fit-contain-png-002e.html
+		object-fit-contain-png-002i.html
+		object-fit-contain-png-002o.html
+		object-fit-contain-png-002p.html
+		object-fit-contain-svg-001e.html
+		object-fit-contain-svg-001i.html
+		object-fit-contain-svg-001o.html
+		object-fit-contain-svg-001p.html
+		object-fit-contain-svg-002e.html
+		object-fit-contain-svg-002i.html
+		object-fit-contain-svg-002o.html
+		object-fit-contain-svg-002p.html
+		object-fit-contain-svg-003e.html
+		object-fit-contain-svg-003i.html
+		object-fit-contain-svg-003o.html
+		object-fit-contain-svg-003p.html
+		object-fit-contain-svg-004e.html
+		object-fit-contain-svg-004i.html
+		object-fit-contain-svg-004o.html
+		object-fit-contain-svg-004p.html
+		object-fit-contain-svg-005e.html
+		object-fit-contain-svg-005i.html
+		object-fit-contain-svg-005o.html
+		object-fit-contain-svg-005p.html
+		object-fit-contain-svg-006e.html
+		object-fit-contain-svg-006i.html
+		object-fit-contain-svg-006o.html
+		object-fit-contain-svg-006p.html
+		object-fit-cover-png-001c.html
+		object-fit-cover-png-001e.html
+		object-fit-cover-png-001i.html
+		object-fit-cover-png-001o.html
+		object-fit-cover-png-001p.html
+		object-fit-cover-png-002c.html
+		object-fit-cover-png-002e.html
+		object-fit-cover-png-002i.html
+		object-fit-cover-png-002o.html
+		object-fit-cover-png-002p.html
+		object-fit-cover-svg-001e.html
+		object-fit-cover-svg-001i.html
+		object-fit-cover-svg-001o.html
+		object-fit-cover-svg-001p.html
+		object-fit-cover-svg-002e.html
+		object-fit-cover-svg-002i.html
+		object-fit-cover-svg-002o.html
+		object-fit-cover-svg-002p.html
+		object-fit-cover-svg-003e.html
+		object-fit-cover-svg-003i.html
+		object-fit-cover-svg-003o.html
+		object-fit-cover-svg-003p.html
+		object-fit-cover-svg-004e.html
+		object-fit-cover-svg-004i.html
+		object-fit-cover-svg-004o.html
+		object-fit-cover-svg-004p.html
+		object-fit-cover-svg-005e.html
+		object-fit-cover-svg-005i.html
+		object-fit-cover-svg-005o.html
+		object-fit-cover-svg-005p.html
+		object-fit-cover-svg-006e.html
+		object-fit-cover-svg-006i.html
+		object-fit-cover-svg-006o.html
+		object-fit-cover-svg-006p.html
+		object-fit-dyn-aspect-ratio-001.html
+		object-fit-dyn-aspect-ratio-002.html
+		object-fit-fill-png-001c.html
+		object-fit-fill-png-001e.html
+		object-fit-fill-png-001i.html
+		object-fit-fill-png-001o.html
+		object-fit-fill-png-001p.html
+		object-fit-fill-png-002c.html
+		object-fit-fill-png-002e.html
+		object-fit-fill-png-002i.html
+		object-fit-fill-png-002o.html
+		object-fit-fill-png-002p.html
+		object-fit-fill-svg-001e.html
+		object-fit-fill-svg-001i.html
+		object-fit-fill-svg-001o.html
+		object-fit-fill-svg-001p.html
+		object-fit-fill-svg-002e.html
+		object-fit-fill-svg-002i.html
+		object-fit-fill-svg-002o.html
+		object-fit-fill-svg-002p.html
+		object-fit-fill-svg-003e.html
+		object-fit-fill-svg-003i.html
+		object-fit-fill-svg-003o.html
+		object-fit-fill-svg-003p.html
+		object-fit-fill-svg-004e.html
+		object-fit-fill-svg-004i.html
+		object-fit-fill-svg-004o.html
+		object-fit-fill-svg-004p.html
+		object-fit-fill-svg-005e.html
+		object-fit-fill-svg-005i.html
+		object-fit-fill-svg-005o.html
+		object-fit-fill-svg-005p.html
+		object-fit-fill-svg-006e.html
+		object-fit-fill-svg-006i.html
+		object-fit-fill-svg-006o.html
+		object-fit-fill-svg-006p.html
+		object-fit-none-png-001c.html
+		object-fit-none-png-001e.html
+		object-fit-none-png-001i.html
+		object-fit-none-png-001o.html
+		object-fit-none-png-001p.html
+		object-fit-none-png-002c.html
+		object-fit-none-png-002e.html
+		object-fit-none-png-002i.html
+		object-fit-none-png-002o.html
+		object-fit-none-png-002p.html
+		object-fit-none-svg-001e.html
+		object-fit-none-svg-001i.html
+		object-fit-none-svg-001o.html
+		object-fit-none-svg-001p.html
+		object-fit-none-svg-002e.html
+		object-fit-none-svg-002i.html
+		object-fit-none-svg-002o.html
+		object-fit-none-svg-002p.html
+		object-fit-none-svg-003e.html
+		object-fit-none-svg-003i.html
+		object-fit-none-svg-003o.html
+		object-fit-none-svg-003p.html
+		object-fit-none-svg-004e.html
+		object-fit-none-svg-004i.html
+		object-fit-none-svg-004o.html
+		object-fit-none-svg-004p.html
+		object-fit-none-svg-005e.html
+		object-fit-none-svg-005i.html
+		object-fit-none-svg-005o.html
+		object-fit-none-svg-005p.html
+		object-fit-none-svg-006e.html
+		object-fit-none-svg-006i.html
+		object-fit-none-svg-006o.html
+		object-fit-none-svg-006p.html
+		object-fit-scale-down-png-001c.html
+		object-fit-scale-down-png-001e.html
+		object-fit-scale-down-png-001i.html
+		object-fit-scale-down-png-001o.html
+		object-fit-scale-down-png-001p.html
+		object-fit-scale-down-png-002c.html
+		object-fit-scale-down-png-002e.html
+		object-fit-scale-down-png-002i.html
+		object-fit-scale-down-png-002o.html
+		object-fit-scale-down-png-002p.html
+		object-fit-scale-down-svg-001e.html
+		object-fit-scale-down-svg-001i.html
+		object-fit-scale-down-svg-001o.html
+		object-fit-scale-down-svg-001p.html
+		object-fit-scale-down-svg-002e.html
+		object-fit-scale-down-svg-002i.html
+		object-fit-scale-down-svg-002o.html
+		object-fit-scale-down-svg-002p.html
+		object-fit-scale-down-svg-003e.html
+		object-fit-scale-down-svg-003i.html
+		object-fit-scale-down-svg-003o.html
+		object-fit-scale-down-svg-003p.html
+		object-fit-scale-down-svg-004e.html
+		object-fit-scale-down-svg-004i.html
+		object-fit-scale-down-svg-004o.html
+		object-fit-scale-down-svg-004p.html
+		object-fit-scale-down-svg-005e.html
+		object-fit-scale-down-svg-005i.html
+		object-fit-scale-down-svg-005o.html
+		object-fit-scale-down-svg-005p.html
+		object-fit-scale-down-svg-006e.html
+		object-fit-scale-down-svg-006i.html
+		object-fit-scale-down-svg-006o.html
+		object-fit-scale-down-svg-006p.html
+		parsing/object-fit-computed.html
+		parsing/object-fit-invalid.html
+		parsing/object-fit-valid.html
+	</wpt>
+
 	If the content does not completely fill the replaced element's content box,
 	the unfilled space shows the replaced element's background.
 	Since replaced elements always clip their contents to the content box,
@@ -2646,3 +2990,113 @@ Changes Since Level 3</h3>
 - Added the ''element()'' notation (deferred from Level 3)
 - Added <a href="#conic-gradients">conic gradients</a>
 - Added &lt;color-interpolation-method> to all gradient functions
+
+<!-- CSS Images 3 tests -->
+<wpt hidden>
+	animation/image-no-interpolation.html
+	animation/object-position-interpolation.html
+	animation/object-view-box-interpolation.html
+	image-fit-001.xht
+	image-fit-006.xht
+	image-orientation/image-orientation-background-image.html
+	image-orientation/image-orientation-background-position.html
+	image-orientation/image-orientation-background-properties-border-radius.html
+	image-orientation/image-orientation-background-properties.html
+	image-orientation/image-orientation-border-image.html
+	image-orientation/image-orientation-cursor.html
+	image-orientation/image-orientation-default.html
+	image-orientation/image-orientation-exif-png.html
+	image-orientation/image-orientation-from-image-composited-dynamic1.html
+	image-orientation/image-orientation-from-image-composited-dynamic2.html
+	image-orientation/image-orientation-from-image-composited.html
+	image-orientation/image-orientation-from-image-computed-style.html
+	image-orientation/image-orientation-from-image-content-images.html
+	image-orientation/image-orientation-from-image-dynamic1.html
+	image-orientation/image-orientation-from-image-dynamic2.html
+	image-orientation/image-orientation-from-image-embedded-content.html
+	image-orientation/image-orientation-from-image.html
+	image-orientation/image-orientation-iframe.html
+	image-orientation/image-orientation-img-object-fit.html
+	image-orientation/image-orientation-list-style-image.html
+	image-orientation/image-orientation-mask-image.html
+	image-orientation/image-orientation-none-computed-style.html
+	image-orientation/image-orientation-none-content-images.html
+	image-orientation/image-orientation-none-cross-origin-canvas.html
+	image-orientation/image-orientation-none-cross-origin-svg.html
+	image-orientation/image-orientation-none-cross-origin.html
+	image-orientation/image-orientation-none-image-document.html
+	image-orientation/image-orientation-none.html
+	image-orientation/svg-image-orientation-aspect-ratio.html
+	image-orientation/svg-image-orientation-none.html
+	image-orientation/svg-image-orientation.html
+	image-rendering-border-image.html
+	object-position-png-001c.html
+	object-position-png-001e.html
+	object-position-png-001i.html
+	object-position-png-001o.html
+	object-position-png-001p.html
+	object-position-png-002c.html
+	object-position-png-002e.html
+	object-position-png-002i.html
+	object-position-png-002o.html
+	object-position-png-002p.html
+	object-position-svg-001e.html
+	object-position-svg-001i.html
+	object-position-svg-001o.html
+	object-position-svg-001p.html
+	object-position-svg-002e.html
+	object-position-svg-002i.html
+	object-position-svg-002o.html
+	object-position-svg-002p.html
+	object-view-box-contain-intrinsic-size.html
+	object-view-box-empty-bounds.html
+	object-view-box-fit-contain-canvas.html
+	object-view-box-fit-contain-img.html
+	object-view-box-fit-contain-svg.html
+	object-view-box-fit-contain-video.html
+	object-view-box-fit-cover-canvas.html
+	object-view-box-fit-cover-img.html
+	object-view-box-fit-cover-svg.html
+	object-view-box-fit-cover-video.html
+	object-view-box-fit-fill-canvas.html
+	object-view-box-fit-fill-img.html
+	object-view-box-fit-fill-svg.html
+	object-view-box-fit-fill-video.html
+	object-view-box-fit-none-canvas.html
+	object-view-box-fit-none-img.html
+	object-view-box-fit-none-svg.html
+	object-view-box-fit-none-video.html
+	object-view-box-iframe.html
+	object-view-box-negative-bounds.html
+	object-view-box-parsing.html
+	object-view-box-property-changed.html
+	object-view-box-rect-auto.html
+	object-view-box-rect-percentage.html
+	object-view-box-rect.html
+	object-view-box-same-size.html
+	object-view-box-size-containment.html
+	object-view-box-svg-img-no-size.html
+	object-view-box-transition-mutation.html
+	object-view-box-writing-mode-canvas.html
+	object-view-box-writing-mode-img.html
+	object-view-box-writing-mode-svg.html
+	object-view-box-writing-mode-video.html
+	object-view-box-xywh-percentage.html
+	object-view-box-xywh.html
+	parsing/image-orientation-computed.html
+	parsing/image-orientation-invalid.html
+	parsing/image-orientation-valid.html
+	parsing/image-rendering-computed.html
+	parsing/image-rendering-invalid.html
+	parsing/image-rendering-valid.html
+	parsing/image-resolution-invalid.html
+	parsing/image-resolution-valid.html
+	parsing/object-position-computed.html
+	parsing/object-position-invalid.html
+	parsing/object-position-valid.html
+</wpt>
+
+<!-- CSS Values 4 test, empty url, on background-image -->
+<wpt hidden>
+	empty-background-image.html
+</wpt>
\ No newline at end of file