[css-images-4][css-images-5] Punt the non-color uses of image() to level 5, per WG resolution.

Author: tabatkins

css-images-4/Overview.bs

@@ -379,140 +379,16 @@ Resolution/Type Negotiation: the ''image-set()'' notation {#image-set-notation}
 Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 ---------------------------------------------------------------------------
 
-	The ''image()'' function allows an author to:
-
-	* use <a href="https://www.w3.org/TR/media-frags/">media fragments</a> to clip out a portion of an image
-	* use a solid color as an image
-	* fallback to a solid-color image, when the image at the specified url can't be downloaded or decoded
-	* automatically respect the image orientation specified in the image's metadata
-
-	The ''image()'' notation is defined as:
+	The ''image()'' function allows an author
+	to easily generate a solid-color image from any color.
+	Its syntax is:
 
 	<pre class='prod'>
-		<dfn>image()</dfn> = image( <<image-tags>>? [ <<image-src>>? , <<color>>? ]! )
-		<dfn>&lt;image-tags></dfn> = [ ltr | rtl ]
-		<dfn>&lt;image-src></dfn> = [ <<url>> | <<string>> ]
+		<dfn>image()</dfn> = image( <<color>> )
 	</pre>
 
-	A <<string>> used in ''image()'' represents a <<url>>.
-	As usual for URLs in CSS,
-	relative URLs are resolved to an absolute URL
-	(as described in Values &amp; Units [[!CSS-VALUES-3]])
-	when a specified ''image()'' value is computed.
-
-	If the image has an orientation specified in its metadata,
-	such as EXIF,
-	the UA must rotate or flip the image to correctly orient it
-	as the metadata specifies.
-
-### Image Fallbacks ### {#image-fallbacks}
-
-	If both a URL and a <<color>> are specified in ''image()'',
-	then whenever the URL represents an [=invalid image=] or [=loading image=],
-	the ''image()'' function renders as if the URL were not specified at all;
-	it generates a solid-color image as specified in [[#color-images]].
-
-	If just a URL is specified (no <<color>>)
-	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' id='ex-fallback'>
-		The fallback color can be used to ensure that text is still readable
-		even when the image fails to load.
-		For example, the following legacy code works fine if the image is rectangular and has no transparency:
-
-		<pre class="lang-css">
-			body      { color: black; background: white; }
-			p.special { color: white; background: url("dark.png") black; }
-		</pre>
-
-		When the image doesn't load,
-		the background color is still there to ensure that the white text is readable.
-		However, if the image has some transparency,
-		the black will be visible behind it,
-		which is probably not desired.
-		The ''image()'' function addresses this:
-
-		<pre class="lang-css">
-			body      { color: black; background: white; }
-			p.special { color: white; background: image("dark.png", black); }
-		</pre>
-
-		Now, the black won't show at all if the image loads,
-		but if for whatever reason the image fails,
-		it'll pop in and prevent the white text from being set against a white background.
-	</div>
-
-<!-- Good example for the fallback() function
-	<div class='example' id='ex-fallback-2'>
-		For example, if a future specification defined a way to refer to a specific frame of an animated GIF with a fragment identifier,
-		an author could write the following to get newer browsers to use the GIF's frame,
-		and older browsers to instead download the fallback image:
-
-		<pre class="lang-css">background-image: image("cat_meme.gif#frame=5", "lolcat.png");</pre>
-	</div>
--->
-
-### Image Fragments ### {#image-fragments}
-
-	When a URL specified in ''image()'' represents a portion of a resource
-	(e.g. by the use of <a href="https://www.w3.org/TR/media-frags/#naming-space">media fragment identifiers</a>)
-	that portion is clipped out of its context and used as a standalone image.
-
-	<div class="example" id='ex-image-fragment'>
-		For example, given the following image and CSS:
-
-		<a href="images/sprites.svg">
-			<img src="images/sprites.svg" height="20" width="180" alt="[9 circles, with 0 to 8 eighths filled in]">
-		</a>
-
-		<pre class="lang-css">background-image: image('sprites.svg#xywh=40,0,20,20')</pre>
-
-		...the background of the element will be the portion of the image that starts at (40px,0px) and is 20px wide and tall,
-		which is just the circle with a quarter filled in.
-	</div>
-
-	So that authors can take advantage of CSS's forwards-compatible parsing rules to provide a fallback for image slices,
-	implementations that support the ''image()'' notation
-	<em>must</em> support the <code>xywh=#,#,#,#</code> form of media fragment identifiers
-	for images specified via ''image()''. [[!MEDIA-FRAGS]]
-
-	<div class='example' id='ex-image-fragment-fallback'>
-		Note that image fragments can also be used with the ''url()'' notation.
-		However, a legacy UA that doesn't understand the media fragments notation
-		will ignore the fragment and simply display the entirety of the image.
-
-		Since the ''image()'' notation requires UAs to support media fragments,
-		authors can take advantage of CSS's forward-compatible parsing rules
-		to provide a fallback when using an image fragment URL:
-
-		<pre class="lang-css">
-			background-image: url('swirl.png'); /* old UAs */
-			background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */
-		</pre>
-	</div>
-
-	If a URL uses a fragment identifier syntax that the implementation does not understand,
-	or does not consider valid for that type of image,
-	the URL must be treated as representing an <a>invalid image</a>.
-
-	Note: This error-handling is limited to ''image()'',
-	and not in the definition of URL,
-	for legacy compat reasons.
-
-
-### Solid-color Images ### {#color-images}
-
-	If the ''image()'' function is specified with only a <<color>> argument (no URL),
-	it represents a solid-color image of the specified color with no [=natural dimensions=].
+	The ''image()'' function represents a solid-color image of the specified color
+	with no [=natural dimensions=].
 
 	<div class='example' id='ex-solid-color'>
 		For example,
@@ -525,47 +401,8 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 		as the solid color it generates always lies <em>beneath</em> all the background images.
 	</div>
 
-
-### Bidi-sensitive Images ### {#bidi-images}
-
-	Before listing any <code>&lt;image-src>s</code>,
-	the author may specify a directionality for the image,
-	similar to adding a <code>dir</code> attribute to an element in HTML.
-	If a directional image is used on or in an element with opposite <a href="https://www.w3.org/TR/CSS21/visuren.html#propdef-direction">direction</a>,
-	the image must be flipped in the inline direction
-	(as if it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is the X axis).
-
-	Note: Absent this declaration,
-	images default to no directionality at all,
-	and thus don't care about the directionality of the surrounding element.
-
-	<div class='example' id='ex-image-directionality'>
-		A list may use an arrow for a bullet that points into the content.
-		If the list can contain both LTR and RTL text,
-		though, the bullet may be on the left or the right,
-		and an image designed to point into the text on one side will point out of the text on the other side.
-		This can be fixed with code like:
-
-		<pre class="lang-html">
-			&lt;ul style="list-style-image: image(ltr 'arrow.png');">
-				&lt;li dir='ltr'>My bullet is on the left!&lt;/li>
-				&lt;li dir='rtl'>MY BULLET IS ON THE RIGHT!&lt;/li>
-			&lt;/ul>
-		</pre>
-
-			This should render something like:
-
-		<pre class="lang-html">
-			&#8658; My bullet is on the left!
-			  !THGIR EHT NO SI TELLUB YM &#8656;
-		</pre>
-
-		In LTR list items, the image will be used as-is.
-		In the RTL list items, however,
-		it will be flipped in the inline direction,
-		so it still points into the content.
-	</div>
-
+	Note: This function previously defined a number of additional behaviors,
+	but those have been shifted to [[css-images-5]].
 
 <!-- Big Text: cross-fade