[css-color-4] id all the examples

Author: svgeesus

css-color-4/Overview.bs

@@ -15,7 +15,7 @@ Abstract: This specification describes CSS <<color>> values and properties for f
 Repository: w3c/csswg-drafts
 Ignored Terms: stacking context, double, octet
 Complain About: missing-example-ids true
-Complain About: broken-links true
+Complain About: broken-links false
 Complain About: accidental-2119 true
 </pre>
 
@@ -124,7 +124,7 @@ Value Definitions</h3>
 	but produce the same physical sensation,
 	we say they have the same color.
 
-	<div class="example">For example a green leaf, a photograph of that leaf
+	<div class="example" id="ex-cal-leaf">For example a green leaf, a photograph of that leaf
 		displayed on a computer screen, and a print of that photograph,
 		are all producing a green sensation by different means.
 		If the screen and the printer are [=calibrated=],
@@ -141,7 +141,7 @@ Value Definitions</h3>
 	or transformed from one colorspace to another,
 	while looking the same.
 
-	<div class="example"><p>A leaf is measured
+	<div class="example" id="ex-leaf-spectro"><p>A leaf is measured
 		with a spectrophotometer
 		and found to have the color
 		<span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> lch(51.2345% 21.2 130)
@@ -233,7 +233,7 @@ Foreground Color: the 'color' property</h2>
 	There are several different ways to syntactically specify a given color.
 For example, to specify lime green:
 
-	<div class="example">
+	<div class="example" id="ex-lime">
 		<pre class="lang-css">
 		em { color: <span class="swatch" style="--color: lime"></span>&nbsp;lime; }   /* color keyword  */
 		em { color: <span class="swatch" style="--color: lime"></span>&nbsp;rgb(0 255 0); } /* RGB range 0-255   */
@@ -432,7 +432,7 @@ Resolving <<color>> Values</h3>
 		does not preserve any mixed casing
 		and is treated as being all lowercase.
 
-		<div class="example">
+		<div class="example" id="ex-hsl-case">
 			<p>For example, the first form below is treated as identical to the second:</p>
 			<pre class="lang-css"><span class="swatch" style="--color: hsl(39 100% 50%)"></span> HsL(39 100% 50%)
 
@@ -449,7 +449,7 @@ Resolving <<color>> Values</h3>
 		and defaulting to opaque if unspecified).
 
 
-		<div class="example">
+		<div class="example" id="ex-hsl-computed">
 			<p>For example, the computed value of</p>
 			<pre class="lang-css"><span class="swatch" style="--color: rgb(255, 165, 0)"></span> hsl(38.824 100% 50%)</pre>
 			<p>is</p>
@@ -467,7 +467,7 @@ Resolving <<color>> Values</h3>
 		(as a <<number>>, not a <<percentage>>;
 		and defaulting to opaque if unspecified).
 
-		<div class="example">
+		<div class="example" id="ex-lch-computed">
 			<p>For example, </p>
 			<pre class="lang-css"><span class="swatch" style="--color: rgb(77.61% 36.34% 2.45%)"></span> lch(52.2345% 72.2 56.2 / 1)</pre>
 			<p>would serialize as the string </p>
@@ -482,7 +482,7 @@ Resolving <<color>> Values</h3>
 		(as a <<number>>, not a <<percentage>>;
 		and defaulting to opaque if unspecified).
 
-		<div class="example">
+		<div class="example" id="ex-p3-computed">
 			<p>For example,</p>
 			<pre class="lang-css"><span class="swatch" style="--color: goldenrod"></span> color(display-p3 0.823 0.6554 0.2537)</pre>
 			<p>would serialize as the string</p>
