[css-shapes-1] Targeted fix of shape serialization section, fix examples. w3c#8695

Author: tabatkins

css-shapes-1/Overview.bs

@@ -602,75 +602,47 @@ 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,
-	avoiding calc() expressions where possible,
-	avoiding calc() transformations,
-	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.
+	For serializing [=computed values=],
+	component values are [=computed value|computed=],
+	and omitted when possible without changing the meaning.
 
-<div class="example">
 
-	Since <<position>> keywords stand in for percentages, keywords without an offset turn into percentages.
-
-	<pre><code>
-		circle(at left bottom)
-
-		serializes as "circle(at 0% 100%)"
-	</code></pre>
-
-	Omitting components means that some default values do not show up in the serialization. But since <<position>> always uses the 2- or 4-value form, a default <<position>> is not omitted.
-
-	<pre><code>
-		circle(closest-side at center)
-
-		serializes as "circle(at 50% 50%)"
-	</code></pre>
-
-	Using grammar order means that <<position>> values always give horizontal components first, then vertical.
-
-	<pre><code>
-		circle(at bottom left)
-
-		serializes as "circle(at 0% 100%)"
-	</code></pre>
-
-	Avoiding calc() expressions means that some <<position>> values that could be simplified to the 2-value form must be serialized in 4-value form instead.
-
-	<pre><code>
-		circle(at right 5px bottom 10px)
-
-		serializes as "circle(at right 5px bottom 10px)"
-
-		not as "circle(at calc(100% - 5px) calc(100% - 10px))"
-	</code></pre>
-
-	Avoiding calc() transformations means that if a specified (or computed) calc() must stay in calc() form, it will be used as-is, not reformulated with a different origin or reduced.
-
-	<pre><code>
-		bottom calc(10% + 5px)
-
-		serializes as "bottom calc(10% + 5px)"
+	<div class="example">
 
-		not as "top calc(90% - 5px)" or "calc(90% - 5px)"
-	</code></pre>
+		As [=specified value=] serialization of the shape functions are relatively trivial,
+		here are some examples of [=computed value=] serializations:
 
-	Preferring 0% over a zero length comes up when you must supply an omitted offset.
+		* <<position>> [[css-values-4#position-serialization|serialization rules]] mean that
+			keywords [=computed value|compute to=] percentages,
+			and serialize in horizontal-vertical order.
 
-	<pre><code>
-		circle(at right 5px top)
+			<pre><code>
+			circle(at bottom left)
+			/* serializes to */
+			circle(at 0% 100%)
+			</code></pre>
 
-		serializes as "circle(at right 5px top 0%)"
-	</code></pre>
+		* Omitting optional components means that
+			default values do not show up in the serialization.
 
-	Preferring left and top origins means that some percentage offsets will normalize to those origins (when calc can be avoided).
+			<pre><code>
+			circle(closest-side at center)
+			/* serializes to */
+			circle()
+			</code></pre>
 
-	<pre><code>
-		circle(at right 5% top 0px)
+		* Value [[css-cascade-5#computed|computation]] means that
+			some functions [[#basic-shape-computed-values|canonicalize to a different form]].
 
-		serializes as "circle(at 95% 0%)"
-	</code></pre>
+			<pre><code>
+			rect(10px 20px 30px 40px)
+			/* serializes to */
+			inset(10px calc(100% - 20px) calc(100% - 30px) 40px)
+			</code></pre>
+	</div>
 
-</div>
 
 <h3 id='basic-shape-interpolation'>
 Interpolation of Basic Shapes</h3>