[css-images-4][editorial] All examples have stable IDs w3c#3355

Author: svgeesus

css-images-4/Overview.bs

@@ -20,6 +20,7 @@ Ignored Terms: <offset>, background positioning area, border image area, <meetor
 Ignored Vars: H, P
 Include Can I Use Panels: yes
 Default Highlight: css
+Complain About: missing-example-ids true
 WPT Path Prefix: css/css-images/
 WPT Display: open
 </pre>
@@ -307,7 +308,7 @@ Resolution/Type Negotiation: the ''image-set()'' notation {#image-set-notation}
 	over the lifetime of the page,
 	if the criteria used to determine which option to choose change significantly enough to make it worthwhile in the UA's estimation.
 
-	<div class='example'>
+	<div class='example' id='ex-image-set'>
 		This example shows how to use ''image-set()'' to provide an image in three versions:
 		a "normal" version,
 		a "high-res" version,
@@ -321,7 +322,7 @@ Resolution/Type Negotiation: the ''image-set()'' notation {#image-set-notation}
 		</pre>
 	</div>
 
-	<div class='example'>
+	<div class='example' id='ex-image-set-type'>
 		This example shows use of the ''type()'' function
 		to serve multiple versions of the same image
 		in both new, higher-quality formats,
@@ -345,7 +346,7 @@ Resolution/Type Negotiation: the ''image-set()'' notation {#image-set-notation}
 		and so the JPEG is chosen instead.
 	</div>
 
-	<div class=example>
+	<div class=example id='eximage-set-multi-resolution'>
 		Raster images can be mixed with vector images,
 		or even CSS generated images.
 
@@ -418,7 +419,7 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 		css-image-fallbacks-and-annotations005.html
 	</wpt>
 
-	<div class='example'>
+	<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:
@@ -446,7 +447,7 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 	</div>
 
 <!-- Good example for the fallback() function
-	<div class='example'>
+	<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:
@@ -461,7 +462,7 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 	(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">
+	<div class="example" id='ex-image-fragment'>
 		For example, given the following image and CSS:
 
 		<a href="images/sprites.svg">
@@ -479,7 +480,7 @@ Image Fallbacks and Annotations: the ''image()'' notation {#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'>
+	<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.
@@ -508,7 +509,7 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 	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=].
 
-	<div class='example'>
+	<div class='example' id='ex-solid-color'>
 		For example,
 		one can use this as a simple way to "tint" a background image,
 		by overlaying a partially-transparent color over the top of the other image:
@@ -533,7 +534,7 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 	images default to no directionality at all,
 	and thus don't care about the directionality of the surrounding element.
 
-	<div class='example'>
+	<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,
@@ -887,7 +888,7 @@ Combining images: the ''cross-fade()'' notation {#cross-fade-function}
 			That is, the image must look identical to the referenced element,
 			modulo rasterization quality.
 
-			<div class='example'>
+			<div class='example' id='ex-element-reuse'>
 
 				As a somewhat silly example, a <{p}> element can be reused as a background elsewhere in the document:
 
@@ -909,7 +910,7 @@ Combining images: the ''cross-fade()'' notation {#cross-fade-function}
 			The function represents an image with the [=natural dimensions=] and appearance of the <a>paint source</a>.
 			The host language defines the size and appearance of paint sources.
 
-			<div class='example'>
+			<div class='example' id='ex-element-not-rendered-ref'>
 				For example, the ''element()'' function can reference an SVG <code>&lt;pattern></code> element in an HTML document:
 
 				<pre class=lang-html>
@@ -958,7 +959,7 @@ Combining images: the ''cross-fade()'' notation {#cross-fade-function}
 
 			The function represents an <a>invalid image</a>.
 
-			<div class='example'>
+			<div class='example' id='ex-invalid image'>
 
 				For example, all of the following ''element()'' uses will result in a transparent background:
 
@@ -994,7 +995,7 @@ Combining images: the ''cross-fade()'' notation {#cross-fade-function}
 	for example, in SVG,
 	any descendant of a <code>&lt;defs></code> element is considered to be not rendered.
 
-	<div class='example'>
+	<div class='example' id='ex-element-preview'>
 
 		The ''element()'' function can be put to many uses.
 		For example, it can be used to show a preview of the previous or next slide in a slideshow:
@@ -1126,7 +1127,7 @@ Using Out-Of-Document Sources: the <code>ElementSources</code> interface</h4>
 		like ''element(external fancy)'' or something.
 		Naming suggestions welcome.
 
-	<div class='example'>
+	<div class='example' id='ex-external-canvas'>
 		For example, fancy animating backgrounds can be done with an external canvas:
 
 		<pre class=lang-html>
@@ -1208,7 +1209,7 @@ Gradients</h2>
 			<<conic-gradient()>>  | <<repeating-conic-gradient()>> ]
 	</pre>
 
-	<div class=example>
+	<div class='example' id='ex-gradients-are-images'>
 
 		As with the other <<image>> types defined in this specification,
 		gradients can be used in any property that accepts images.
@@ -1228,7 +1229,7 @@ Gradients</h2>
 		gradients-with-border.html
 	</wpt>
 
-	<div class='example'>
+	<div class='example' id='ex-default-gradient-box'>
 		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.
 		If 'background-size' is explicitly set to a value such as ''100px 200px'',
@@ -1300,7 +1301,7 @@ Linear Gradients: the ''linear-gradient()'' notation {#linear-gradients}
 
 The effect of colorspace on interpolation can be significant.
 
-<div class="example">
+<div class="example" id='ex-colorspaces-srgb-lab-oklab'>
 	In this example, a linear gradient between the same pair of colors
 	#f01 and #081 is drawn in three different colorspaces.
 	The middle gradient uses gamma-encoded sRGB,
@@ -1323,7 +1324,7 @@ The effect of colorspace on interpolation can be significant.
 		alt="red to green gradient in three colorspaces" >
 </div>
 
-<div class="example">
+<div class="example" id='ex-colorspaces-blue-white'>
 	In this example, a linear gradient between the same pair of colors
 	white and #01E is drawn in three different colorspaces.
 	The middle gradient uses gamma-encoded sRGB,
@@ -1348,7 +1349,7 @@ The effect of colorspace on interpolation can be significant.
 		alt="white to blue gradient in three colorspaces" >
 </div>
 
-<div class="example">
+<div class="example" id='ex-hue-nonlinearity'>
 	In this example, a linear gradient between the same pair of colors
 	#44C and #795 is drawn in three different colorspaces.
 	This demonstrates that
@@ -1387,7 +1388,7 @@ although it is easy for the intermediate colors to fall out of gamut;
 they will then be gamut mapped
 to bring them back into gamut.
 
-<div class="example">
+<div class="example" id='ex-colorspaces-rectangular-polar'>
 	In this example, a linear gradient between the same pair of colors
 	#A37 and #595 is drawn in five different colorspaces,
 	two of them polar.
@@ -1462,7 +1463,7 @@ Adding <<color-interpolation-method>></h4>
 		parsing/gradient-position-valid.html
 	</wpt>
 
-<div class="example">
+<div class="example" id='ex-colorspaces-differ'>
 	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.
 	Notice that the color stops do not all need to be in the same colorspace.
@@ -1541,7 +1542,7 @@ Conic Gradients: the ''conic-gradient()'' notation</h3>
 	They are also known as "angle" gradients in some contexts,
 	since they are produced by varying the rotation angle of a ray.
 
-	<div class=example>
+	<div class='example' id='ex-simple-conic'>
 		<div style="overflow: hidden">
 			<img style="float: right; margin-left: 1em;" src='images/conic-diagram.png' alt="[An image showing a box with a background shading gradually clockwise from white to black, starting from the top. A gradient circle is shown, and the colors at 0 and 216 degrees respectively.]">
 
@@ -1640,7 +1641,7 @@ Conic Gradient Examples</h4>
 
 	All of the following ''conic-gradient()'' examples are presumed to be applied to a box that is 300px wide and 200px tall, unless otherwise specified.
 
-	<div class=example>
+	<div class='example' id='ex-conic-syntax'>
 		Below are various ways of specifying the same basic conic gradient:
 
 		<pre class=lang-css>
@@ -1655,7 +1656,7 @@ Conic Gradient Examples</h4>
 		<img src="images/conic1.png" alt="" >
 	</div>
 
-	<div class=example>
+	<div class='example' id='ex-conic-angles'>
 		Below are various ways of specifying the same basic conic gradient.
 		This demonstrates how even though color stops with angles outside [0deg, 360deg) are not directly painted,
 		they can still affect the color of the painted part of the gradient.
@@ -1669,7 +1670,7 @@ Conic Gradient Examples</h4>
 		<img src="images/conic2.png" alt="" >
 	</div>
 
-	<div class=example>
+	<div class='example' id='ex-conic-rotated'>
 		Below are two different ways of specifying the same rotated conic gradient, one with a rotation angle and one without:
 
 		<pre class=lang-css>
@@ -1688,7 +1689,7 @@ Conic Gradient Examples</h4>
 		<img src="images/conic4.png" alt="" >
 	</div>
 
-	<div class=example>
+	<div class='example' id='ex-hsl-wheel'>
 		A conic gradient with a radial gradient overlaid on it, to draw a hue & saturation wheel:
 
 		<pre class=lang-css>
@@ -1701,7 +1702,7 @@ Conic Gradient Examples</h4>
 		<img src="images/conic5.png" alt="" >
 	</div>
 
-	<div class=example>
+	<div class='example' id='ex-conic-pie'>
 		A conic gradient used to draw a simple pie chart.
 		The ''0deg'' color stop positions will be fixed up to be equal to the position of the color stop before them.
 		This will produce infinitesimal (invisible) transitions between the color stops with different colors,
@@ -1748,15 +1749,15 @@ Repeating Gradients: the ''repeating-linear-gradient()'', ''repeating-radial-gra
 		gradient/color-stops-parsing.html
 	</wpt>
 
-	<div class=example>
+	<div class='example' id='ex-conic-repeat'>
 		Basic repeating conic gradient:
 
 		<pre>background: repeating-conic-gradient(gold, #f06 20deg);</pre>
 
 		<img src="images/repeating-conic1.png" alt="">
 	</div>
 
-	<div class=example>
+	<div class='example' id='ex-gradient-starburst'>
 		Repeating color stops with abrupt transitions creates a starburst-type background:
 
 		<pre class=lang-css>
@@ -1769,7 +1770,7 @@ Repeating Gradients: the ''repeating-linear-gradient()'', ''repeating-radial-gra
 		<img src="images/repeating-conic2.png" alt="">
 	</div>
 
-	<div class=example>
+	<div class='example' id='ex-checkerboards'>
 		Here repeating color stops with abrupt transitions are used to create a checkerboard:
 
 		<pre class=lang-css>
@@ -1947,7 +1948,7 @@ Coloring the Gradient Line</h4>
 		gradient/xyz-gradient.html
 	</wpt>
 
-	<div class="example">
+	<div class="example" id='ex-missing-hue'>
 		For example, given the following gradient definition:
 
 		<pre class="lang-css">
@@ -2011,7 +2012,7 @@ Coloring the Gradient Line</h4>
 	between the surrounding color stops,
 	with the “halfway color” occurring exactly where the hint specifies.
 
-	<div class=example>
+	<div class='example' id='ex-transition-hints'>
 		Here an example of a linear gradient without [=transition hint=] (top) compared to one with a transition hint between the red and blue [=color stops=] (bottom).
 
 		<img src="images/gradient-colors-transition-hint-comparison.png" alt="">
@@ -2088,7 +2089,7 @@ Color Stop “Fixup”</h4>
 	<a href="http://www.w3.org/TR/css-animations/">animations</a>
 	or <a href="http://www.w3.org/TR/css-transitions/">transitions</a>.
 
-	<div class=example>
+	<div class='example' id='ex-gradient-fixup'>
 		Below are several pairs of gradients.
 		The latter of each pair is a manually “fixed-up” version of the former,
 		obtained by applying the above rules.
@@ -2193,7 +2194,7 @@ Color Stop “Fixup”</h4>
 	If the sum is larger,
 	any stripes or portions beyond the |total width| are truncated.
 
-	<div class=example>
+	<div class='example' id='ex-stripes-total-width'>
 		For example, 
 		''stripes(red 1fr, green 2fr, blue 100px)''
 		with a |total width| of ''400px''
@@ -2608,7 +2609,7 @@ Overriding Image Resolutions: the 'image-resolution' property {#the-image-resolu
 	As vector formats such as SVG do not have a [=natural resolution=],
 	this property has no effect on vector images.
 
-	<div class='example'>
+	<div class='example' id='ex-image-resolution'>
 		Printers tend to have substantially higher resolution than computer monitors;
 		due to this, an image that looks fine on the screen may look pixelated when printed out.
 		The 'image-resolution' property can be used to embed a high-resolution image into the document
@@ -2630,7 +2631,7 @@ Overriding Image Resolutions: the 'image-resolution' property {#the-image-resolu
 	</div>
 
 
-	<div class="example">
+	<div class="example" id='ex-resolution-from-image'>
 		Some image formats can encode the image resolution into the image data.
 		This rule specifies that the UA should use the image resolution found in the image itself,
 		falling back to 1 image pixel per CSS ''px'' unit.
@@ -2648,7 +2649,7 @@ Overriding Image Resolutions: the 'image-resolution' property {#the-image-resolu
 
 	</div>
 
-	<div class="example">
+	<div class="example" id='ex-resolution-300'>
 		Using this rule, the image resolution is set to 300dpi.
 		(The resolution in the image, if any, is ignored.)
 
@@ -2869,7 +2870,7 @@ Serialization {#serialization}
 	For ''cross-fade()'',
 	always serialize the <<percentage>>.
 
-	<div class='example'>
+	<div class='example' id='ex-serialize-gradient'>
 		For example, a gradient specified as:
 
 		<pre>Linear-Gradient( to bottom, red 0%,yellow,black 100px)</pre>