fix markup

tabatkins · svgeesus · commit 6ccea7114a9f · 2022-02-24T13:11:48.000-08:00
diff --git a/css-masking-1/Overview.bs b/css-masking-1/Overview.bs
@@ -91,7 +91,7 @@ A closed vector path, shape or polygon defines a so called <dfn export>clipping
 <div class="example">
   <div class=figure>
     <img src="images/clipping-path.svg" width="655" height="260" alt="Example Mask">
-    <p class=caption>A clipping path (middle) is applied on a polygon shaded with different colors (left). This results in a “clipped out” shape (right).</p>
+    <p class=caption>A clipping path (middle) is applied on a polygon shaded with different colors (left). This results in a “clipped out” shape (right).
   </div>
 </div>
 
@@ -105,7 +105,7 @@ The effect of applying a mask to a graphical object is as if the graphical objec
 <div class="example">
   <div class=figure>
     <img src="images/luminance-mask.svg" width="655" height="260" alt="Example Mask">
-    <p class=caption>A luminance mask (middle) is applied on a shape filled with a gradient (left). This results in a masked shape (right).</p>
+    <p class=caption>A luminance mask (middle) is applied on a shape filled with a gradient (left). This results in a masked shape (right).
   </div>
 </div>
 
@@ -239,7 +239,7 @@ Specifies a basic shape or references a <a element>clipPath</a> element to creat
     ::
         If specified in combination with a <<basic-shape>> it provides the reference box for the <<basic-shape>>.
 
-        If specified by itself, uses the edges of the specified box, including any corner shaping (e.g. defined by 'border-radius' [[!CSS3BG]]), as clipping path. See also <a href="https://www.w3.org/TR/css-shapes/#shapes-from-box-values">“Shapes from box values”</a> [[!CSS-SHAPES]].</p>
+        If specified by itself, uses the edges of the specified box, including any corner shaping (e.g. defined by 'border-radius' [[!CSS3BG]]), as clipping path. See also <a href="https://www.w3.org/TR/css-shapes/#shapes-from-box-values">“Shapes from box values”</a> [[!CSS-SHAPES]].
     : <dfn>fill-box</dfn>
     :: Uses the <a>object bounding box</a> as reference box.
     : <dfn>stroke-box</dfn>
