[css-images] More preprocessor tweaks.

Author: tabatkins

autolinker-config.md

@@ -56,6 +56,14 @@ css-break-3
 * break-before
 * orphans
 
+css-color-3
+-----------
+* <color>
+
+css-content-3
+-------------
+* content
+
 css-fonts-3
 -----------
 * font

css-images/Overview.html

@@ -169,7 +169,7 @@ <h3 data-level=1.2 id=values><span class=secno>1.2 </span><span class=content>
 	Other CSS modules may expand the definitions of these value types: 
 	for example <a data-biblio-type=informative data-link-type=biblio href=#css3color title=CSS3COLOR>[CSS3COLOR]</a>, 
 	when combined with this module, 
-	expands the definition of the <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var>&lt;color&gt;</var></a> value type as used in this specification.
+	expands the definition of the <a class=production data-link-type=type href=http://dev.w3.org/fxtf/filters/#ltcolorgt><var>&lt;color&gt;</var></a> value type as used in this specification.
 
 <p>	In addition to the property-specific values listed in their definitions, 
 	all properties defined in this specification also accept the <a href=http://www.w3.org/TR/css3-values/>global keywords</a> as their property value. 
@@ -293,7 +293,7 @@ <h3 data-level=3.2 id=image-notation><span class=secno>3.2 </span><span class=co
 
 <p>	The <a class=css data-link-type=maybe href=#funcdef-image>image()</a> notation is defined as:
 
