[cssom] Properly define serialization of a declaration value, restoring Anne's older canonical-order/shortest-form principles, while removing all the incorrect overly-specific detail. Explicitly note that there are many exceptions to this algorithm that we're intentionally not covering. Fixes #1564.

Author: tabatkins

cssom-1/Overview.bs

@@ -112,6 +112,7 @@ spec:css-namespaces-3; type:dfn; text:namespace prefix
 spec:dom; type:interface; text:Document
 spec:html; type:dfn; text:ascii case-insensitive
 spec:html; type:dfn; text:case-sensitive
+spec:infra; type:dfn; text:list
 spec:css-logical; type:property; text:inline-size
 spec:css-variables-1; type:dfn; text:custom property
 spec:selectors-3; type:selector; text:::before
@@ -2464,33 +2465,49 @@ part of the property value space and will therefore cause
 
 <!-- based on http://damowmow.com/playground/canon.txt -->
 
-To <dfn>serialize a CSS value</dfn> of a <a>CSS declaration</a> <var>declaration</var> or a list of longhand <a lt="CSS declaration">CSS
-declarations</a> <var>list</var>, follow these rules:
+To <dfn>serialize a CSS value</dfn> of a <a>CSS declaration</a> |declaration|
+or a list of longhand <a lt="CSS declaration">CSS declarations</a> |list|,
+follow these rules:
+
+1. If this algorithm is invoked with a [=list=] |list|:
+    1. Let |shorthand| be the first shorthand property,
+        in [=preferred order=],
+        that exactly maps to all of the longhand properties in |list|.
+    2. If there is no such shorthand or
+         |shorthand| cannot exactly represent the values of all the properties in |list|,
+        return the empty string.
+    3. Otherwise, [=serialize a CSS value=]
+        from a hypothetical declaration of the property |shorthand|
+        with its value representing the combined values of the declarations in |list|.
+2. Represent the value of the |declaration|
+    as a [=list=] of CSS component values |components|
+    that, when [=CSS/parsed=] according to the property's grammar,
+    would represent that value.
+    Additionally:
+
+    * If certain component values can appear in any order
+        without changing the meaning of the value
+        (a pattern typically represented by a double bar <a grammar>||</a> in the value syntax),
+        reorder the component values to use the canonical order of component values
+        as given in the property definition table.
+    * If component values can be omitted or replaced with a shorter representation
+        without changing the meaning of the value,
+        omit/replace them.
+    * If either of the above syntactic translations would be less backwards-compatible,
+        do not perform them.
+
+    Note: The rules described here outlines the <em>general principles</em> of serialization.
+    For legacy reasons, some properties serialize in a different manner,
+    which is intentionally undefined here due to lack of resources.
+    Please consult your local reverse-engineer for details.
+3. Remove any <<whitespace-token>>s from |components|.
+3. Replace each component value in |components|
+    with the result of invoking [=serialize a CSS component value=].
+4. Join the items of |components| into a single string,
+    inserting " " (U+0020 SPACE) between each pair of items
+    unless the second item is a "," (U+002C COMMA)
+    Return the result.
 
-<ol>
- <li>If this algorithm is invoked with a list <var>list</var>, follow these substeps:
-  <ol>
-   <li>Let <var>shorthand</var> be the shorthand property that exactly maps to all the longhand properties in <var>list</var>. If there are multiple such
-   shorthand properties, use the first in <a>preferred order</a>.
-   <li>If <var>shorthand</var> cannot represent the values of <var>list</var> in its grammar, then return the empty string.
-   <li>Let <var>trimmed list</var> be a new empty array.
-   <li>For each <a>CSS declaration</a> <var>declaration</var> in <var>list</var>, if <var>declaration</var>'s
-   <a for="CSS declaration">value</a> is not the initial value, or if
-   <var>declaration</var> is a required component of the <var>shorthand</var> property, append <var>declaration</var> to <var>trimmed list</var>.
-   <li>If <var>trimmed list</var> is empty, append the value of the first item in <var>list</var> to <var>trimmed list</var>.
-   <li>Let <var>values</var> be a new empty array.
-   <li>For each <a>CSS declaration</a> <var>declaration</var> in <var>trimmed list</var>, invoke <a>serialize a CSS value</a> of
-   <var>declaration</var>, and append the result to <var>values</var>.
-   <li>Return the result of joining <var>values</var> as appropriate according to the grammar of <var>shorthand</var>.
-  </ol>
- <li>Let <var>values</var> be a new empty array.
- <li>Append the result of invoking <a>serialize a CSS component value</a> of <var>declaration</var>'s
- <a for="CSS declaration">value</a> to <var>values</var>.
- <li>If the grammar of the <a for="CSS declaration">property name</a> of <var>declaration</var> is defined to be
- whitespace-separated, return the result of invoking <a>serialize a whitespace-separated list</a> of <var>values</var>.
- <li>If the grammar of the <a for="CSS declaration">property name</a> of <var>declaration</var> is defined to be comma-separated,
- return the result of invoking <a>serialize a comma-separated list</a> of <var>values</var>.
-</ol>
 
 To
 <dfn>serialize a CSS component value</dfn>