Replace 'source-over' with 'plus' per <http://lists.w3.org/Archives/Public/www-style/2011May/0077.html>, pull out informative text into a note, mark up variables and expressions properly, replace 'syntax error' with 'invalid'

Author: fantasai

css3-images/Overview.html

@@ -15,7 +15,7 @@
 
    <h1>CSS Image Values and Replaced Content Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 May 2011</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 May 2011</h2>
 
    <dl>
     <dt>Latest Version:
@@ -566,12 +566,16 @@ <h3 id=cross-fade-function><span class=secno>4.4. </span> Combining images:
    images. This is accomplished with the &lsquo;<code
    class=css>cross-fade()</code>&rsquo; function, which indicates the two
    images to be combined and how far along in the transition the combination
-   is. Authors may also use the &lsquo;<code
+   is.
+
+  <p class=note>Authors can also use the &lsquo;<code
    class=css>cross-fade()</code>&rsquo; function for many simple image
    manipulations, such as tinting an image with a solid color or highlighting
    a particular area of the page by combining an image with a radial
-   gradient. The syntax for &lsquo;<code class=css>cross-fade()</code>&rsquo;
-   is defined as:
+   gradient.
+
+  <p>The syntax for &lsquo;<code class=css>cross-fade()</code>&rsquo; is
+   defined as:
 
   <pre
    class=prod><dfn id=ltimage-combination>&lt;image-combination></dfn> = cross-fade( &lt;image>, &lt;image>, &lt;percentage> )</pre>
@@ -581,19 +585,20 @@ <h3 id=cross-fade-function><span class=secno>4.4. </span> Combining images:
    respectively). The percentage represents how far along the transformation
    is, with 0% representing the start image, 100% representing the end image,
    and percentages between that representing corresponding combinations of
-   the two images. The &lt;percentage> must be between 0% and 100% inclusive;
-   any other value is a syntax error.
+   the two images. The <code>&lt;percentage></code> must be between 0% and
+   100% inclusive; any other value is invalid.
 
-  <p>Given the &lt;percentage> p, the combined image represented by the
+  <p>Given the percentage <var>p</var>, the combined image represented by the
    &lsquo;<code class=css>cross-fade()</code>&rsquo; function has a width
-   equal to <code>start image width * (1-p) + end image width * p</code> and
-   a height equal to <code>start image height * (1-p) + end image height *
-   p</code>. The image itself is generated by first scaling both the start
-   and end images to the size of the combined image. Then, the start image
-   has a global alpha applied to it equal to (1-p), the end image has a
-   global alpha applied to it equal to p, and the end image is then
-   composited over the start image with the source-over operation.
-   [[PORTERDUFF]]</p>
+   equal to <code><var>start image width</var> &times; (1-<var>p</var>) +
+   <var>end image width</var> &times; <var>p</var></code> and a height equal
+   to <code><var>start image height</var> &times; (1-<var>p</var>) + <var>end
+   image height</var> &times; <var>p</var></code>. The image itself is
+   generated by first scaling both the start and end images to the size of
+   the combined image. Then, the start image has a global alpha applied to it
+   equal to <code>(1-<var>p</var>)</code>, the end image has a global alpha
+   applied to it equal to <var>p</var>, and the end image is then composited
+   over the start image with the plus operation. [[PORTERDUFF]]</p>
   <!-- ====================================================================== -->
 
   <h2 id=gradients><span class=secno>5. </span> Gradients</h2>

css3-images/Overview.src.html

@@ -351,10 +351,14 @@ <h3 id='cross-fade-function'>
 	to the intermediate image that is a combination of the start and end images.  
 	This is accomplished with the ''cross-fade()'' function, which indicates 
 	the two images to be combined and how far along in the transition the 
-	combination is.  Authors may also use the ''cross-fade()'' function for many 
+	combination is.
+
+	<p class="note">Authors can also use the ''cross-fade()'' function for many 
 	simple image manipulations, such as tinting an image with a solid color or 
 	highlighting a particular area of the page by combining an image with a 
-	radial gradient.  The syntax for ''cross-fade()'' is defined as:</p>
+	radial gradient.
+
+	<p>The syntax for ''cross-fade()'' is defined as:</p>
 
 	<pre class=prod><dfn>&lt;image-combination></dfn> = cross-fade( &lt;image>, &lt;image>, &lt;percentage> )</pre>
 
@@ -363,17 +367,21 @@ <h3 id='cross-fade-function'>
 	respectively).  The percentage represents how far along the transformation 
 	is, with 0% representing the start image, 100% representing the end image, 
 	and percentages between that representing corresponding combinations of the 
-	two images.  The &lt;percentage> must be between 0% and 100% inclusive; any 
-	other value is a syntax error.</p>
-
-	<p>Given the &lt;percentage> p, the combined image represented by the 
-	''cross-fade()'' function has a width equal to <code>start image width * 
-	(1-p) + end image width * p</code> and a height equal to <code>start image 
-	height * (1-p) + end image height * p</code>.  The image itself is generated 
-	by first scaling both the start and end images to the size of the combined 
-	image.  Then, the start image has a global alpha applied to it equal to (1-p), 
-	the end image has a global alpha applied to it equal to p, and the end image 
-	is then composited over the start image with the source-over operation. 
+	two images.  The <code>&lt;percentage></code> must be between 0% and 100% inclusive;
+	any other value is invalid.</p>
+
+	<p>Given the percentage <var>p</var>, the combined image represented by
+	the ''cross-fade()'' function has a width equal to
+	<code><var>start image width</var> &times; (1-<var>p</var>) +
+	      <var>end image width</var> &times; <var>p</var></code>
+	and a height equal to
+	<code><var>start image height</var> &times; (1-<var>p</var>) +
+	      <var>end image height</var> &times; <var>p</var></code>.
+	The image itself is generated by first scaling both the start and end images
+	to the size of the combined image.
+	Then, the start image has a global alpha applied to it equal to <code>(1-<var>p</var>)</code>, 
+	the end image has a global alpha applied to it equal to <var>p</var>, and the end image 
+	is then composited over the start image with the plus operation. 
 	[[PORTERDUFF]]</p>
 
 <!-- ====================================================================== -->