@@ -506,7 +506,7 @@ Resolving <<color>> Values</h3>
 		it must be converted
 		as specified in [[#device-cmyk]].
 
-		<div class="example">
+		<div class="example" id="ex-device-cmyk-used">
 			<p>For example, </p>
 			<pre class="lang-css"><span class="swatch" style="--color: rgb(93.124%, 44.098%, 57.491%)"></span> device-cmyk(0% 70% 20% 0%)</pre>
 			<p>
@@ -570,7 +570,7 @@ This section updates and replaces that part of CSS Object Model, section
 	with the "." character as decimal separator.
 	Trailing zeroes must be omitted.
 
-	<div class="example">
+	<div class="example" id="ex-alpha-trimzero">
 		<p>For example, an alpha value of 70%
 			will be serialized as the string
 			"0.7".
@@ -587,7 +587,7 @@ This section updates and replaces that part of CSS Object Model, section
 	(unless trailing zeroes have been removed).
 	Values must be rounded, not truncated.
 
-	<div class="example">
+	<div class="example" id="ex-alpha-round">
 		<p>For example, an alpha value of 12.3456789%
 			may be serialized as the strings
 			"0.12" or "0.123" or "0.1234" or "0.12346"
@@ -632,7 +632,7 @@ This section updates and replaces that part of CSS Object Model, section
 	from the alpha value.
 
 
-	<div class="example">
+	<div class="example" id="ex-rgb-ser-int-rgba">
 		<p>For example, the serialized value of</p>
 		<pre class="lang-css"><span class="swatch" style="--color: rgba(29, 164, 192, 0.95)"></span> rgb(29 164 192 / 95%)</pre>
 		<p>is the string "rgba(29, 164, 192, 0.95)"</p>
@@ -664,7 +664,7 @@ This section updates and replaces that part of CSS Object Model, section
 	are advised to update them to cope with
 	<<number>>.
 
-<div class="example">
+<div class="example" id="ex-rgb-number">
 	<p>
 	For example,</p>
 	<pre class="lang-css"><span class="swatch" style="--color: rgb(57.28% 42.14% 51.46%)"></span> rgb(146.064 107.457 131.223)</pre>
@@ -674,7 +674,7 @@ This section updates and replaces that part of CSS Object Model, section
 	is the string "rgb(146.06, 107.46, 131.2)".</p>
 </div>
 
-<div class="example">
+<div class="example" id="ex-rgb-notrail">
 	<p>The serialized value of </p>
 	<pre class="lang-css"><span class="swatch" style="--color: goldenrod"></span> ''goldenrod''</pre>
 	<p>is the string "rgb(218 165 32)"
@@ -1213,7 +1213,7 @@ System Colors</h3>
 	the <<system-color>> keywords also respond to light mode or dark mode changes.
 
 
-	<div class="example" id="LM-DM-links">
+	<div class="example" id="ex-LM-DM-links">
 		For example, traditional <span class="swatch" style="--color: blue"></span>  blue link text is legible on a <span class="swatch" style="--color: #fff"></span> white background
 	(WCAG contrast 8.59:1, AAA pass)
 	but would not be legible on a <span class="swatch" style="--color: #000"></span>  black background
@@ -1323,7 +1323,7 @@ System Colors</h3>
 	though possibly at a lower contrast rating,
 	over any of the backgrounds.
 
-	<div class="example" id="SystemCombo">
+	<div class="example" id="ex-SystemCombo">
 		For example, the system color combinations in the browser you are currently using:
 
 		<p>Canvas with CanvasText <span style="background-color:Canvas; color:CanvasText">CanvasText</span></p>
@@ -1508,7 +1508,7 @@ HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>
 	it does not correspond to the visual perception of lightness
 	across hues.
 
-	<div class="example">
+	<div class="example" id="ex-hsl-sucks">
 		For example, <span class="swatch" style="--color: blue"></span>&nbsp;''blue''
 		is represented in HSL as
 		<span class="swatch" style="--color: blue"></span>&nbsp;''hsl(240deg 100% 50%)''
@@ -1530,7 +1530,7 @@ HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>
 	colors appear bunched up in some areas
 	and widely spaced in others.
 
-	<div class="example">
+	<div class="example" id="ex-hsl-sucks-more">
 		For example, the pair of hues
 		<!--
 			hsl(220 100% 50%) 42.114139000774955, 97.39536874737148, 290.5815091930946
@@ -2444,7 +2444,7 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
 	and interpreted identically to the <<alpha-value>> in ''rgb()''.
 
 
-	<div class="example">
+	<div class="example" id="ex-lab-samples">
 		<pre class="lang-css">
 			<span class="swatch" style="--color: rgb(49.06% 13.87% 15.9%)"></span> lab(29.2345% 39.3825 20.0664);
 			<span class="swatch" style="--color: rgb(77.61% 36.34% 2.45%)"></span> lab(52.2345% 40.1645 59.9971);
@@ -2483,7 +2483,7 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
 	separated by a slash,
 	and interpreted identically to the <<alpha-value>> in ''rgb()''.
 
-	<div class="example">
+	<div class="example" id="ex-lch-samples">
 		<pre class="lang-css">
 			<span class="swatch" style="--color: rgb(49.06% 13.87% 15.9%)"></span> lch(29.2345% 44.2 27);
 			<span class="swatch" style="--color: rgb(77.61% 36.34% 2.45%)"></span> lch(52.2345% 72.2 56.2);
@@ -2598,7 +2598,7 @@ Profiled, Device-dependent Colors</h2>
 
 	These can be used without supplying a separate profile.
 
-	<div class='example'>
+	<div class='example' id="ex-profiles-colors">
 		This example specifies four profiled colors:
 		two are custom spaces
 		(for a SWOP-coated CMYK press,
@@ -2757,7 +2757,7 @@ Profiled, Device-dependent Colors</h2>
 	''color()'' represents <a>opaque black</a>.
 
 
-	<div class="example">
+	<div class="example" id="ex-2020-oog-p3">
 		This very intense lime color is in-gamut for rec.2020:
 		<pre class="lang-css">color(rec2020 0.42053 0.979780 0.00579);</pre>
 		in LCH, that color is
@@ -2777,7 +2777,7 @@ Profiled, Device-dependent Colors</h2>
 		produced automatically by gamut mapping.
 	</div>
 
-	<div class="example">
+	<div class="example" id="ex-2020-fallback">
 		The same color as the previous example is now specified with a fallback
 		<pre class="lang-css">color(rec2020 0.42053 0.979780 0.00579, color(display-p3(0 1 0)));</pre>
 		On a display-p3 screen,
@@ -2786,7 +2786,7 @@ Profiled, Device-dependent Colors</h2>
 		the fallback color will be used.
 	</div>
 
-	<div class="example">
+	<div class="example" id="ex-2020-two-fallbacks">
 		An intense green is provided in prophoto-rgb space.
 		It has a first fallback, which is the same color in display-p3
 		in case prophoto is unsupported. The color is in gamut of display-p3.
@@ -2795,7 +2795,7 @@ Profiled, Device-dependent Colors</h2>
 		<pre class="lang-css">color(prophoto-rgb 0.4835 0.9167 0.2188, display-p3 0.3499 0.9800 0.1399, rgb(33.44% 96.68% 21.07%))</pre>
 	</div>
 
-	<div class="example">
+	<div class="invalid example" id="ex-profoto-bad">
 		Same as the previous example, but with a typo!
 		An intense green is provided in profoto-rgb space (which doesn't exist).
 		Ths makes it invalid, so we go to the first fallback, which is the same color in display-p3.
@@ -3058,7 +3058,7 @@ Predefined colorspaces: ''srgb'', ''display-p3'', ''a98-rgb'', ''prophoto-rgb'',
 				but can occur as a result of chromatic adaptation,
 				and likewise must not be clamped.
 
-				<div class="example">
+				<div class="example" id="ex-xyz">
 					These are exactly equivalent:
 
 					<pre class="lang-css">
@@ -3074,7 +3074,7 @@ Predefined colorspaces: ''srgb'', ''display-p3'', ''a98-rgb'', ''prophoto-rgb'',
 				representing the L, a, and b values.
 				The meaning and valid ranges are <a href="#specifying-lab-lch">the same as the lab() function</a>.
 
-				<div class="example">
+				<div class="example" id="ex-lab-in-color">
 					These are exactly equivalent:
 
 					<pre class="lang-css">
@@ -3265,7 +3265,7 @@ corresponding to the combination of
 inks, paper, total ink coverage  and equipment
 you will use.
 
-<div class="example">
+<div class="example" id="ex-fogra">
 	For example, using offset printing to ISO 12647-2:2004 / Amd 1:2007
 	using the FOGRA39 characterisation data
 	on 115gsm coated paper
@@ -3357,7 +3357,7 @@ can proceed as normal.
 </figure>
 
 
-<div class="example">
+<div class="example" id="ex-swop5v2">
 	This example is using offset printing to ISO 12647-2:2004
 	using the CGATS/SWOP TR005 2007 characterisation data
 	on grade 5 paper
@@ -3393,7 +3393,7 @@ Fallback colors can be specified,
 for example if the specified CMYK color is known
 to be outside the sRGB gamut.
 
-<div class="example">
+<div class="example" id="ex-fogra39-fallback-mq">
 	This example uses the same FOGRA39 setup as before,
 	but specifies a bright green which is outside the sRGB gamut.
 	It is, however, inside the display-p3 gamut.
@@ -3473,7 +3473,7 @@ Array(3) [ 0.16582655785857967, 0.6147848214649991, 0.3532666045888559 ]
 
 Colors are not restricted to four inks (CMYK). For example, wide-gamut 7 Color ink sets can be used.
 
-<div class="example">This example uses the beta FOGRA55 dataset for KCMYOGV seven-color printing.
+<div class="example" id="ex-fogra55beta-7color">This example uses the beta FOGRA55 dataset for KCMYOGV seven-color printing.
 	Four of the inks - black, cyan, magenta, and yellow - are the same as,
 	and give the same results as, the FOGRA51 set.
 	The other three inks are:
@@ -3587,7 +3587,7 @@ Device-dependent CMYK Colors: the ''device-cmyk()'' function</h2>
 		</li>
 	</ol>
 
-	<div class='example'>
+	<div class='example' id="ex-device-cmyk-naive">
 		For example, with no ''@color-profile'' and no fallback specified,
 		the following colors are equivalent, using the naive conversion.
 
@@ -3598,7 +3598,7 @@ Device-dependent CMYK Colors: the ''device-cmyk()'' function</h2>
 		</pre>
 	</div>
 
-	<div class='example'>
+	<div class='example' id="ex-device-cmyk-colprof">
 		With the ''@color-profile'' specified as in the example stylesheet,
 		the following colors are equivalent, using colorimetric conversion.