[css-shapes] Updated computed value and serialization of basic shapes

Author: astearns

css-shapes/Overview.html

@@ -120,7 +120,9 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
 Terminology</a></ul><li><a href=#relation-to-box-model-and-float-behavior><span class=secno>2</span>
 Relation to the box model and float behavior</a><li><a href=#basic-shape-functions><span class=secno>3</span>
 Basic Shapes</a><ul class=toc><li><a href=#supported-basic-shapes><span class=secno>3.1</span>
-Supported Shapes</a><li><a href=#basic-shape-interpolation><span class=secno>3.2</span>
+Supported Shapes</a><li><a href=#basic-shape-computed-values><span class=secno>3.2</span>
+Computed Values of Basic Shapes</a><li><a href=#basic-shape-serialization><span class=secno>3.3</span>
+Serialization of Basic Shapes</a><li><a href=#basic-shape-interpolation><span class=secno>3.4</span>
 Interpolation of Basic Shapes</a></ul><li><a href=#shapes-from-image><span class=secno>4</span>
 Shapes from Image</a><li><a href=#shapes-from-box-values><span class=secno>5</span>
 Shapes from Box Values</a><li><a href=#declaring-shapes><span class=secno>6</span>
@@ -579,7 +581,29 @@ <h3 class="heading settled heading" data-level=3.1 id=supported-basic-shapes><sp
 		</dd>
 	</dl>
 
-<h3 class="heading settled heading" data-level=3.2 id=basic-shape-interpolation><span class=secno>3.2 </span><span class=content>
+<h3 class="heading settled heading" data-level=3.2 id=basic-shape-computed-values><span class=secno>3.2 </span><span class=content>
+Computed Values of Basic Shapes</span><a class=self-link href=#basic-shape-computed-values></a></h3>
+
+<p>	The values in a <a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a> function are computed as specified, with these exceptions:
+
+<p>	<ul>
+		<li>
+			Omitted values are included and compute to their defaults
+		</li>
+		<li>
+			A <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#position-value title="<position>">&lt;position&gt;</a> value in <a class=css data-link-type=maybe href=#funcdef-circle title=circle()>circle()</a> or <a class=css data-link-type=maybe href=#funcdef-ellipse title=ellipse()>ellipse()</a> is computed as a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage
+		</li>
+		<li>
+			A &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; value in <a class=css data-link-type=maybe href=#funcdef-inset title=inset()>inset()</a> is computed as an expanded list of all eight <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> or percentage values.
+		</li>
+	</ul>
+
+<h3 class="heading settled heading" data-level=3.3 id=basic-shape-serialization><span class=secno>3.3 </span><span class=content>
+Serialization of Basic Shapes</span><a class=self-link href=#basic-shape-serialization></a></h3>
+
+<p>	To serialize the <a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a> functions, serialize as per their individual grammars, in the order the grammars are written in, omitting components when possible without changing the meaning, joining space-separated tokens with a single space, and following each serialized comma with a single space. 
+
+<h3 class="heading settled heading" data-level=3.4 id=basic-shape-interpolation><span class=secno>3.4 </span><span class=content>
 Interpolation of Basic Shapes</span><a class=self-link href=#basic-shape-interpolation></a></h3>
 
 <p>	For interpolating between
@@ -592,7 +616,7 @@ <h3 class="heading settled heading" data-level=3.2 id=basic-shape-interpolation>
 	percentage, or calc</a> where possible. 
 	If list values are not one of those types 
 	but are identical 