-	<pre class=prod>  <dfn data-dfn-type=function id=funcdef-image>image()</dfn> = image( <a class=production data-link-type=type href=#typedef-image-tags><var>&lt;image-tags&gt;</var></a>? [ <a class=production data-link-type=type href=#typedef-image-src><var>&lt;image-src&gt;</var></a> , ]* [ <a class=production data-link-type=type href=#typedef-image-src><var>&lt;image-src&gt;</var></a> | <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var>&lt;color&gt;</var></a> ] )
+	<pre class=prod>  <dfn data-dfn-type=function id=funcdef-image>image()</dfn> = image( <a class=production data-link-type=type href=#typedef-image-tags><var>&lt;image-tags&gt;</var></a>? [ <a class=production data-link-type=type href=#typedef-image-src><var>&lt;image-src&gt;</var></a> , ]* [ <a class=production data-link-type=type href=#typedef-image-src><var>&lt;image-src&gt;</var></a> | <a class=production data-link-type=type href=http://dev.w3.org/fxtf/filters/#ltcolorgt><var>&lt;color&gt;</var></a> ] )
   <dfn data-dfn-type=type id=typedef-image-tags>&lt;image-tags&gt;</dfn> = [ ltr | rtl ]
   <dfn data-dfn-type=type id=typedef-image-src>&lt;image-src&gt;</dfn> = [ <a class=production data-link-type=type href=http://dev.w3.org/fxtf/masking/#lturlgt><var>&lt;url&gt;</var></a> | <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-fonts-3/#font-language-override-string-value><var>&lt;string&gt;</var></a> ]
 </pre>
@@ -347,10 +347,10 @@ <h4 data-level=3.2.2 id=image-fallbacks><span class=secno>3.2.2 </span><span cla
 
 <p>	Multiple <a class=production data-link-type=type href=#typedef-image-src><var>&lt;image-src&gt;</var></a>s can be given separated by commas, 
 	in which case the function represents the first image that's not an <a href=#invalid-image>invalid image</a>.  
-	The final argument can specify a <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var>&lt;color&gt;</var></a> to serve as an ultimate fallback; 
+	The final argument can specify a <a class=production data-link-type=type href=http://dev.w3.org/fxtf/filters/#ltcolorgt><var>&lt;color&gt;</var></a> to serve as an ultimate fallback; 
 	this can be used, e.g. for <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#background-image title=background-image>background-image</a>, 
 	to ensure adequate contrast if none of the preceding <a class=production data-link-type=type href=#typedef-image-src><var>&lt;image-src&gt;</var></a>s can be used. 
-	If the final argument is a <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var>&lt;color&gt;</var></a>, 
+	If the final argument is a <a class=production data-link-type=type href=http://dev.w3.org/fxtf/filters/#ltcolorgt><var>&lt;color&gt;</var></a>, 
 	it represents a solid-color image of the given color with no <a href=#intrinsic-dimensions>intrinsic dimensions</a>.  
 	If all of the provided <a class=production data-link-type=type href=#typedef-image-src><var>&lt;image-src&gt;</var></a>s are <a href=#invalid-image>invalid images</a> 
 	and a fallback color was not provided as the last argument, 
@@ -415,7 +415,7 @@ <h4 data-level=3.2.3 id=color-images><span class=secno>3.2.3 </span><span class=
 
 	<div class=example>
 
-<p>		At times, one may need a solid-color image for a property or function that does not accept the <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var>&lt;color&gt;</var></a> type directly.  
+<p>		At times, one may need a solid-color image for a property or function that does not accept the <a class=production data-link-type=type href=http://dev.w3.org/fxtf/filters/#ltcolorgt><var>&lt;color&gt;</var></a> type directly.  
 		The <a class=css data-link-type=maybe href=#funcdef-image>image()</a> function can be used for this: 
 		by specifying <em>only</em> a color without any URLs, 
 		the function immediately falls back to representing a solid-color image of the chosen color.
@@ -516,7 +516,7 @@ <h3 data-level=3.3 id=image-set-notation><span class=secno>3.3 </span><span clas
 
 <p>	The syntax for <a class=css data-link-type=maybe href=#funcdef-image-set>image-set()</a> is:
 
-	<pre class=prod><dfn data-dfn-type=function id=funcdef-image-set>image-set()</dfn> = image-set( [ <a class=production data-link-type=type href=#typedef-image-set-decl><var>&lt;image-set-decl&gt;</var></a>, ]* [ <a class=production data-link-type=type href=#typedef-image-set-decl><var>&lt;image-set-decl&gt;</var></a> | <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var>&lt;color&gt;</var></a>] )
+	<pre class=prod><dfn data-dfn-type=function id=funcdef-image-set>image-set()</dfn> = image-set( [ <a class=production data-link-type=type href=#typedef-image-set-decl><var>&lt;image-set-decl&gt;</var></a>, ]* [ <a class=production data-link-type=type href=#typedef-image-set-decl><var>&lt;image-set-decl&gt;</var></a> | <a class=production data-link-type=type href=http://dev.w3.org/fxtf/filters/#ltcolorgt><var>&lt;color&gt;</var></a>] )
 <dfn data-dfn-type=type id=typedef-image-set-decl>&lt;image-set-decl&gt;</dfn> = [ <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var>&lt;image&gt;</var></a> | <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-fonts-3/#font-language-override-string-value><var>&lt;string&gt;</var></a> ] <a class=production data-link-type=type href=#typedef-resolution><var>&lt;resolution&gt;</var></a></pre>
 <p>	The <a class=css data-link-type=maybe href=#funcdef-image-set>image-set()</a> function can not be nested inside of itself,
 	either directly
@@ -941,18 +941,18 @@ <h3 data-level=3.5 id=cross-fade-function><span class=secno>3.5 </span><span cla
 
 <p>	The syntax for <a class=css data-link-type=maybe href=#funcdef-cross-fade>cross-fade()</a> is defined as:
 
-<pre class=prod><dfn data-dfn-type=function id=funcdef-cross-fade>cross-fade()</dfn> = cross-fade( <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var>&lt;percentage&gt;</var></a>? <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var>&lt;image&gt;</var></a> [, <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var>&lt;image&gt;</var></a> | <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var>&lt;color&gt;</var></a> ]? )</pre>
+<pre class=prod><dfn data-dfn-type=function id=funcdef-cross-fade>cross-fade()</dfn> = cross-fade( <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-fonts-3/#percentage-size-value><var>&lt;percentage&gt;</var></a>? <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var>&lt;image&gt;</var></a> [, <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var>&lt;image&gt;</var></a> | <a class=production data-link-type=type href=http://dev.w3.org/fxtf/filters/#ltcolorgt><var>&lt;color&gt;</var></a> ]? )</pre>
 <p>	The function represents an image generated by 
 	combining two images.
 
-<p>	The <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var>&lt;percentage&gt;</var></a> represents how much of the first image is retained
+<p>	The <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-fonts-3/#percentage-size-value><var>&lt;percentage&gt;</var></a> represents how much of the first image is retained
 	when it is blended with the second image.
-	The <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var>&lt;percentage&gt;</var></a> must be between <span class=css data-link-type=maybe>0%</span> and <span class=css data-link-type=maybe>100%</span> inclusive; 
+	The <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-fonts-3/#percentage-size-value><var>&lt;percentage&gt;</var></a> must be between <span class=css data-link-type=maybe>0%</span> and <span class=css data-link-type=maybe>100%</span> inclusive; 
 	any other value is invalid.
 	If omitted,
 	it defaults to the value <span class=css data-link-type=maybe>50%</span>.
 
-<p>	If the last argument is a <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var>&lt;color&gt;</var></a>,
+<p>	If the last argument is a <a class=production data-link-type=type href=http://dev.w3.org/fxtf/filters/#ltcolorgt><var>&lt;color&gt;</var></a>,
 	it represents a solid-color image with the same intrinsic dimensions as the first image.
 	If omitted,
 	it defaults to the color <span class=css data-link-type=maybe>transparent</span>.
@@ -1350,7 +1350,7 @@ <h4 class=no-toc data-level=4.2.1 id=radial-gradient-syntax><span class=secno>4.
 			<a class=production data-link-type=type href=#typedef-size><var>&lt;size&gt;</var></a> may instead be given explicitly as:
 
 			<dl>
-				<dt><dfn data-dfn-type=dfn id=-length--percentage-2>[ <a class=production data-link-type=type href=#typedef-length><var>&lt;length&gt;</var></a> | <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var>&lt;percentage&gt;</var></a> ]{2}</dfn>
+				<dt><dfn data-dfn-type=dfn id=-length--percentage-2>[ <a class=production data-link-type=type href=#typedef-length><var>&lt;length&gt;</var></a> | <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-fonts-3/#percentage-size-value><var>&lt;percentage&gt;</var></a> ]{2}</dfn>
 				<dd>
 					Gives the size of the ellipse explicitly. 
 					The first value represents the horizontal radius, 
@@ -1366,7 +1366,7 @@ <h4 class=no-toc data-level=4.2.1 id=radial-gradient-syntax><span class=secno>4.
 
 		<pre>  radial-gradient() = radial-gradient(
     [ [ circle               || <a class=production data-link-type=type href=#typedef-length><var>&lt;length&gt;</var></a> ]                          [ at <a class=production data-link-type=type href=#typedef-position><var>&lt;position&gt;</var></a> ]? , | 
-      [ ellipse              || [ <a class=production data-link-type=type href=#typedef-length><var>&lt;length&gt;</var></a> | <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var>&lt;percentage&gt;</var></a> ]{2} ]    [ at <a class=production data-link-type=type href=#typedef-position><var>&lt;position&gt;</var></a> ]? , |
+      [ ellipse              || [ <a class=production data-link-type=type href=#typedef-length><var>&lt;length&gt;</var></a> | <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-fonts-3/#percentage-size-value><var>&lt;percentage&gt;</var></a> ]{2} ]    [ at <a class=production data-link-type=type href=#typedef-position><var>&lt;position&gt;</var></a> ]? , |
       [ [ circle | ellipse ] || <a class=production data-link-type=type href=#typedef-extent-keyword><var>&lt;extent-keyword&gt;</var></a> ]                  [ at <a class=production data-link-type=type href=#typedef-position><var>&lt;position&gt;</var></a> ]? , |
       at <a class=production data-link-type=type href=#typedef-position><var>&lt;position&gt;</var></a> ,
     ]?
@@ -1729,15 +1729,15 @@ <h3 data-level=4.5 id=color-stop-syntax><span class=secno>4.5 </span><span class
 
 	<pre class=prod>  <dfn data-dfn-type=type id=typedef-color-stop-list>&lt;color-stop-list&gt;</dfn> = 
     <a class=production data-link-type=type href=#typedef-cap-linear-color-stop><var>&lt;cap-linear-color-stop&gt;</var></a> , [ <a class=production data-link-type=type href=#typedef-linear-color-stop><var>&lt;linear-color-stop&gt;</var></a># , ]? <a class=production data-link-type=type href=#typedef-cap-linear-color-stop><var>&lt;cap-linear-color-stop&gt;</var></a>
-  <dfn data-dfn-type=type id=typedef-cap-linear-color-stop>&lt;cap-linear-color-stop&gt;</dfn> = <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var>&lt;color&gt;</var></a> &amp;&amp; <a class=production data-link-type=type href=#typedef-color-stop-length><var>&lt;color-stop-length&gt;</var></a>?
-  <dfn data-dfn-type=type id=typedef-linear-color-stop>&lt;linear-color-stop&gt;</dfn> = <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var>&lt;color&gt;</var></a> || <a class=production data-link-type=type href=#typedef-color-stop-length><var>&lt;color-stop-length&gt;</var></a>
-  <dfn data-dfn-type=type id=typedef-color-stop-length>&lt;color-stop-length&gt;</dfn> = [ <var title="">&lt;length&gt;&gt; | <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var>&lt;percentage&gt;</var></a> ]{1,2}
+  <dfn data-dfn-type=type id=typedef-cap-linear-color-stop>&lt;cap-linear-color-stop&gt;</dfn> = <a class=production data-link-type=type href=http://dev.w3.org/fxtf/filters/#ltcolorgt><var>&lt;color&gt;</var></a> &amp;&amp; <a class=production data-link-type=type href=#typedef-color-stop-length><var>&lt;color-stop-length&gt;</var></a>?
+  <dfn data-dfn-type=type id=typedef-linear-color-stop>&lt;linear-color-stop&gt;</dfn> = <a class=production data-link-type=type href=http://dev.w3.org/fxtf/filters/#ltcolorgt><var>&lt;color&gt;</var></a> || <a class=production data-link-type=type href=#typedef-color-stop-length><var>&lt;color-stop-length&gt;</var></a>
+  <dfn data-dfn-type=type id=typedef-color-stop-length>&lt;color-stop-length&gt;</dfn> = [ <var title="">&lt;length&gt;&gt; | <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-fonts-3/#percentage-size-value><var>&lt;percentage&gt;</var></a> ]{1,2}
 
   <dfn data-dfn-type=type id=typedef-angular-color-stop-list>&lt;angular-color-stop-list&gt;</dfn> = 
     <a class=production data-link-type=type href=#typedef-cap-angular-color-stop><var>&lt;cap-angular-color-stop&gt;</var></a> , [ <a class=production data-link-type=type href=#typedef-angular-color-stop><var>&lt;angular-color-stop&gt;</var></a># , ]? <a class=production data-link-type=type href=#typedef-cap-angular-color-stop><var>&lt;cap-angular-color-stop&gt;</var></a>
-  <dfn data-dfn-type=type id=typedef-cap-angular-color-stop>&lt;cap-angular-color-stop&gt;</dfn> = <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var>&lt;color&gt;</var></a> &amp;&amp; <a class=production data-link-type=type href=#typedef-color-stop-angle><var>&lt;color-stop-angle&gt;</var></a>?
-  <dfn data-dfn-type=type id=typedef-angular-color-stop>&lt;angular-color-stop&gt;</dfn> = <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var>&lt;color&gt;</var></a> || <a class=production data-link-type=type href=#typedef-color-stop-angle><var>&lt;color-stop-angle&gt;</var></a>
-  <dfn data-dfn-type=type id=typedef-color-stop-angle>&lt;color-stop-angle&gt;</dfn> = [ <a class=production data-link-type=type href=#typedef-angle><var>&lt;angle&gt;</var></a> | <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var>&lt;percentage&gt;</var></a> ]{1,2}
+  <dfn data-dfn-type=type id=typedef-cap-angular-color-stop>&lt;cap-angular-color-stop&gt;</dfn> = <a class=production data-link-type=type href=http://dev.w3.org/fxtf/filters/#ltcolorgt><var>&lt;color&gt;</var></a> &amp;&amp; <a class=production data-link-type=type href=#typedef-color-stop-angle><var>&lt;color-stop-angle&gt;</var></a>?
+  <dfn data-dfn-type=type id=typedef-angular-color-stop>&lt;angular-color-stop&gt;</dfn> = <a class=production data-link-type=type href=http://dev.w3.org/fxtf/filters/#ltcolorgt><var>&lt;color&gt;</var></a> || <a class=production data-link-type=type href=#typedef-color-stop-angle><var>&lt;color-stop-angle&gt;</var></a>
+  <dfn data-dfn-type=type id=typedef-color-stop-angle>&lt;color-stop-angle&gt;</dfn> = [ <a class=production data-link-type=type href=#typedef-angle><var>&lt;angle&gt;</var></a> | <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-fonts-3/#percentage-size-value><var>&lt;percentage&gt;</var></a> ]{1,2}
 </var></pre>
 	<p class=issue>
 		This is past the complexity point where it can be easily understood with just prose.
@@ -2719,8 +2719,8 @@ <h3 data-level=7.2 id=interpolating-image-combinations><span class=secno>7.2 </s
 Interpolating cross-fade()</span><a class=section-link href=#interpolating-image-combinations>§</a></h3>
 
 <p>	If both the starting and ending images are <a href=#funcdef-cross-fade>cross-fade()</a>s
-	which differ only by by their <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var>&lt;percentage&gt;</var></a>,
-	they must be interpolated by interpolating their <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var>&lt;percentage&gt;</var></a>.
+	which differ only by by their <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-fonts-3/#percentage-size-value><var>&lt;percentage&gt;</var></a>,
+	they must be interpolated by interpolating their <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-fonts-3/#percentage-size-value><var>&lt;percentage&gt;</var></a>.
 	Otherwise, they must be interpolated as generic <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var>&lt;image&gt;</var></a>s.
 
 
@@ -2789,7 +2789,7 @@ <h3 data-level=7.3 id=interpolating-gradients><span class=secno>7.3 </span><span
 				<dd>
 					<ul>
 						<li>
-							If the size is specified as two <a class=production data-link-type=type href=#typedef-length><var>&lt;length&gt;</var></a>s or <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var>&lt;percentage&gt;</var></a>s, 
+							If the size is specified as two <a class=production data-link-type=type href=#typedef-length><var>&lt;length&gt;</var></a>s or <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-fonts-3/#percentage-size-value><var>&lt;percentage&gt;</var></a>s, 
 							it is already in its explicit form.
 
 						<li>
@@ -2861,7 +2861,7 @@ <h2 data-level=8 id=serialization><span class=secno>8 </span><span class=content
 	and following each serialized comma with a single space.
 
 <p>	For <a class=css data-link-type=maybe href=#funcdef-cross-fade>cross-fade()</a>,
-	always serialize the <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var>&lt;percentage&gt;</var></a>.
+	always serialize the <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-fonts-3/#percentage-size-value><var>&lt;percentage&gt;</var></a>.
 
 	<div class=example>