[cssom] Handle shorthands in setProperty and getPropertyValue. Serialization still needs fixing though.

Author: Simon Pieters

cssom/Overview.html

@@ -2246,7 +2246,6 @@ <h4 id="the-cssstyledeclaration-interface"><span class="secno">6.5.1 </span>The
 <p>The <dfn id="dom-cssstyledeclaration-setproperty" title="dom-CSSStyleDeclaration-setProperty"><code>setProperty(<var>property</var>, <var>value</var>,
 <var>priority</var>)</code></dfn> method must run these steps:</p>
 <ol>
- <!-- XXX handle shorthands better -->
  <li><p>If the <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> is set, <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a>
  an <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#nomodificationallowederror">NoModificationAllowedError</a></code> exception and terminate these steps.</li>
  <li><p>Let <var>property</var> be <var>property</var> <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.
@@ -2257,11 +2256,29 @@ <h4 id="the-cssstyledeclaration-interface"><span class="secno">6.5.1 </span>The
  <li><p>If <var>priority</var> is neither an <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">important</code>"
  nor the empty string terminate this algorithm.</li>
  <li>
- <p>If <a href="#parse-a-css-value" title="parse a CSS value">parsing</a> <var>value</var> returns null terminate this algorithm.
- <p class="note"><var>value</var> can not include "<code title="">!important</code>".</p>
+  <p>Let <var>component value list</var> be the result of <a href="#parse-a-css-value" title="parse a CSS value">parsing</a> <var>value</var>.
+  <p class="note"><var>value</var> can not include "<code title="">!important</code>".</p>
  </li>
- <li><p>Finally, set <var>property</var> to <var>value</var> with the <i>important</i> flag set if <var>priority</var> is not the empty
- string, and unset otherwise.</li>
+ <li><p>If <var>component value list</var> is null terminate these steps.
+ <li><p>If <var>property</var> is a shorthand property, then for each longhand property <var>longhand</var> that <var>property</var> maps to, in canonical
+ order, <a href="#set-a-css-property" title="set a CSS property">set the CSS property</a> <var>longhand</var> to the appropriate value(s) from <var>component value list</var>, with
+ the <var>important</var> flag set if <var>priority</var> is not the empty string, and with the list of declarations being the
+ <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>.
+ <li><p>Otherwise, <a href="#set-a-css-property" title="set a CSS property">set the CSS property</a> <var>property</var> to <var>component value list</var>, with
+ the <var>important</var> flag set if <var>priority</var> is not the empty string, and with the list of declarations being the
+ <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>.
+</ol>
+
+<p>To <dfn id="set-a-css-property">set a CSS property</dfn> <var>property</var> to a value <var>component value list</var> and optionally with an <var>important</var> flag set, in a
+list of declarations <var>declarations</var>, follow these steps:
+
+<ol>
+ <li><p>If <var>property</var> is a <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for a property of a declaration in
+ <var>declarations</var>, let <var>declaration</var> be that declaration.
+ <li><p>Otherwise, append a new declaration with the property name <var>property</var> to <var>declarations</var> and let <var>declaration</var> be that
+ declaration.
+ <li><p>Set <var>declaration</var>'s value to <var>component value list</var>.
+ <li><p>Set the declaration's <i>important</i> flag if <var>important</var> is set, or unset it otherwise.
 </ol>
 
 <p>The <dfn id="dom-cssstyledeclaration-removeproperty" title="dom-CSSStyleDeclaration-removeProperty"><code>removeProperty(<var>property</var>)</code></dfn> method must run these steps:</p>

cssom/Overview.src.html

@@ -2131,13 +2131,23 @@ <h4>The <code title>CSSStyleDeclaration</code> Interface</h4>
 
 <p>The <dfn title=dom-CSSStyleDeclaration-getPropertyValue><code>getPropertyValue(<var>property</var>)</code></dfn> method must run these steps:</p>
 <ol>
- <!-- XXX handle shorthands better -->
  <li><p>Let <var>property</var> be <var>property</var> <span data-anolis-spec=dom>converted to ASCII lowercase</span>.
+ <li><p>If <var>property</var> is a shorthand property, then follow these substeps:
+  <ol>
+   <li><p>Let <var>list</var> be a new empty array.
+   <li><p>For each longhand property <var>longhand</var> that <var>property</var> maps to, in canonical order, follow these substeps:
+    <ol>
+     <li><p>If <var>longhand</var> is a <span data-anolis-spec=dom>case-sensitive</span> match for a property of a declaration in the
+     <span title=concept-css-declaration-block-declarations>declarations</span>, let <var>declaration</var> be that declaration, or null otherwise.
+     <li><p>If <var>declaration</var> is null, return the empty string and terminate these steps.
+     <li><p>Append the <var>declaration</var> to <var>list</var>.
+    </ol>
+   <li><p>Return the <span title='serialize a CSS value'>serialization</span> of <var>list</var> and terminate these steps.
+  </ol>
  <li><p>If <var>property</var> is a <span data-anolis-spec=dom>case-sensitive</span>
  match for a property of a declaration in the
