Set an explicit id on every definition for <foo>, to avoid ids like #ltfoo.

Author: tabatkins

css3-images/Overview.html

@@ -16,15 +16,15 @@
 
    <h1>CSS Image Values and Replaced Content Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 February
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 17 February
     2012</h2>
 
    <dl>
     <dt>This Version:
 
     <dd><a
      href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
-     <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-images-20120216/">http://www.w3.org/TR/2012/WD-css3-images-20120216/</a>-->
+     <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-images-20120217/">http://www.w3.org/TR/2012/WD-css3-images-20120217/</a>-->
 
 
     <dt>Latest Version:
@@ -113,7 +113,7 @@ <h2 class="no-num no-toc" id=abstract>Abstract</h2>
    level&nbsp;1 <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>.
    The main extensions compared to level&nbsp;2 are the generalization of the
    &lt;url> type to the &lt;image> type, several additions to the &lsquo;<a
-   href="#ltimage"><code class=css>&lt;image></code></a>&rsquo; type, a
+   href="#image-type"><code class=css>&lt;image></code></a>&rsquo; type, a
    generic sizing algorithm for images and other replaced content in CSS, and
    several properties controlling the interaction of replaced elements and
    CSS's layout models.
@@ -321,20 +321,20 @@ <h2 id=intro><span class=secno>1. </span> Introduction</h2>
 
   <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>
 
-  <p>This module defines and extends the &lsquo;<a href="#ltimage"><code
+  <p>This module defines and extends the &lsquo;<a href="#image-type"><code
    class=css>&lt;image></code></a>&rsquo; value type defined in <a
    href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>.
    Furthermore it replaces the &lsquo;<code class=css>&lt;url></code>&rsquo;
    type in the &lsquo;<code class=property>background-image</code>&rsquo; and
    &lsquo;<code class=property>list-style-image</code>&rsquo; definitions in
-   CSS1 and CSS2 and adds &lsquo;<a href="#ltimage"><code
+   CSS1 and CSS2 and adds &lsquo;<a href="#image-type"><code
    class=css>&lt;image></code></a>&rsquo; as an alternative to &lsquo;<code
    class=css>&lt;url></code>&rsquo; in the &lsquo;<code
    class=property>content</code>&rsquo; property's value. It is presumed that
    CSS specifications beyond CSS2.1 will use the &lsquo;<a
