--- a/master/painting.html Fri May 18 13:44:13 2012 +1000
+++ b/master/painting.html Fri May 18 15:32:09 2012 +1000
@@ -141,49 +141,51 @@
processing</a>).</dd>
</dl>
+<div class="ready-for-wg-review">
<h2 id="FillProperties">Fill properties</h2>
- <div class="propdef">
- <dl>
- <dt id="FillProperty"><span class="propdef-title property">'fill'</span></dt>
- <dd>
- <table summary="fill property" class="propinfo"
- cellspacing="0" cellpadding="0">
- <tr valign="baseline">
- <td><em>Value:</em> </td>
- <td><paint> (See <a
- href="painting.html#SpecifyingPaint">Specifying
- paint</a>)</td>
- </tr>
- <tr valign="baseline">
- <td><em>Initial:</em> </td>
- <td>black</td>
- </tr>
- <tr valign="baseline">
- <td><em>Applies to:</em> </td>
- <td><a>shapes</a> and <a>text content elements</a></td>
- </tr>
- <tr valign="baseline">
- <td><em>Inherited:</em> </td>
- <td>yes</td>
- </tr>
- <tr valign="baseline">
- <td><em>Percentages:</em> </td>
- <td>N/A</td>
- </tr>
- <tr valign="baseline">
- <td><em>Media:</em> </td>
- <td>visual</td>
- </tr>
- <tr valign="baseline">
- <td><em><a
- href="animate.html#Animatable">Animatable</a>:</em> </td>
- <td>yes</td>
- </tr>
- </table>
- </dd>
- </dl>
- </div>
+<h3 id="SpecifyingFillPaint">Specifying fill paint: the <span class="property">'fill'</span> property</h3>
+
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="FillProperty">fill</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><a><paint></a></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>black</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>shapes</a> and <a>text content elements</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>If a <a><color></a> value is part of the specified value, then
+ it is computed as per the <a>'color'</a> property. For anything else the
+ computed value is as specified.</td>
+ </tr>
+ <tr>
+ <th><a href="animate.html#Animatable">Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
<p>The <a>'fill'</a> property paints the interior of the given graphical
element. The area to be painted consists of any areas inside the outline
@@ -200,50 +202,49 @@
<a>'path'</a> elements (i.e., subpaths without a closepath command) and
<a>'polyline'</a> elements.</p>
- <div class="propdef">
- <dl>
- <dt id="FillRuleProperty"><span class="propdef-title property">'fill-rule'</span></dt>
- <dd>
- <table summary="fill-rule property" class="propinfo"
- cellspacing="0" cellpadding="0">
- <tr valign="baseline">
- <td><em>Value:</em> </td>
- <td>nonzero | evenodd | <a class="noxref"
- href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
- <span
- class="value-inst-inherit noxref">inherit</span></a></td>
- </tr>
- <tr valign="baseline">
- <td><em>Initial:</em> </td>
- <td>nonzero</td>
- </tr>
- <tr valign="baseline">
- <td><em>Applies to:</em> </td>
- <td><a>shapes</a> and <a>text content elements</a></td>
- </tr>
- <tr valign="baseline">
- <td><em>Inherited:</em> </td>
- <td>yes</td>
- </tr>
- <tr valign="baseline">
- <td><em>Percentages:</em> </td>
- <td>N/A</td>
- </tr>
- <tr valign="baseline">
- <td><em>Media:</em> </td>
- <td>visual</td>
- </tr>
- <tr valign="baseline">
- <td><em><a
- href="animate.html#Animatable">Animatable</a>:</em> </td>
- <td>yes</td>
- </tr>
- </table>
- </dd>
- </dl>
- </div>
+<h3 id="WindingRule">Winding rule: the <span class="property">'fill-rule'</span> property</h3>
-<p>The <a>'fill-rule'</a> property indicates the algorithm which is to
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="FillRuleProperty">fill-rule</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>nonzero | evenodd</td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>nonzero</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>shapes</a> and <a>text content elements</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>As specified.</td>
+ </tr>
+ <tr>
+ <th><a href="animate.html#Animatable">Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
+
+<p>The <a>'fill-rule'</a> property indicates the algorithm (or
+<em>winding rule</em>) which is to
be used to determine what parts of the canvas are included inside the
shape. For a simple, non-intersecting path, it is intuitively clear
what region lies "inside"; however, for a more complex path, such as a
@@ -256,7 +257,7 @@
<dl>
<dt><span class='prop-value'>nonzero</span></dt>
<dd>
- This rule determines the "insideness" of a point on the
+ <p>This rule determines the "insideness" of a point on the
canvas by drawing a ray from that point to infinity in any
direction and then examining the places where a segment of
the shape crosses the ray. Starting with a count of zero,
@@ -265,97 +266,88 @@
the ray from right to left. After counting the crossings,
if the result is zero then the point is <em>outside</em>
the path. Otherwise, it is <em>inside</em>. The following
- drawing illustrates the <span class='prop-value'>nonzero</span> rule:
- <p><img alt="Image showing nonzero fill rule"
- src="images/painting/fillrule-nonzero.png" width="426"
- height="142" /></p>
- <p class="view-as-svg"><a
- href="images/painting/fillrule-nonzero.svg">View this
- example as SVG (SVG-enabled browsers only)</a></p>
+ drawing illustrates the <span class='prop-value'>nonzero</span>
+ rule:</p>
+
+ <div class="figure">
+ <img src="images/painting/fillrule-nonzero.svg" alt="Image showing nonzero fill rule"/>
+ <p class="caption">The effect of a nonzero fill rule on paths with self-intersections and enclosed subpaths.</p>
+ </div>
</dd>
<dt><span class='prop-value'>evenodd</span></dt>
<dd>
- This rule determines the "insideness" of a point on the
+ <p>This rule determines the "insideness" of a point on the
canvas by drawing a ray from that point to infinity in any
direction and counting the number of path segments from the
given shape that the ray crosses. If this number is odd,
the point is inside; if even, the point is outside. The
following drawing illustrates the <span class='prop-value'>evenodd</span>
- rule:
- <p><img alt="Image showing evenodd fill rule"
- src="images/painting/fillrule-evenodd.png" width="426"
- height="142" /></p>
- <p class="view-as-svg"><a
- href="images/painting/fillrule-evenodd.svg">View this
- example as SVG (SVG-enabled browsers only)</a></p>
+ rule:</p>
+
+ <div class="figure">
+ <img src="images/painting/fillrule-evenodd.svg" alt="Image showing evenodd fill rule"/>
+ <p class="caption">The effect of an evenodd fill rule on paths with self-intersections and enclosed subpaths.</p>
+ </div>
</dd>
</dl>
-<p>(Note: the above explanations do not specify what to do if a path
+<p class="note">The above descriptions do not specify what to do if a path
segment coincides with or is tangent to the ray. Since any ray will do,
one may simply choose a different ray that does not have such problem
-intersections.)</p>
+intersections.</p>
- <div class="propdef">
- <dl>
- <dt id="FillOpacityProperty"><span class="propdef-title property">'fill-opacity'</span></dt>
- <dd>
- <table summary="fill-opacity property" class="propinfo"
- cellspacing="0" cellpadding="0">
- <tr valign="baseline">
- <td><em>Value:</em> </td>
- <td><opacity-value> | <a class="noxref"
- href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
- <span
- class="value-inst-inherit noxref">inherit</span></a></td>
- </tr>
- <tr valign="baseline">
- <td><em>Initial:</em> </td>
- <td>1</td>
- </tr>
- <tr valign="baseline">
- <td><em>Applies to:</em> </td>
- <td><a>shapes</a> and <a>text content elements</a></td>
- </tr>
- <tr valign="baseline">
- <td><em>Inherited:</em> </td>
- <td>yes</td>
- </tr>
- <tr valign="baseline">
- <td><em>Percentages:</em> </td>
- <td>N/A</td>
- </tr>
- <tr valign="baseline">
- <td><em>Media:</em> </td>
- <td>visual</td>
- </tr>
- <tr valign="baseline">
- <td><em><a
- href="animate.html#Animatable">Animatable</a>:</em> </td>
- <td>yes</td>
- </tr>
- </table>
- </dd>
- </dl>
- </div>
+<h3 id="FillOpacity">Fill paint opacity: the <span class="property">'fill-opacity'</span> property</h3>
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="FillOpacityProperty">fill-opacity</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><a><number></a></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>1</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>shapes</a> and <a>text content elements</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>As specified, but clamped to the range [0, 1].</td>
+ </tr>
+ <tr>
+ <th><a href="animate.html#Animatable">Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
+
<p><a>'fill-opacity'</a> specifies the
opacity of the painting operation used to paint the interior
the current object. (See <a
href="render.html#PaintingShapesAndText">Painting shapes and
-text</a>.)</p>
+text</a>.) A value of 0 means full transparent, and a
+value of 1 means fully opaque.</p>
-<dl>
- <dt><span class='prop-value'><opacity-value></span></dt>
- <dd>The opacity of the painting operation used to fill the current
- object, as a <a><number></a>. Any values outside the range 0.0 (fully transparent)
- to 1.0 (fully opaque) will be clamped to this range. (See
- <a href="implnote.html#RangeClamping">Clamping values which are
- restricted to a particular range</a>.)</dd>
-</dl>
-
-<p>Related properties: <a>'stroke-opacity'</a> and <a>'opacity'</a>.</p>
+<p class="note">See also the <a>'opacity'</a> property, which
+specifies group opacity.</p>
+</div>
<h2 id="StrokeProperties">Stroke properties</h2>