[css-shapes] simplify interpolation further

Author: astearns

css-shapes/Overview.html

@@ -63,7 +63,7 @@
 </p>
   <h1 class="p-name no-ref" id=title>CSS Shapes Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
-    <span class=dt-updated><span class=value-title title=20131119>19 November 2013</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20131120>20 November 2013</span></span></span></h2>
   <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-shapes/>http://dev.w3.org/csswg/css-shapes/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-shapes/>http://www.w3.org/TR/css-shapes/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-shapes/>http://dev.w3.org/csswg/css-shapes/</a>
     <dt>Feedback:</dt>
         <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-shapes%5D%20feedback">www-style@w3.org</a>
@@ -407,7 +407,7 @@ <h3 class="heading settled heading" data-level=3.1 id=supported-basic-shapes><sp
 
 	<dl>
 		<dt><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-inset title=inset()>inset()<a class=self-link href=#funcdef-inset></a></dfn> =
-			inset( <a class="production css-code" data-link-type=type href=#typedef-shape-arg title="<shape-arg>">&lt;shape-arg&gt;</a>{1,4} [round &lt;<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#border-radius title=border-radius>border-radius</a>&gt;]? )
+			inset( <a class="production css-code" data-link-type=type href=#typedef-shape-arg title="<shape-arg>">&lt;shape-arg&gt;</a>{1,4} [round &lt;<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#border-radius title=border-radius>border-radius</a>&gt;]? )
 		</dt>
 		<dd>
 			Defines an inset rectangle.
@@ -426,9 +426,9 @@ <h3 class="heading settled heading" data-level=3.1 id=supported-basic-shapes><sp
 					with one, two or four values.
 				</li>
 				<li>
-					The optional <a class=production data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#border-radius title=border-radius>&lt;‘border-radius’&gt;</a> argument(s)
+					The optional <a class=production data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#border-radius title=border-radius>&lt;‘border-radius’&gt;</a> argument(s)
 					define rounded corners for the inset rectangle
-					using the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#border-radius title=border-radius>border-radius</a> shorthand syntax.
+					using the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#border-radius title=border-radius>border-radius</a> shorthand syntax.
 				</li>
 			</ul>
 
@@ -561,17 +561,15 @@ <h3 class="heading settled heading" data-level=3.2 id=basic-shape-interpolation>
 
 <p>	For interpolating between
 	one basic shape and a second,
-	the rules below are applied.
+	the rules below are applied. 
+	The values in the shape functions interpolate  
+	as a <a href=http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list>simple list</a> 
+	of <a href=http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc>length, 
+	percentage, or calc</a> <a data-biblio-type=informative data-link-type=biblio href=#css3-transitions title=css3-transitions>[CSS3-TRANSITIONS]</a>.
 
 <p>	<ul>
 		<li>
-			If the second shape uses 
-			a different <a data-link-type=dfn href=#reference-box title="reference box">reference box</a> 
-			than the first, 
-			replace the second shape 
-			with a temporary equivalent shape 
-			that uses the <a data-link-type=dfn href=#reference-box title="reference box">reference box</a> 
-			of the first shape.
+			Both shapes must use the same <a data-link-type=dfn href=#reference-box title="reference box">reference box</a>.
 		</li> 
 		<li>
 			If both shapes are the same type, 
@@ -587,9 +585,9 @@ <h3 class="heading settled heading" data-level=3.2 id=basic-shape-interpolation>
 			in the shape functions.
 		</li>
 		<li>
-			If both shapes are of type <a class=css data-link-type=maybe href=#funcdef-polygon title=polygon()>polygon()</a>
-			and both polygons 
-			have the same number of vertices, 
+			If both shapes are of type <a class=css data-link-type=maybe href=#funcdef-polygon title=polygon()>polygon()</a>, 
+			both polygons have the same number of vertices, 
+			and use the same <a class="production css-code" data-link-type=type href=#typedef-fill-rule title="<fill-rule>">&lt;fill-rule&gt;</a>, 
 			interpolate between each value 
 			in the shape functions.
 		</li>
@@ -768,7 +766,7 @@ <h3 class="heading settled heading" data-level=6.1 id=shape-outside-property><sp
 			<a class=css data-link-type=maybe href=#content-box title=content-box>content-box</a> 
 			which use their respective boxes 
 			including curvature from border-radius, 
-			similar to <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#background-clip title=background-clip>background-clip</a> <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=css3bg>[CSS3BG]</a>.
+			similar to <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#background-clip title=background-clip>background-clip</a> <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=css3bg>[CSS3BG]</a>.
 		</dd>
 
 		<dt><dfn class=css-code data-dfn-for=shape-outside data-dfn-type=value data-export="" id=valuedef-basic-shape><a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a><a class=self-link href=#valuedef-basic-shape></a></dfn></dt>
@@ -1113,7 +1111,7 @@ <h3 class="no-num no-ref heading settled heading" id=normative><span class=conte
 
 <h3 class="no-num no-ref heading settled heading" id=informative><span class=content>
 Informative References</span><a class=self-link href=#informative></a></h3>
-<div data-fill-with=informative-references><dl><dt id=css-masking title=CSS-MASKING><a class=self-link href=#css-masking></a>[CSS-MASKING]<dd>Dirk Schulze; Brian Birtles; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2013/WD-css-masking-20130620/>CSS Masking Level 1</a>. 20 June 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css-masking-20130620/>http://www.w3.org/TR/2013/WD-css-masking-20130620/</a><dt id=css3-exclusions title=CSS3-EXCLUSIONS><a class=self-link href=#css3-exclusions></a>[CSS3-EXCLUSIONS]<dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a href=http://www.w3.org/TR/2013/WD-css3-exclusions-20130528/>CSS Exclusions Module Level 1</a>. 28 May 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-exclusions-20130528/>http://www.w3.org/TR/2013/WD-css3-exclusions-20130528/</a></dl></div>
+<div data-fill-with=informative-references><dl><dt id=css-masking title=CSS-MASKING><a class=self-link href=#css-masking></a>[CSS-MASKING]<dd>Dirk Schulze; Brian Birtles; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2013/WD-css-masking-20130620/>CSS Masking Level 1</a>. 20 June 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css-masking-20130620/>http://www.w3.org/TR/2013/WD-css-masking-20130620/</a><dt id=css3-exclusions title=CSS3-EXCLUSIONS><a class=self-link href=#css3-exclusions></a>[CSS3-EXCLUSIONS]<dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a href=http://www.w3.org/TR/2013/WD-css3-exclusions-20130528/>CSS Exclusions Module Level 1</a>. 28 May 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-exclusions-20130528/>http://www.w3.org/TR/2013/WD-css3-exclusions-20130528/</a><dt id=css3-transitions title=CSS3-TRANSITIONS><a class=self-link href=#css3-transitions></a>[CSS3-TRANSITIONS]<dd>Dean Jackson; et al. <a href=http://www.w3.org/TR/2013/WD-css3-transitions-20130212/>CSS Transitions</a>. 12 February 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-transitions-20130212/>http://www.w3.org/TR/2013/WD-css3-transitions-20130212/</a></dl></div>
 
 <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 Index</span><a class=self-link href=#index></a></h2>

css-shapes/Overview.src.html

@@ -443,17 +443,15 @@ <h3 id='basic-shape-interpolation'>
 
 	For interpolating between
 	one basic shape and a second,
-	the rules below are applied.
+	the rules below are applied. 
+	The values in the shape functions interpolate  
+	as a <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple list</a> 
+	of <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length, 
+	percentage, or calc</a> [[CSS3-TRANSITIONS]].
 
 	<ul>
 		<li>
-			If the second shape uses 
-			a different <a>reference box</a> 
-			than the first, 
-			replace the second shape 
-			with a temporary equivalent shape 
-			that uses the <a>reference box</a> 
-			of the first shape.
+			Both shapes must use the same <a>reference box</a>.
 		</li> 
 		<li>
 			If both shapes are the same type, 
@@ -469,9 +467,9 @@ <h3 id='basic-shape-interpolation'>
 			in the shape functions.
 		</li>
 		<li>
-			If both shapes are of type ''polygon()''
-			and both polygons 
-			have the same number of vertices, 
+			If both shapes are of type ''polygon()'', 
+			both polygons have the same number of vertices, 
+			and use the same <<fill-rule>>, 
 			interpolate between each value 
 			in the shape functions.
 		</li>