-   href="#ltimage"><code class=css>&lt;image></code></a>&rsquo; notation in
-   place of &lsquo;<code class=css>&lt;url></code>&rsquo; where 2D images are
-   expected. (See e.g. <a href="#CSS3BG"
+   href="#image-type"><code class=css>&lt;image></code></a>&rsquo; notation
+   in place of &lsquo;<code class=css>&lt;url></code>&rsquo; where 2D images
+   are expected. (See e.g. <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>.)
 
   <h3 id=values><span class=secno>1.2. </span> Values</h3>
@@ -360,7 +360,7 @@ <h2 id=resolution-units><span class=secno>2. </span> Resolution Units: the
    &lt;resolution> type</h2>
 
   <p>This specification defines the following units as part of the <dfn
-   id=ltresolution>&lt;resolution></dfn> value type:
+   id=resolution-type>&lt;resolution></dfn> value type:
 
   <dl>
    <dt><dfn id=dpi>&lsquo;<code class=css>dpi</code>&rsquo;</dfn>
@@ -410,10 +410,10 @@ <h2 id=image><span class=secno>3. </span> Image Values: the &lt;image> type</h2>
    notation</a>, <a href="#element-reference">element reference</a>, or <a
    href="#gradients">gradient notation</a>. Syntactically it is defined as
 
-  <pre class=prod><dfn id=ltimage>&lt;image></dfn> = <i>&lt;url></i> | <a
-   href="#ltimage-list"><i>&lt;image-list></i></a> | <a
-   href="#ltelement-reference"><i>&lt;element-reference></i></a>  | <a
-   href="#ltgradient"><i>&lt;gradient></i></a></pre>
+  <pre class=prod><dfn id=image-type>&lt;image></dfn> = <i>&lt;url></i> | <a
+   href="#image-list-type"><i>&lt;image-list></i></a> | <a
+   href="#element-reference-type"><i>&lt;element-reference></i></a>  | <a
+   href="#gradient-type"><i>&lt;gradient></i></a></pre>
 
   <p>Image values can be used in many CSS properties, including the
    &lsquo;<code class=property>background-image</code>&rsquo;, &lsquo;<code
@@ -500,14 +500,15 @@ <h3 id=image-notation><span class=secno>3.2. </span> Image Fallbacks and
 
 
   <pre class=prod><dfn
-   id=ltimage-list>&lt;image-list></dfn> = image( [ &lt;image-decl> , ]* [ &lt;image-decl> | &lt;color> ] )
+   id=image-list-type>&lt;image-list></dfn> = image( [ &lt;image-decl> , ]* [ &lt;image-decl> | &lt;color> ] )
 <dfn
-   id=ltimage-decl>&lt;image-decl></dfn> = &lt;string> [ ltr | rtl ]?</pre>
+   id=image-decl-type>&lt;image-decl></dfn> = &lt;string> [ ltr | rtl ]?</pre>
 
   <p>Each <code>&lt;string></code> represents a <a
    href="http://dev.w3.org/csswg/css3-values/#urls">URL</a>. The computed
-   value of an <a href="#ltimage-list"><i>&lt;image-list></i></a> is the same
-   as specified, except with all relative URLs converted into absolute URLs.
+   value of an <a href="#image-list-type"><i>&lt;image-list></i></a> is the
+   same as specified, except with all relative URLs converted into absolute
+   URLs.
 
   <p>Multiple arguments can be given separated by commas, in which case the
    function represents the first &lt;string> representing an image that the
@@ -616,7 +617,7 @@ <h3 id=element-reference><span class=secno>3.3. </span> Using Elements as
    class=css>element()</code>&rsquo; is:
 
   <pre class=prod><dfn
-   id=ltelement-reference>&lt;element-reference></dfn> = element( &lt;id-selector> )</pre>
+   id=element-reference-type>&lt;element-reference></dfn> = element( &lt;id-selector> )</pre>
 
   <p>where &lt;id-selector> is an ID selector <a href="#SELECT"
    rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>.
@@ -894,18 +895,18 @@ <h2 id=gradients><span class=secno>4. </span> Gradients</h2>
    and many other things. The gradient notations described in this section
    allow an author to specify such an image in a terse syntax, so that the UA
    can generate the image automatically when rendering the page. The syntax
-   of a <a href="#ltgradient"><i>&lt;gradient></i></a> is:
+   of a <a href="#gradient-type"><i>&lt;gradient></i></a> is:
 
-  <pre class=prod><dfn id=ltgradient>&lt;gradient></dfn> = [ 
+  <pre class=prod><dfn id=gradient-type>&lt;gradient></dfn> = [ 
 	<a
-   href="#ltlinear-gradient"><i>&lt;linear-gradient></i></a> | <a
-   href="#ltradial-gradient"><i>&lt;radial-gradient></i></a> | 
+   href="#linear-gradient-type"><i>&lt;linear-gradient></i></a> | <a
+   href="#radial-gradient-type"><i>&lt;radial-gradient></i></a> | 
 	<a
-   href="#ltrepeating-linear-gradient"><i>&lt;repeating-linear-gradient></i></a> | <a
-   href="#ltrepeating-radial-gradient"><i>&lt;repeating-radial-gradient></i></a> ]</pre>
+   href="#repeating-linear-gradient-type"><i>&lt;repeating-linear-gradient></i></a> | <a
+   href="#repeating-radial-gradient-type"><i>&lt;repeating-radial-gradient></i></a> ]</pre>
 
   <div class=example>
-   <p>As with the other <a href="#ltimage"><i>&lt;image></i></a> types
+   <p>As with the other <a href="#image-type"><i>&lt;image></i></a> types
     defined in this specification, gradients can be used in any property that
     accepts images. For example:</p>
 
@@ -953,7 +954,7 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>4.1.1. </span>
 
   <pre class=prod><code>
 <dfn
-   id=ltlinear-gradient>&lt;linear-gradient></dfn> = linear-gradient(
+   id=linear-gradient-type>&lt;linear-gradient></dfn> = linear-gradient(
 	[ [ &lt;angle> | to &lt;side-or-corner> ] ,]? 
 	&lt;color-stop>[, &lt;color-stop>]+
 )
@@ -1116,7 +1117,7 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>4.2.1. </span>
 
   <pre>
 <dfn
-   id=ltradial-gradient>&lt;radial-gradient></dfn> = radial-gradient(
+   id=radial-gradient-type>&lt;radial-gradient></dfn> = radial-gradient(
   [ [ &lt;shape> || &lt;size> ] [ at &lt;position> ]? , |
     at &lt;position>, 
   ]?
@@ -1133,11 +1134,11 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>4.2.1. </span>
   <p>The arguments are defined as follows:
 
   <dl>
-   <dt id=radial-position><dfn id=ltposition>&lt;position></dfn>
+   <dt id=radial-position><dfn id=position>&lt;position></dfn>
 
    <dd>Determines the center of the gradient. The
     <!-- FIXME a href="//www.w3.org/TR/css3-values/#position"--><a
-    href="#ltposition"><i>&lt;position></i></a><!--/a--> value type (which is
+    href="#position"><i>&lt;position></i></a><!--/a--> value type (which is
     also used for &lsquo;<code
     class=property>background-position</code>&rsquo;) is defined in <a
     href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>, and is
@@ -1146,17 +1147,17 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>4.2.1. </span>
     this argument is omitted, it defaults to &lsquo;<code
     class=css>center</code>&rsquo;.
 
-   <dt id=radial-shape><dfn id=ltshape>&lt;shape></dfn>
+   <dt id=radial-shape><dfn id=shape>&lt;shape></dfn>
 
    <dd>Can be either &lsquo;<code class=css>circle</code>&rsquo; or
     &lsquo;<code class=css>ellipse</code>&rsquo;; determines whether the
     gradient's <a href="#ending-shape"><i>ending shape</i></a> is a circle or
-    an ellipse, respectively. If <a href="#ltshape"><i>&lt;shape></i></a> is
+    an ellipse, respectively. If <a href="#shape"><i>&lt;shape></i></a> is
     omitted, the <a href="#ending-shape"><i>ending shape</i></a> defaults to
-    a circle if the <a href="#ltsize"><i>&lt;size></i></a> is a single
+    a circle if the <a href="#size"><i>&lt;size></i></a> is a single
     &lt;length>, and to an ellipse otherwise.
 
-   <dt id=radial-size><dfn id=ltsize>&lt;size></dfn>
+   <dt id=radial-size><dfn id=size>&lt;size></dfn>
 
    <dd>
     <p>Determines the size of the gradient's <a
@@ -1169,7 +1170,7 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>4.2.1. </span>
 
     <p>Both &lsquo;<code class=css>circle</code>&rsquo; and &lsquo;<code
      class=css>ellipse</code>&rsquo; gradients accept the following keywords
-     as their <a href="#ltsize"><i>&lt;size></i></a>:
+     as their <a href="#size"><i>&lt;size></i></a>:
 
     <dl>
      <dt><dfn id=radial-closest-side>&lsquo;<code
@@ -1210,9 +1211,9 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>4.2.1. </span>
       class=css>farthest-side</code>&rsquo; were specified.
     </dl>
 
-    <p>If <a href="#ltshape"><i>&lt;shape></i></a> is specified as
-     &lsquo;<code class=css>circle</code>&rsquo; or is omitted, the <a
-     href="#ltsize"><i>&lt;size></i></a> may be given explicitly as:
+    <p>If <a href="#shape"><i>&lt;shape></i></a> is specified as &lsquo;<code
+     class=css>circle</code>&rsquo; or is omitted, the <a
+     href="#size"><i>&lt;size></i></a> may be given explicitly as:
 
     <dl>
      <dt><dfn id=radial-size-circle>&lt;length></dfn>
@@ -1230,9 +1231,9 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>4.2.1. </span>
        over which dimension is used.</p>
     </dl>
 
-    <p>If <a href="#ltshape"><i>&lt;shape></i></a> is specified as
-     &lsquo;<code class=css>ellipse</code>&rsquo; or is omitted,
-     <i>&lt;extent></i> may instead be given explicitly as:
+    <p>If <a href="#shape"><i>&lt;shape></i></a> is specified as &lsquo;<code
+     class=css>ellipse</code>&rsquo; or is omitted, <i>&lt;extent></i> may
+     instead be given explicitly as:
 
     <dl>
      <dt><dfn id=radial-size-ellipse>[&lt;length> | &lt;percentage>]{2}</dfn>
@@ -1383,11 +1384,12 @@ <h3 id=repeating-gradients><span class=secno>4.3. </span> Repeating
    class=css>repeating-radial-gradient()</code>&rsquo; notations</h3>
 
   <p>In addition to <a
-   href="#ltlinear-gradient"><i>&lt;linear-gradient></i></a> and <a
-   href="#ltradial-gradient"><i>&lt;radial-gradient></i></a>, this
+   href="#linear-gradient-type"><i>&lt;linear-gradient></i></a> and <a
+   href="#radial-gradient-type"><i>&lt;radial-gradient></i></a>, this
    specification defines <dfn
-   id=ltrepeating-linear-gradient>&lt;repeating-linear-gradient></dfn> and
-   <dfn id=ltrepeating-radial-gradient>&lt;repeating-radial-gradient></dfn>
+   id=repeating-linear-gradient-type>&lt;repeating-linear-gradient></dfn> and
+   <dfn
+   id=repeating-radial-gradient-type>&lt;repeating-radial-gradient></dfn>
    values. These two notations take the same values and are interpreted the
    same as their respective non-repeating siblings defined previously.
 
@@ -1488,7 +1490,7 @@ <h3 id=color-stop-syntax><span class=secno>4.4. </span> Gradient
    Color-Stops</h3>
 
   <pre class=prod><code><dfn
-   id=ltcolor-stop>&lt;color-stop></dfn> = &lt;color> [ &lt;percentage> | &lt;length> ]?</code></pre>
+   id=color-stop-type>&lt;color-stop></dfn> = &lt;color> [ &lt;percentage> | &lt;length> ]?</code></pre>
 
   <p>Color-stops are points placed along the line defined by the <a
    href="#gradient-line"><i>gradient line</i></a> at the beginning of the
@@ -1701,7 +1703,7 @@ <h3 id=sizing-terms><span class=secno>5.1. </span> Object-Sizing
      href="#default-object-size"><i>default object size</i></a> of properties
      and contexts that appear in CSS 2.1, plus &lsquo;<code
      class=property>border-image</code>&rsquo; from CSS 3 Backgrounds &amp;
-     Borders. Newer modules that accept an &lsquo;<a href="#ltimage"><code
+     Borders. Newer modules that accept an &lsquo;<a href="#image-type"><code
      class=css>&lt;image></code></a>&rsquo; component value in a new context
      must define the <a href="#default-object-size"><i>default object
      size</i></a> in that context.</p>
@@ -2100,7 +2102,7 @@ <h3 id=object-position><span class=secno>5.5. </span> Positioning Objects:
    class=property>object-position</code></a>&rsquo; property determines the
    alignment of the replaced element inside its box. The
    <!-- FIXME a href="//www.w3.org/TR/css3-values/#position"--><a
-   href="#ltposition"><i>&lt;position></i></a><!--/a--> value type (which is
+   href="#position"><i>&lt;position></i></a><!--/a--> value type (which is
    also used for &lsquo;<code
    class=property>background-position</code>&rsquo;) is defined in <a
    href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>, and is
@@ -2192,7 +2194,7 @@ <h3 id=image-resolution><span class=secno>6.1. </span> Overriding Image
    meanings:
 
   <dl>
-   <dt>&lsquo;<a href="#ltresolution"><code
+   <dt>&lsquo;<a href="#resolution-type"><code
     class=css>&lt;resolution></code></a>&rsquo;
 
    <dd>Specifies the intrinsic resolution explicitly.
@@ -2207,7 +2209,7 @@ <h3 id=image-resolution><span class=secno>6.1. </span> Overriding Image
    <dt>&lsquo;<code class=css>snap</code>&rsquo;
 
    <dd>If the "snap" keyword is provided, the computed &lsquo;<a
-    href="#ltresolution"><code class=css>&lt;resolution></code></a>&rsquo;
+    href="#resolution-type"><code class=css>&lt;resolution></code></a>&rsquo;
     (if any) is the specified resolution rounded to the nearest value that
     would map one image pixel to an integer number of device pixels. If the
     resolution is taken from the image, then the used intrinsic resolution is
@@ -2726,7 +2728,7 @@ <h2 class=no-num id=index>Index</h2>
     href="#radial-closest-side"
     title="''closest-side''"><strong>4.2.1.</strong></a>
 
-   <li>&lt;color-stop>, <a href="#ltcolor-stop"
+   <li>&lt;color-stop>, <a href="#color-stop-type"
     title="&lt;color-stop>"><strong>4.4.</strong></a>
 
    <li>concrete object size, <a href="#concrete-object-size"
@@ -2744,7 +2746,7 @@ <h2 class=no-num id=index>Index</h2>
    <li>&lsquo;<code class=css>dppx</code>&rsquo;, <a href="#dppx"
     title="''dppx''"><strong>2.</strong></a>
 
-   <li>&lt;element-reference>, <a href="#ltelement-reference"
+   <li>&lt;element-reference>, <a href="#element-reference-type"
     title="&lt;element-reference>"><strong>3.3.</strong></a>
 
    <li>ending shape, <a href="#ending-shape"
@@ -2758,7 +2760,7 @@ <h2 class=no-num id=index>Index</h2>
     href="#radial-farthest-side"
     title="''farthest-side''"><strong>4.2.1.</strong></a>
 
-   <li>&lt;gradient>, <a href="#ltgradient"
+   <li>&lt;gradient>, <a href="#gradient-type"
     title="&lt;gradient>"><strong>4.</strong></a>
 
    <li>gradient-average-color, <a
@@ -2774,13 +2776,13 @@ <h2 class=no-num id=index>Index</h2>
    <li>gradient ray, <a href="#gradient-ray"
     title="gradient ray"><strong>4.2.2.</strong></a>
 
-   <li>&lt;image>, <a href="#ltimage"
+   <li>&lt;image>, <a href="#image-type"
     title="&lt;image>"><strong>3.</strong></a>
 
-   <li>&lt;image-decl>, <a href="#ltimage-decl"
+   <li>&lt;image-decl>, <a href="#image-decl-type"
     title="&lt;image-decl>"><strong>3.2.</strong></a>
 
-   <li>&lt;image-list>, <a href="#ltimage-list"
+   <li>&lt;image-list>, <a href="#image-list-type"
     title="&lt;image-list>"><strong>3.2.</strong></a>
 
    <li>image-orientation, <a href="#image-orientation0"
@@ -2810,7 +2812,7 @@ <h2 class=no-num id=index>Index</h2>
    <li>[&lt;length> | &lt;percentage>]{2}, <a href="#radial-size-ellipse"
     title="[&lt;length> | &lt;percentage>]{2}"><strong>4.2.1.</strong></a>
 
-   <li>&lt;linear-gradient>, <a href="#ltlinear-gradient"
+   <li>&lt;linear-gradient>, <a href="#linear-gradient-type"
     title="&lt;linear-gradient>"><strong>4.1.1.</strong></a>
 
    <li>object-fit, <a href="#object-fit0"
@@ -2824,31 +2826,33 @@ <h2 class=no-num id=index>Index</h2>
    <li>paint-source, <a href="#paint-source"
     title=paint-source><strong>#</strong></a>
 
-   <li>&lt;position>, <a href="#ltposition"
+   <li>&lt;position>, <a href="#position"
     title="&lt;position>"><strong>4.2.1.</strong></a>
 
-   <li>&lt;radial-gradient>, <a href="#ltradial-gradient"
+   <li>&lt;radial-gradient>, <a href="#radial-gradient-type"
     title="&lt;radial-gradient>"><strong>4.2.1.</strong></a>
 
    <li>renderer, <a href="#renderer" title=renderer><strong>7.2.</strong></a>
 
 
-   <li>&lt;repeating-linear-gradient>, <a href="#ltrepeating-linear-gradient"
+   <li>&lt;repeating-linear-gradient>, <a
+    href="#repeating-linear-gradient-type"
     title="&lt;repeating-linear-gradient>"><strong>4.3.</strong></a>
 
-   <li>&lt;repeating-radial-gradient>, <a href="#ltrepeating-radial-gradient"
+   <li>&lt;repeating-radial-gradient>, <a
+    href="#repeating-radial-gradient-type"
     title="&lt;repeating-radial-gradient>"><strong>4.3.</strong></a>
 
-   <li>&lt;resolution>, <a href="#ltresolution"
+   <li>&lt;resolution>, <a href="#resolution-type"
     title="&lt;resolution>"><strong>2.</strong></a>
 
-   <li>&lt;shape>, <a href="#ltshape"
+   <li>&lt;shape>, <a href="#shape"
     title="&lt;shape>"><strong>4.2.1.</strong></a>
 
    <li>&lt;side-or-corner>, <a href="#side-or-corner"
     title="&lt;side-or-corner>"><strong>4.1.1.</strong></a>
 
-   <li>&lt;size>, <a href="#ltsize"
+   <li>&lt;size>, <a href="#size"
     title="&lt;size>"><strong>4.2.1.</strong></a>
 
    <li>specified size, <a href="#specified-size"