-	(such as finding <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#left title=left>left</a> 
+	(such as finding <span class=css data-link-type=maybe title=nonzero>nonzero</span> 
 	in the same list position 
 	in both lists) 
 	those values do interpolate.
@@ -814,7 +838,7 @@ <h2 class="heading settled heading" data-level=6 id=declaring-shapes><span class
 <h3 class="heading settled heading" data-level=6.1 id=shape-outside-property><span class=secno>6.1 </span><span class=content>
 The <a class=property data-link-type=propdesc href=#propdef-shape-outside title=shape-outside>shape-outside</a> Property</span><a class=self-link href=#shape-outside-property></a></h3>
 
-<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-shape-outside>shape-outside<a class=self-link href=#propdef-shape-outside></a></dfn><tr><th>Value:<td>none | [ <a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a> || <a class="production css-code" data-link-type=type href=#typedef-shape-box title="<shape-box>">&lt;shape-box&gt;</a> ] | <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>">&lt;image&gt;</a><tr><th>Initial:<td>none<tr><th>Applies to:<td>floats<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>computed lengths for <a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a>, the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>">&lt;image&gt;</a> with its URI made absolute, otherwise as specified<tr><th>Animatable:<td>as <a href=#basic-shape-interpolation>specified</a> for <a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a>, otherwise no</table>
+<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-shape-outside>shape-outside<a class=self-link href=#propdef-shape-outside></a></dfn><tr><th>Value:<td>none | [ <a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a> || <a class="production css-code" data-link-type=type href=#typedef-shape-box title="<shape-box>">&lt;shape-box&gt;</a> ] | <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>">&lt;image&gt;</a><tr><th>Initial:<td>none<tr><th>Applies to:<td>floats<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>as <a href=#basic-shape-computed-values>defined</a> for <a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a>, the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>">&lt;image&gt;</a> with its URI made absolute, otherwise as specified<tr><th>Animatable:<td>as <a href=#basic-shape-interpolation>specified</a> for <a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a>, otherwise no</table>
 <p>		The values of this property have the following meanings:
 
 	<dl data-dfn-for=shape-outside data-dfn-type=value>
@@ -1006,6 +1030,7 @@ <h2 class="no-num heading settled heading" id=change-log><span class=content>
 <h3 class="no-num heading settled heading" id=20131203><span class=content>
 Since <a href=http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/>December 3rd 2013</a></span><a class=self-link href=#20131203></a></h3>
 	<ul>
+		<li>Updated computed value and serialization of basic shapes</li>
 		<li>Added a margin-box example</li>
 		<li>Change auto to none for shape-outside</li>
 		<li>Defined shape-box instead of redefining box</li>
@@ -1228,7 +1253,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <h2 class="no-num no-ref heading settled heading" id=property-index><span class=content>
 Property index</span><a class=self-link href=#property-index></a></h2>
 <div data-fill-with=property-index><table class="proptable data"><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Animatable<th scope=col>Computed value<tbody>
-<tr><th scope=row><a data-property="">shape-outside</a><td>none | [ &lt;basic-shape&gt; || &lt;shape-box&gt; ] | &lt;image&gt;<td>none<td>floats<td>no<td><td>visual<td>as specified for &lt;basic-shape&gt;, otherwise no<td>computed lengths for &lt;basic-shape&gt;, the &lt;image&gt; with its URI made absolute, otherwise as specified
+<tr><th scope=row><a data-property="">shape-outside</a><td>none | [ &lt;basic-shape&gt; || &lt;shape-box&gt; ] | &lt;image&gt;<td>none<td>floats<td>no<td><td>visual<td>as specified for &lt;basic-shape&gt;, otherwise no<td>as defined for &lt;basic-shape&gt;, the &lt;image&gt; with its URI made absolute, otherwise as specified
 <tr><th scope=row><a data-property="">shape-image-threshold</a><td>&lt;number&gt;<td>0.0<td>floats<td>no<td><td>visual<td>as number<td>The same as the specified value after clipping the &lt;number&gt; to the range [0.0,1.0]
 <tr><th scope=row><a data-property="">shape-margin</a><td>&lt;length&gt; | &lt;percentage&gt;<td>0<td>floats<td>no<td><td>visual<td>as length, percentage, or calc.<td>the absolute length</table></div>
 

css-shapes/Overview.src.html

@@ -460,6 +460,28 @@ <h3 id="supported-basic-shapes">
 		</dd>
 	</dl>
 
+<h3 id='basic-shape-computed-values'>
+Computed Values of Basic Shapes</h3>
+
+	The values in a <<basic-shape>> function are computed as specified, with these exceptions:
+
+	<ul>
+		<li>
+			Omitted values are included and compute to their defaults
+		</li>
+		<li>
+			A <<position>> value in ''circle()'' or ''ellipse()'' is computed as a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage
+		</li>
+		<li>
+			A <'border-radius'> value in ''inset()'' is computed as an expanded list of all eight <<length>> or percentage values.
+		</li>
+	</ul>
+
+<h3 id='basic-shape-serialization'>
+Serialization of Basic Shapes</h3>
+
+	To serialize the <<basic-shape>> functions, serialize as per their individual grammars, in the order the grammars are written in, omitting components when possible without changing the meaning, joining space-separated tokens with a single space, and following each serialized comma with a single space. 
+
 <h3 id='basic-shape-interpolation'>
 Interpolation of Basic Shapes</h3>
 
@@ -473,7 +495,7 @@ <h3 id='basic-shape-interpolation'>
 	percentage, or calc</a> where possible. 
 	If list values are not one of those types 
 	but are identical 
-	(such as finding 'left' 
+	(such as finding ''nonzero'' 
 	in the same list position 
 	in both lists) 
 	those values do interpolate.
@@ -709,7 +731,7 @@ <h3 id="shape-outside-property">
 		Initial: none
 		Applies To: floats
 		Inherited: no
-		Computed Value: computed lengths for <<basic-shape>>, the <<image>> with its URI made absolute, otherwise as specified
+		Computed Value: as <a href="#basic-shape-computed-values">defined</a> for <<basic-shape>>, the <<image>> with its URI made absolute, otherwise as specified
 		Media: visual
 		Animatable: as <a href="#basic-shape-interpolation">specified</a> for <<basic-shape>>, otherwise no
 	</pre>
@@ -930,6 +952,7 @@ <h2 class="no-num" id="change-log">
 <h3 class="no-num" id="20131203">
 Since <a href="http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/">December 3rd 2013</a></h3>
 	<ul>
+		<li>Updated computed value and serialization of basic shapes</li>
 		<li>Added a margin-box example</li>
 		<li>Change auto to none for shape-outside</li>
 		<li>Defined shape-box instead of redefining box</li>