@@ -275,7 +275,7 @@ If the URI reference is not valid (e.g it points to an object that doesn't exist
 </div>
 
 <div class=example>
-    In this example, the 'clip-path' property references an SVG <a element>clipPath</a> element. Each comma separated length pair represents one point of the polygon. As for the previous example, the visualized clipping path can be seen in the <a href="#clipping">introduction</a>.</p>
+    In this example, the 'clip-path' property references an SVG <a element>clipPath</a> element. Each comma separated length pair represents one point of the polygon. As for the previous example, the visualized clipping path can be seen in the <a href="#clipping">introduction</a>.
 
     <pre><code highlight=css>
         clip-path: url("#clip1");
@@ -322,13 +322,14 @@ The 'clip-path' property is a <a href="https://www.w3.org/TR/2011/REC-SVG11-2011
 <dl dfn-type=element-attr dfn-for=clipPath>
     : <dfn element-attr>clipPathUnits</dfn> = "''clipPathUnits/userSpaceOnUse'' | ''clipPathUnits/objectBoundingBox''"
     ::
-        Defines the coordinate system for the contents of the <a element>clipPath</a>.</p>
-        : <dfn dfn-type=value dfn-for=clipPathUnits>userSpaceOnUse</dfn></dt>
-        :: The contents of the <a element>clipPath</a> represent values in the current <a>user coordinate system</a> in place at the time when the <a element>clipPath</a> element is referenced (i.e., the <a>user coordinate system</a> for the element referencing the <a element>clipPath</a> element via the 'clip-path' property).</p>
-        : <dfn dfn-type=value dfn-for=clipPathUnits>objectBoundingBox</dfn></dt>
-        :: The coordinate system has its origin at the top left corner of the <a>bounding box</a> of the element to which the clipping path applies to and the same width and height of this <a>bounding box</a>. <a href="https://www.w3.org/TR/SVG/coords.html#Units">User coordinates</a> are sized equivalently to the CSS ''px'' unit.</p>
+        Defines the coordinate system for the contents of the <a element>clipPath</a>.
 
-        If attribute <a element-attr>clipPathUnits</a> is not specified, then the effect is as if a value of ''clipPathUnits/userSpaceOnUse'' were specified.</p>
+        : <dfn dfn-type=value dfn-for=clipPathUnits>userSpaceOnUse</dfn>
+        :: The contents of the <a element>clipPath</a> represent values in the current <a>user coordinate system</a> in place at the time when the <a element>clipPath</a> element is referenced (i.e., the <a>user coordinate system</a> for the element referencing the <a element>clipPath</a> element via the 'clip-path' property).
+        : <dfn dfn-type=value dfn-for=clipPathUnits>objectBoundingBox</dfn>
+        :: The coordinate system has its origin at the top left corner of the <a>bounding box</a> of the element to which the clipping path applies to and the same width and height of this <a>bounding box</a>. <a href="https://www.w3.org/TR/SVG/coords.html#Units">User coordinates</a> are sized equivalently to the CSS ''px'' unit.
+
+        If attribute <a element-attr>clipPathUnits</a> is not specified, then the effect is as if a value of ''clipPathUnits/userSpaceOnUse'' were specified.
 
         Animatable: yes.
 </dl>
@@ -349,9 +350,9 @@ For a given <a>graphics element</a>, the actual clipping path used will be the i
 
 A couple of additions:
 
-* The <a element>clipPath</a> element itself and its child elements do <em>not</em> inherit clipping paths from the ancestors of the <a element>clipPath</a> element.</li>
-* The <a element>clipPath</a> element or any of its children can specify property 'clip-path'.<br> If a valid 'clip-path' reference is placed on a <a element>clipPath</a> element, the resulting clipping path is the intersection of the contents of the <a element>clipPath</a> element with the referenced clipping path.<br> If a valid 'clip-path' reference is placed on one of the children of a <a element>clipPath</a> element, then the given child element is clipped by the referenced clipping path before OR'ing the silhouette of the child element with the silhouettes of the other child elements.</li>
-* An empty clipping path will completely clip away the element that had the 'clip-path' property applied.</li>
+* The <a element>clipPath</a> element itself and its child elements do <em>not</em> inherit clipping paths from the ancestors of the <a element>clipPath</a> element.
+* The <a element>clipPath</a> element or any of its children can specify property 'clip-path'.<br> If a valid 'clip-path' reference is placed on a <a element>clipPath</a> element, the resulting clipping path is the intersection of the contents of the <a element>clipPath</a> element with the referenced clipping path.<br> If a valid 'clip-path' reference is placed on one of the children of a <a element>clipPath</a> element, then the given child element is clipped by the referenced clipping path before OR'ing the silhouette of the child element with the silhouettes of the other child elements.
+* An empty clipping path will completely clip away the element that had the 'clip-path' property applied.
 
 
 ## Winding Rules: the 'clip-rule' property ## {#the-clip-rule}
@@ -382,17 +383,17 @@ The 'clip-rule' property only applies to <a>graphics elements</a> that are conta
 Note: The 'clip-rule' property does not apply to <<basic-shape>>s.
 
 <div class=example>
-  <p>The following drawing illustrates the <a value>nonzero</a> rule:</p>
+  <p>The following drawing illustrates the <a value>nonzero</a> rule:
   <div class=figure>
     <p><img src="images/cliprule-nonzero.svg" alt="Shape with nonzero rule." width="450" style="border: solid black 1px;">
 
-    <p class=caption>Three shapes from left to right: Star with 5 points drawn in one continuous, overlapping line; 2 clockwise drawn circles, one contains the other and both are subpaths of the same shape; 2 circles, one containing the other with the bigger one drawn in a clockwise direction and the smaller one in a counter-clockwise direction and both belonging to the same shape. Only the last shape has a "hole".</p>
+    <p class=caption>Three shapes from left to right: Star with 5 points drawn in one continuous, overlapping line; 2 clockwise drawn circles, one contains the other and both are subpaths of the same shape; 2 circles, one containing the other with the bigger one drawn in a clockwise direction and the smaller one in a counter-clockwise direction and both belonging to the same shape. Only the last shape has a "hole".
   </div>
-  <p>The following drawing illustrates the <a value>evenodd</a> rule:</p>
+  <p>The following drawing illustrates the <a value>evenodd</a> rule:
   <div class=figure>
     <p><img src="images/cliprule-evenodd.svg" alt="Shape with even-odd rule." width="450" style="border: solid black 1px;">
 
-    <p class=caption>Three shapes from left to right: Star with 5 points drawn in one continuous, overlapping line; 2 clockwise drawn circles, one contains the other and both are subpaths of the same shape; 2 circles, one containing the other with the bigger one drawn in a clockwise direction and the smaller one in a counter-clockwise direction and both belonging to the same shape. All 3 shapes have a "hole".</p>
+    <p class=caption>Three shapes from left to right: Star with 5 points drawn in one continuous, overlapping line; 2 clockwise drawn circles, one contains the other and both are subpaths of the same shape; 2 circles, one containing the other with the bigger one drawn in a clockwise direction and the smaller one in a counter-clockwise direction and both belonging to the same shape. All 3 shapes have a "hole".
 
   </div>
 </div>
@@ -568,7 +569,7 @@ See 'background-repeat' property [[!CSS3BG]] for the definitions of the property
   <div class=figure>
       <p><img src="images/mask-repeat.svg" alt="Image of an element with a dotted mask." width="240" style="border: solid black 1px;">
 
-      <p class=caption>The effect of ''mask-repeat/space'': the <a>mask layer image</a> of a dot is tiled to cover the whole <a>mask painting area</a> and the <a>mask layer image</a>s are equally spaced.</p>
+      <p class=caption>The effect of ''mask-repeat/space'': the <a>mask layer image</a> of a dot is tiled to cover the whole <a>mask painting area</a> and the <a>mask layer image</a>s are equally spaced.
   </div>
 </div>
 
@@ -604,7 +605,7 @@ See the 'background-position' property [[!CSS3BG]] for the definitions of the pr
 </div>
 
 <div class=example>
-    Mask positions can also be relative to other corners than the top left. E.g., the following puts the background image 10px from the bottom and 3em from the right:</p>
+    Mask positions can also be relative to other corners than the top left. E.g., the following puts the background image 10px from the bottom and 3em from the right:
 
     <pre><code highlight=css>mask-position: right 3em bottom 10px</code></pre>
 </div>
@@ -643,7 +644,7 @@ Values have the following meanings:
     :: The painted content is restricted to (clipped to) the <a>object bounding box</a>.
     : <dfn>stroke-box</dfn>
     :: The painted content is restricted to (clipped to) the <a>stroke bounding box</a>.
-    : <dfn>view-box</dfn></dt>
+    : <dfn>view-box</dfn>
     ::
         Uses the nearest <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> as reference box.
 
@@ -782,31 +783,31 @@ All mask layers below the current mask layer must be composited before applying
 
     With the property 'mask-composite' the author may choose different ways to combine multiple mask layers.
 
-    * ''mask-composite/add'' paints the <var>circle.svg</var> on top of <var>rect.svg</var>. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover'>source over</a>.</p>
+    * ''mask-composite/add'' paints the <var>circle.svg</var> on top of <var>rect.svg</var>. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover'>source over</a>.
         <pre><code highlight=css>
             mask-composite: add;
         </code></pre>
 
         <div class=figure>
             <img src="images/mask-composite-add.svg" width="220" height="220" alt="Example of source-over compositing of mask layers">
         </div>
-    * ''mask-composite/subtract'' paints portions of <var>circle.svg</var> that do not overlap <var>rect.svg</var>. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcout'>source out</a>.</p>
+    * ''mask-composite/subtract'' paints portions of <var>circle.svg</var> that do not overlap <var>rect.svg</var>. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcout'>source out</a>.
         <pre><code highlight=css>
             mask-composite: subtract;
         </code></pre>
 
         <div class=figure>
             <img src="images/mask-composite-subtract.svg" width="220" height="220" alt="Example of source-over compositing of mask layers">
         </div>
-    * ''mask-composite/intersect'' paints portions of <var>circle.svg</var> that overlap <var>rect.svg</var>. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcin'>source in</a>.</p>
+    * ''mask-composite/intersect'' paints portions of <var>circle.svg</var> that overlap <var>rect.svg</var>. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcin'>source in</a>.
         <pre><code highlight=css>
             mask-composite: intersect;
         </code></pre>
 
         <div class=figure>
             <img src="images/mask-composite-intersect.svg" width="220" height="220" alt="Example of source-over compositing of mask layers">
         </div>
-    * ''mask-composite/exclude'' paints portions of <var>circle.svg</var> and <var>rect.svg</var> that do not overlap. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_xor'>XOR</a>.</p>
+    * ''mask-composite/exclude'' paints portions of <var>circle.svg</var> and <var>rect.svg</var> that do not overlap. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_xor'>XOR</a>.
         <pre><code highlight=css>
             mask-composite: exclude;
         </code></pre>
@@ -931,7 +932,7 @@ With 'mask-border' an image can be split into nine pieces: four corners, four ed
 
 <div class=figure>
   <img src="images/mask-box-image-mask.svg" alt="pieces of a mask border image" width="240">
-  <p class=caption>Pieces of a <a>mask border image</a>.</p>
+  <p class=caption>Pieces of a <a>mask border image</a>.
 </div>
 
 These pieces may be sliced, scaled and stretched in various ways to fit the size of the <a>mask border image area</a>. This distorted image is then used as a mask. The syntax of 'mask-border' corresponds to the 'border-image' property of CSS Background and Borders [[!CSS3BG]].
@@ -941,7 +942,7 @@ These pieces may be sliced, scaled and stretched in various ways to fit the size
 
     <div class=figure>
         <img src="images/mask-box-image.svg" alt="Example for 'mask-border'" width="720" height="240">
-        <p class=caption>Example for 'mask-border'. The object on the left is the object to mask. The second image is the alpha mask and the last image the masked object.</p>
+        <p class=caption>Example for 'mask-border'. The object on the left is the object to mask. The second image is the alpha mask and the last image the masked object.
     </div>
 
     <pre><code highlight=css>
@@ -1249,7 +1250,7 @@ The 'mask-type' property allows the author of the <a element>mask</a> element to
         &lt;/p>
     </code></pre>
 
-    In the next example the computed value of 'mask-mode' is ''mask-mode/alpha'' and overrides the preference on the <a element>mask</a> element that is computed to ''mask-type/luminance''. The <a>mask layer image</a> is used as an alpha mask.</p>
+    In the next example the computed value of 'mask-mode' is ''mask-mode/alpha'' and overrides the preference on the <a element>mask</a> element that is computed to ''mask-type/luminance''. The <a>mask layer image</a> is used as an alpha mask.
 
     <pre><code highlight=html>
         lt;svg>
@@ -1303,7 +1304,7 @@ The 'clip' property applies only to absolutely positioned elements. In SVG, it a
 
 <dl dfn-type=value dfn-for="clip">
   : auto
-  :: The element does not clip.</dd>
+  :: The element does not clip.
   : <dfn function>rect()</dfn> = rect( <<clip/top>>, <<clip/right>>, <<clip/bottom>>, <<clip/left>> )
   ::
       <<clip/top>> and <<clip/bottom>> specify offsets from the top border edge of the box, and <<clip/right>>, and <<clip/left>> specify offsets from the left border edge of the box. Authors should separate offset values with commas. User agents must support separation with commas, but may also support separation without commas (but not a combination), because a previous revision of this specification was ambiguous in this respect.
@@ -1328,7 +1329,7 @@ The 'clip' property is a <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/
 
     <div class=figure>
         <img src="images/clip.svg" width="580" height="300" alt="Values for rect shape">
-        <p class=caption>This diagram illustrates two block boxes, one next to the other, with rectangular clipping regions of different dimensions. (See <a href="https://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html">long description</a>.)</p>
+        <p class=caption>This diagram illustrates two block boxes, one next to the other, with rectangular clipping regions of different dimensions. (See <a href="https://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html">long description</a>.)
     </div>
 </div>
 