- <span title=concept-css-declaration-block-declarations>declarations</span>, return the
- <span title='serialize a CSS value'>serialization</span> of that declaration's
- value.
+ <span title=concept-css-declaration-block-declarations>declarations</span>, return the result of invoking
+ <span>serialize a CSS value</span> of that declaration and terminate these steps.
  <li><p>Return the empty string.
 </ol>
 
@@ -2168,7 +2178,6 @@ <h4>The <code title>CSSStyleDeclaration</code> Interface</h4>
 <p>The <dfn title=dom-CSSStyleDeclaration-setProperty><code>setProperty(<var>property</var>, <var>value</var>,
 <var>priority</var>)</code></dfn> method must run these steps:</p>
 <ol>
- <!-- XXX handle shorthands better -->
  <li><p>If the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> is set, <span data-anolis-spec=dom title=concept-throw>throw</span>
  an <code data-anolis-spec=dom>NoModificationAllowedError</code> exception and terminate these steps.</li>
  <li><p>Let <var>property</var> be <var>property</var> <span data-anolis-spec=dom>converted to ASCII lowercase</span>.
@@ -2179,11 +2188,29 @@ <h4>The <code title>CSSStyleDeclaration</code> Interface</h4>
  <li><p>If <var>priority</var> is neither an <span data-anolis-spec=dom>ASCII case-insensitive</span> match for the string "<code title>important</code>"
  nor the empty string terminate this algorithm.</p></li>
  <li>
- <p>If <span title='parse a CSS value'>parsing</span> <var>value</var> returns null terminate this algorithm.
- <p class='note'><var>value</var> can not include "<code title>!important</code>".</p>
+  <p>Let <var>component value list</var> be the result of <span title='parse a CSS value'>parsing</span> <var>value</var>.
+  <p class='note'><var>value</var> can not include "<code title>!important</code>".</p>
  </li>
- <li><p>Finally, set <var>property</var> to <var>value</var> with the <i>important</i> flag set if <var>priority</var> is not the empty
- string, and unset otherwise.</p></li>
+ <li><p>If <var>component value list</var> is null terminate these steps.
+ <li><p>If <var>property</var> is a shorthand property, then for each longhand property <var>longhand</var> that <var>property</var> maps to, in canonical
+ order, <span title="set a CSS property">set the CSS property</span> <var>longhand</var> to the appropriate value(s) from <var>component value list</var>, with
+ the <var>important</var> flag set if <var>priority</var> is not the empty string, and with the list of declarations being the
+ <span title=concept-css-declaration-block-declarations>declarations</span>.
+ <li><p>Otherwise, <span title="set a CSS property">set the CSS property</span> <var>property</var> to <var>component value list</var>, with
+ the <var>important</var> flag set if <var>priority</var> is not the empty string, and with the list of declarations being the
+ <span title=concept-css-declaration-block-declarations>declarations</span>.
+</ol>
+
+<p>To <dfn>set a CSS property</dfn> <var>property</var> to a value <var>component value list</var> and optionally with an <var>important</var> flag set, in a
+list of declarations <var>declarations</var>, follow these steps:
+
+<ol>
+ <li><p>If <var>property</var> is a <span data-anolis-spec=dom>case-sensitive</span> match for a property of a declaration in
+ <var>declarations</var>, let <var>declaration</var> be that declaration.
+ <li><p>Otherwise, append a new declaration with the property name <var>property</var> to <var>declarations</var> and let <var>declaration</var> be that
+ declaration.
+ <li><p>Set <var>declaration</var>'s value to <var>component value list</var>.
+ <li><p>Set the declaration's <i>important</i> flag if <var>important</var> is set, or unset it otherwise.
 </ol>
 
 <p>The <dfn title=dom-CSSStyleDeclaration-removeProperty><code>removeProperty(<var>property</var>)</code></dfn> method must run these steps:</p>
@@ -2328,12 +2355,14 @@ <h4>Serializing CSS Values</h4>
 
 <!-- based on http://damowmow.com/playground/canon.txt -->
 
-<p>To <dfn>serialize a CSS value</dfn> follow
+<p>To <dfn>serialize a CSS value</dfn> of a declaration <var>declaration</var> or a list of longhand declarations <var>list</var>, follow
 these rules:</p>
 
 <ul>
- <li><p><span title="Serialize a CSS component value">Serialize</span> any
- CSS component values in the value.</p></li>
+ <li><p>If this algorithm is invoked with a list <var>list</var>, <span title class=issue>...</span>
+
+ <li><p><span title="Serialize a CSS component value">Serialize</span> the
+ CSS component values in <var>declaration</var>'s value.</p></li>
 
  <li><p>Where multiple CSS component values can appear in any order
  without changing the meaning of the value (typically represented by a