Added experimental mark-up .syntax and .rhs to help with automatic

extraction of type definitions, such as <border-width>.

Author: bert-github

css3-background/Overview.src.html

@@ -386,9 +386,10 @@ <h3>The 'background-repeat' property</h3>
       <td>as specified
 </table>
 
-<p>Specifies how images are tiled. The type
-<dfn><var>&lt;repeat&gt;</var></dfn> stands for: repeat-x | repeat-y |
-[repeat | space | round | no-repeat]{1,2}.
+<p class=syntax>Specifies how images are tiled. The type
+<dfn><var>&lt;repeat&gt;</var></dfn> stands for: <span
+class=rhs>repeat-x | repeat-y | [repeat | space | round |
+no-repeat]{1,2}</span>.
 
 <p>See the section <a href="#layering">“Layering multiple
 background images”</a> for how each comma-separated value is
@@ -638,11 +639,12 @@ <h3>The 'background-position' property</h3>
 'background-image' each of the comma-separated
 values applies.
 
-<p>The <dfn><var>&lt;bg-position&gt;</var></dfn> stands for: [ [
-<var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> | left |
-center | right ] [ <var>&lt;percentage&gt;</var> |
-<var>&lt;length&gt;</var> | top | center | bottom ]? ] | [ [ left |
-center | right ] || [ top | center | bottom ] ]
+<p class=syntax>The <dfn><var>&lt;bg-position&gt;</var></dfn> stands
+for: <span class=rhs>[ [ <var>&lt;percentage&gt;</var> |
+<var>&lt;length&gt;</var> | left | center | right ] [
+<var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> | top |
+center | bottom ]? ] | [ [ left | center | right ] || [ top | center |
+bottom ] ]</span>
 
 <p id=bg-area-edge>Each <var>&lt;bg-position&gt;</var> specifies an
 offset from the top left corner of either the viewport (if
@@ -783,11 +785,11 @@ <h3>The 'background-clip' property</h3>
       <td><dfn>background-clip</dfn>
     <tr>
       <th>Value:
-      <td>[<dfn title="clip-border">border</dfn> | <dfn
-        title="clip-padding">padding</dfn>]  [, [border | padding]]*
+      <td>[border-box | padding-box | content-box | no-clip]
+	[ , [border-box | padding-box | content-box | no-clip] ]*
     <tr>
       <th>Initial:
-      <td>border
+      <td>border-box
     <tr>
       <th>Applies to:
       <td>all elements
@@ -805,12 +807,22 @@ <h3>The 'background-clip' property</h3>
       <td>same as specified value
 </table>
 
-<p>Determines whether the background may extend into the border area or
-not. If the value is '''padding'', the background
-is clipped to the padding edge and the background of the border is
-transparent. If the value is <span class=css
-title="clip-border">'border'</span>, the background extends into the
-border area.
+<p>Determines whether the background may extend into the padding and
+border areas. If the value is <dfn
+title=clip-padding-box>'''padding-box''</dfn>, the background is
+clipped to the <span>padding box.</span> If the value is <dfn
+title="clip-border-box">''border-box''</dfn>, the background is
+clipped to the <span>border box.</span> If the value is <dfn
+title="clip-content-box">''content-box''</dfn>, the background is
+clipped to the <span>content box.</span>
+
+<p>If the value is <dfn>''no-clip''</dfn> and the background image is
+not repeated, then the image is not clipped. If the image is repeated,
+copies that are completely outside the <span>border box</span> are
+clipped, but copies that are partially inside it are not clipped.
+Background images may still be clipped by 'overflow' or by the
+viewport. A value of ''no-clip'' clips the background color to
+the <span>border box.</span>
 
 <p class=note>Note that the background is drawn <em>behind</em> the
 border, if any. See “Elaborate description of Stacking
@@ -831,10 +843,9 @@ <h3>The 'background-origin' property</h3>
       <td><dfn>background-origin</dfn>
     <tr>
       <th>Value:
-      <td>[<dfn title="origin-border">border</dfn> | <dfn
-        title="origin-padding">padding</dfn> | <dfn
-        title="origin-content">content</dfn>]
-        [, [border | padding | content]]*
+      <td>[<dfn>border-box</dfn> | <dfn>padding-box</dfn> |
+	    <dfn>content-box</dfn>]
+        [, [border-box | padding-box | content-box]]*
     <tr>
       <th>Initial:
       <td>padding
@@ -855,29 +866,23 @@ <h3>The 'background-origin' property</h3>
       <td>same as specified value
 </table>
 
-<p>Determines how the
-'background-position' is calculated. With a
-value of <span class=css title="origin-padding">'padding'</span>, the
-position is relative to the padding edge ( ''0 0''
-is the upper left corner of the padding edge,  ''100%
-100%'' is the lower right corner). <span class=css
-title="origin-border">'Border'</span> means the position is relative
-to the border edge, and <span class=css
-title="origin-content">'content'</span> means relative to the content
-edge.
+<p>Determines how the 'background-position' is calculated. With a
+value of ''padding-box'', the position is relative to the
+<span>padding box</span> (''0 0'' is the upper left corner of the
+padding edge, ''100% 100%'' is the lower right corner). ''Border-box'
+means the position is relative to the <span>border box,</span> and
+''content-box'' means relative to the <span>content box.</span>
 
 <p>Each comma-separated value applies to one image of
 'background-image'. See the section <a
 href="#layering">“Layering multiple background images”</a>
 for how origin values and images are paired.
 
-<p class="note">Note that if ''background-clip''
-is <span title="clip-padding" class=css>'padding'</span>,
-''background-origin'' is <span title="origin-border"
-class=css>'border'</span>, and
-''background-position'' is ''top
-left'' (the initial value), then the top left of the background
-image will be clipped.
+<p class="note">Note that if ''background-clip'' is <span
+title="clip-padding-box">''padding-box''</span>, 'background-origin'
+is 'border-box', and 'background-position' is ''top left'' (the
+initial value), then the top left of the background image will be
+clipped.
 
 
 
@@ -1312,26 +1317,26 @@ <h3>The 'background' property</h3>
       <td>see individual properties
 </table>
 
-<p><dfn><var>&lt;bg-layer&gt;</var></dfn> stands for:
-   <var>&lt; 'background-image'&gt;</var>
+<p class=syntax><dfn><var>&lt;bg-layer&gt;</var></dfn> stands for:
+   <span class=rhs><var>&lt; 'background-image'&gt;</var>
 || <var>&lt; 'background-position'&gt;</var>
 || / <var>&lt; 'background-size'&gt;</var>
 || <var>&lt; 'background-repeat'&gt;</var>
 || <var>&lt; 'background-attachment'&gt;</var>
 || <var>&lt; 'background-clip'&gt;</var>
-   <var>&lt; 'background-origin'&gt;</var>?
+   <var>&lt; 'background-origin'&gt;</var>?</span>
 where ''/ <var>&lt; 'background-size'&gt;</var>'' must occur after
 ''<var>&lt;'background-position'&gt;</var>'' if both are present.
 
-<p><dfn><var>&lt;final-bg-layer&gt;</var></dfn> stands for:
-   <var>&lt; 'background-image'&gt;</var>
+<p class=syntax><dfn><var>&lt;final-bg-layer&gt;</var></dfn> stands for:
+   <span class=rhs><var>&lt; 'background-image'&gt;</var>
 || <var>&lt; 'background-position'&gt;</var>
 || / <var>&lt; 'background-size'&gt;</var>
 || <var>&lt; 'background-repeat'&gt;</var>
 || <var>&lt; 'background-attachment'&gt;</var>
 || [ <var>&lt; 'background-clip'&gt;</var>
      <var>&lt; 'background-origin'&gt;</var>? ]
-|| <var>&lt; 'background-color'&gt;</var>
+|| <var>&lt; 'background-color'&gt;</var></span>
 where ''/ <var>&lt; 'background-size'&gt;</var>'' must occur after
 ''<var>&lt;'background-position'&gt;</var>'' if both are present.
 
@@ -1352,11 +1357,10 @@ <h3>The 'background' property</h3>
 initial value, if no explicit value was specified. (It does not set
  'background-break'.)
 
-<p>The ''::first-line'' pseudo-element is like an
-inline-level element for the purposes of the background (see section
-5.12.1 of [[!CSS21]]). That means, e.g., that in a left-justified
-first line, the background does not necessarily extend all the way to
-the right margin.
+<p>The ''::first-line'' pseudo-element is like an inline-level element
+for the purposes of the background (see section 5.12.1 of [[!CSS21]]). 
+That means, e.g., that in a left-justified first line, the background
+does not necessarily extend all the way to the right margin.
 
 <div class="example">
 <p style="display:none">Examples:
@@ -1643,9 +1647,9 @@ <h3 id="the-border-style">The 'border-style' properties</h3>
 respectively. A missing left is the same as right, a missing bottom is
 the same as top, and a missing right is also the same as top.
 
-<p><var><dfn>&lt;border-style&gt;</dfn></var> is: none | hidden |
-dotted | dashed | solid | double |
-groove | ridge | inset | outset. Values have the following meanings:
+<p class=syntax><var><dfn>&lt;border-style&gt;</dfn></var> is: <span
+class=rhs>none | hidden | dotted | dashed | solid | double | groove |
+ridge | inset | outset</span>. Values have the following meanings:
 
 <dl>
   <dt><dfn title="border-style-none">none</dfn>
@@ -1782,15 +1786,16 @@ <h3>The 'border-width' properties</h3>
 
 <p>These properties set the thickness of the border.
 
-<p>The <dfn><var>&lt;border-width&gt;</var></dfn> is
-'<var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | thin |
-medium | thick'. The <var>&lt;length&gt;</var> and
-<var>&lt;percentage&gt;</var> may not be negative. The lengths
-corresponding to 'thin', 'medium' and 'thick' are not specified, but
-the values are constant throughout a <span>document</span> and thin
-&le; medium &le; thick. A UA could, e.g., make the thickness depend on
-the 'medium' font size: one choice might be 1, 3 &amp; 5px when the
-'medium' font size is 17px or less.
+<p class=syntax>The <dfn><var>&lt;border-width&gt;</var></dfn> is
+<span class=rhs><var>&lt;length&gt;</var> |
+<var>&lt;percentage&gt;</var> | thin | medium | thick</span>. The
+<var>&lt;length&gt;</var> and <var>&lt;percentage&gt;</var> may not be
+negative. The lengths corresponding to ''thin'', ''medium'' and
+''thick'' are not specified, but the values are constant throughout a
+<span>document</span> and thin &le; medium &le; thick. A UA could,
+e.g., make the thickness depend on the ''medium'' font size: one
+choice might be 1, 3 &amp; 5px when the 'medium' font size is 17px or
+less.
 
 <p>'Border-width' is a shorthand that sets the
 four 'border-*-width' properties. If it has four values, they set top, right,