Serialize a declaration block using shorthands. Also say that duplicate declarations only appear once in the OM. https://www.w3.org/Bugs/Public/show_bug.cgi?id=22503

Author: Simon Pieters

cssom/Overview.html

@@ -16,7 +16,7 @@
  <h1>CSS Object Model (CSSOM)</h1>
 
 
- <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 28 June 2013</h2>
+ <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 9 August 2013</h2>
 
  <dl>
 
@@ -90,7 +90,7 @@ <h2 class="no-num no-toc" id="sotd">Status of This Document</h2>
 can be found in the
 <a href="http://www.w3.org/TR/">W3C technical reports index at http://www.w3.org/TR/.</a></em>
 
-<p class="dontpublish">This is the 28 June 2013 Editor's Draft of CSSOM. Please send comments to
+<p class="dontpublish">This is the 9 August 2013 Editor's Draft of CSSOM. Please send comments to
 <a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a>
 (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
 with <samp>[cssom]</samp> at the start of the subject line.
@@ -1960,7 +1960,9 @@ <h4 id="the-cssstylerule-interface"><span class="secno">6.4.3 </span>The <code t
 
 <p>The <dfn id="dom-cssstylerule-style" title="dom-CSSStyleRule-style"><code>style</code></dfn> attribute must return a <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> object for the style rule, with the
 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> being the declared declarations in the rule, in the same order as they were
-specified, with shorthand properties expanded into their longhand properties, in canonical order.</p>
+specified, with shorthand properties expanded into their longhand properties, in canonical order. If a property is specified more than once, it must be
+represented as one item in the <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> at the position of the last declaration for that
+property.</p>
 
 
 <h4 id="the-csscharsetrule-interface"><span class="secno">6.4.4 </span>The <code title="">CSSCharsetRule</code> Interface</h4>
@@ -2117,45 +2119,77 @@ <h3 id="css-declaration-blocks"><span class="secno">6.5 </span>CSS Declaration B
 <p>To <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn> from a string <var>string</var>, invoke <a class="external" data-anolis-spec="csssyntax" href="http://dev.w3.org/csswg/css-syntax/#parse-a-list-of-declarations0">parse a list of declarations</a> with
 <var>string</var> and return the value returned.</p>
 
-<p>To <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn>
-represented by a <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> instance named <var>d</var>,
-let <var>s</var> be the empty string, then run the steps below:</p>
+<p>To <dfn id="serialize-a-css-declaration">serialize a CSS declaration</dfn> with property name <var>property</var>, value <var>value</var> and optionally an <i>important</i> flag set, follow
+these steps:
 
 <ol>
- <li><p>If <code title=""><var>d</var>.length</code> is zero (0), then return <var>s</var>.</li>
- <li><p>For each <var>i</var> from zero (0) through <code title=""><var>d</var>.length</code> - 1 (inclusive), perform the following sub-steps:</p>
- <ol>
-  <li><p>Let <var>n</var> be the value returned by <code title=""><var>d</var>.item(<var>i</var>)</code>.</li>
-  <li><p>Let <var>v</var> be the value returned by <code title=""><var>d</var>.getPropertyValue(<var>n</var>)</code>.</li>
-  <li><p>If <var>v</var> is the empty string, then continue.</li>
-  <li>
-   <p>Otherwise (<var>v</var> is non-empty), perform the following sub-steps:</p>
-   <ol>
-     <li><p>If <var>s</var> is not empty, then append a single SPACE (U+0020) to <var>s</var>.</li>
-     <li><p>Append <var>n</var> to <var>s</var>.</li>
-     <li><p>Append COLON (U+003A) followed by a single SPACE (U+0020), i.e., "<code title="">: </code>", to <var>s</var>.</li>
-     <li><p>Append <var>v</var> to <var>s</var>.</li>
-   </ol>
-   </li>
-   <li><p>Let <var>p</var> be the value returned by <code title=""><var>d</var>.getPropertyPriority(<var>n</var>)</code>.</li>
-   <li>
-    <p>If <var>p</var> is not the empty string, then perform the following sub-steps:</p>
+ <li><p>Let <var>s</var> be the empty string.
+ <li><p>Append <var>property</var> to <var>s</var>.
+ <li><p>Append "<code title="">: </code>" (U+003A U+0020) to <var>s</var>.
+ <li><p>Append <var>value</var> to <var>s</var>.
+ <li><p>If the <i>important</i> flag is set, append "<code title=""> !important</code>" (U+0020 U+0021 U+0069 U+006D U+0070 U+006F U+0072 U+0074 U+0061 U+006E
+ U+0074) to <var>s</var>.
+ <li><p>Append "<code title="">;</code>" (U+003B) to <var>s</var>.
+ <li><p>Return <var>s</var>.
+</ol>
+
+<p>To <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn> <var>declaration block</var> means to run the steps below:</p>
+
+<ol>
+ <li><p>Let <var>list</var> be an empty array.
+ <li><p>Let <var>already serialized</var> be an empty array.
+ <li><p><i>Declaration loop</i>: For each declaration <var>declaration</var> in <var>declaration block</var>'s
+ <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>, follow these substeps:
+  <ol>
+   <li><p>Let <var>property</var> be <var>declaration</var>'s property name.
+   <li><p>If <var>property</var> is in <var>already serialized</var>, continue with the steps labeled <i>declaration loop</i>.
+   <li><p>If <var>property</var> maps to one or more shorthand properties, let <var>shorthands</var> be an array of those shorthand properties, in 
+   <a href="#concept-shorthands-preferred-order" title="concept-shorthands-preferred-order">preferred order</a>, and follow these substeps:
     <ol>
-      <li><p>Append a single SPACE (U+0020) followed by EXCLAMATION MARK (U+0021), i.e., "<code title=""> !</code>", to <var>s</var>.</li>
-      <li><p>Append <var>p</var> to <var>s</var>.</li>
+     <li><p>Let <var>longhands</var> an array consisting of all declarations in <var>declaration block</var>'s
+     <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> that that are not in <var>already serialized</var> and have a property name that
+     maps to one of the shorthand properties in <var>shorthands</var>.
+     <li><p><i>Shorthand loop</i>: For each <var>shorthand</var> in <var>shorthands</var>, follow these substeps:
+      <ol>
+       <li><p>If all properties that map to <var>shorthand</var> are not present in <var>longhands</var>, continue with the steps labeled <i>shorthand loop</i>.
+       <li><p>Let <var>current longhands</var> be an empty array.
+       <li><p>Append all declarations in <var>longhands</var> have a property name that maps to <var>shorthand</var> to <var>current longhands</var>.
+       <li><p>If there is one or more declarations in <var>current longhands</var> have their <i>important</i> set and one or more with it unset, continue with
+       the steps labeled <i>shorthand loop</i>.
+       <li><p>Let <var>value</var> be the result of invoking <a href="#serialize-a-css-value">serialize a CSS value</a> of <var>current longhands</var>.
+       <li><p>If <var>value</var> is the empty string, continue with the steps labeled <i>shorthand loop</i>.
+       <li><p>Let <var>serialized declaration</var> be the result of invoking <a href="#serialize-a-css-declaration">serialize a CSS declaration</a> with property name
+       <var>shorthand</var>, value <var>value</var>, and the <i>important</i> flag set if the declarations in <var>current longhands</var> have their
+       <i>important</i> flag set.
+       <li><p>Append <var>serialized declaration</var> to <var>list</var>.
+       <li><p>Append the property names of all items of <var>current longhands</var> to <var>already serialized</var>.
+       <li><p>Remove the items present in <var>current longhands</var> from <var>longhands</var>.
+      </ol>
     </ol>
-   </li>
-   <li><p>Append SEMICOLON (U+003B), i.e., "<code title="">;</code>", to <var>s</var>.</li>
- </ol>
- </li>
- <li><p>Return <var>s</var>.</li>
+   <li><p>If <var>property</var> is in <var>already serialized</var>, continue with the steps labeled <i>declaration loop</i>.
+   <li><p>Let <var>value</var> be the result of invoking <a href="#serialize-a-css-value">serialize a CSS value</a> of <var>declaration</var>.
+   <li><p>Let <var>serialized declaration</var> be the result of invoking <a href="#serialize-a-css-declaration">serialize a CSS declaration</a> with property name <var>property</var>, value
+   <var>value</var>, and the <i>important</i> flag set if <var>declaration</var> has its <i>important</i> flag set.
+   <li><p>Append <var>serialized declaration</var> to <var>list</var>.
+   <li><p>Append <var>property</var> to <var>already serialized</var>.
+  </ol>
+ <li><p>Return <var>list</var> joined with "<code title=""> </code>" (U+0020).
 </ol>
 
 <p class="note">The serialization of an empty CSS declaration block is the empty string.</p>
 
 <p class="note">The serialization of a non-empty CSS declaration block does not include any surrounding whitespace, i.e., no whitepsace appears
 before the first property name and no whitespace appears after the final semicolon delimiter that follows the last property value.</p>
 
+<p>The <dfn id="concept-shorthands-preferred-order" title="concept-shorthands-preferred-order">preferred order</dfn> of a list of shorthand properties <var>shorthands</var> is as follows:
+
+<ol>
+ <li><p>Order <var>shorthands</var> lexicographically.
+ <li><p>Move all items in <var>shorthands</var> that begin with "<code title="">-</code>" (U+002D) last in the list.
+ <li><p>Move all items in <var>shorthands</var> that begin with "<code title="">-</code>" (U+002D) but do no begin with "<code title="">-webkit-</code>" last in the
+ list.
+ <li><p>Order <var>shorthands</var> by the number of longhand properties that map to it, with the greatest number first.
+</ol>
 
 <h4 id="the-cssstyledeclaration-interface"><span class="secno">6.5.1 </span>The <code title="">CSSStyleDeclaration</code> Interface</h4>
 
@@ -2198,7 +2232,8 @@ <h4 id="the-cssstyledeclaration-interface"><span class="secno">6.5.1 </span>The
  <li><p>Empty the <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>.</li>
  <li><p><a href="#parse-a-css-declaration-block" title="Parse a CSS declaration block">Parse</a> the given value and, if the return value is not the empty list, insert the items in the list
  into the <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>, in the same order as they were specified, with shorthand properties
- expanded into their longhand properties, in canonical order.</li>
+ expanded into their longhand properties, in canonical order. If a property is specified more than once, it must be represented as one item in the
+ <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> at the position of the last declaration for that property.</li>
 </ol>
 
 <p>The <dfn id="dom-cssstyledeclaration-length" title="dom-CSSStyleDeclaration-length"><code>length</code></dfn> attribute must return the number of declarations in the
@@ -2439,7 +2474,8 @@ <h4 id="serializing-css-values"><span class="secno">6.6.2 </span>Serializing CSS
 <ol>
  <li><p>If this algorithm is invoked with a list <var>list</var>, follow these substeps:
   <ol>
-   <li><p>Let <var>shorthand</var> be the shorthand property that exactly maps to all the longhand properties in <var>list</var>.
+   <li><p>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 href="#concept-shorthands-preferred-order" title="concept-shorthands-preferred-order">preferred order</a>.
    <li><p>If <var>shorthand</var> cannot represent the values of <var>list</var> in its grammar, return the empty string and terminate these steps.
    <li><p>Let <var>trimmed list</var> be a new empty array.
    <li><p>For each declaration <var>declaration</var> in <var>list</var>, if <var>declaration</var>'s value is not the initial value, or if
@@ -2696,7 +2732,8 @@ <h3 id="the-elementcssinlinestyle-interface"><span class="secno">7.1 </span>The
 <p>The <dfn id="dom-elementcssinlinestyle-style" title="dom-ElementCSSInlineStyle-style"><code>style</code></dfn> attribute must return a <a href="#css-declaration-block">CSS declaration block</a> with the
 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> being set to the result of <a href="#parse-a-css-declaration-block" title="Parse a CSS declaration block">parsing</a>
 the <code title="">style</code> content attribute, in the same order as specified, with shorthand properties expanded to their longhand properties, in canonical
-order. If the
+order. If a property is specified more than once, it must be represented as one item in the
+<a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> at the position of the last declaration for that property. If the
 <code title="">style</code> content attribute is absent, the object represents an empty list of
 declarations. Mutating the <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> object must set the
 <code title="">style</code> content attribute on the element to the