[cssom] Handle shorthands a bit better and specify the order of declarations

Author: Simon Pieters

cssom/Overview.html

@@ -1952,7 +1952,9 @@ <h4 id="the-cssstylerule-interface"><span class="secno">6.4.3 </span>The <code t
  <li><p>Otherwise, if the algorithm returns a null value, do nothing.</li>
 </ol>
 
-<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.</p>
+<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>
 
 
 <h4 id="the-csscharsetrule-interface"><span class="secno">6.4.4 </span>The <code title="">CSSCharsetRule</code> Interface</h4>
@@ -2106,10 +2108,6 @@ <h3 id="css-declaration-blocks"><span class="secno">6.5 </span>CSS Declaration B
  <dd><p>The CSS declarations associated with the object.</dd>
 </dl>
 
-<p class="note">The <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> are
-ordered. This matters for the
-<code title="dom-CSSStyleDeclaration-item"><a href="#dom-cssstyledeclaration-item">item()</a></code> method.</p>
-
 <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>
 
@@ -2192,8 +2190,9 @@ <h4 id="the-cssstyledeclaration-interface"><span class="secno">6.5.1 </span>The
  <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>
  a <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>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 it into 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>
 </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
@@ -2699,7 +2698,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. If the
+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
 <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
@@ -2746,7 +2746,7 @@ <h3 id="extensions-to-the-window-interface"><span class="secno">7.2 </span>Exten
  <li>
   <p>Return a <a href="#css-declaration-block">CSS declaration block</a> with the
   <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> set and the
-  <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all properties
+  <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all longhand properties
   the user agent supports with the value being the <a href="#resolved-value">resolved value</a>
   computed for <var>obj</var> using the style rules associated
   with <var>doc</var>.</p>
@@ -2781,28 +2781,28 @@ <h3 id="the-getstyleutils-interface"><span class="secno">7.3 </span>The <code ti
 
 <p class="atrisk">The <dfn id="dom-getstyleutils-specifiedstyle" title="dom-GetStyleUtils-specifiedStyle"><code>specifiedStyle</code></dfn> attribute must return a <a href="#css-declaration-block">CSS declaration block</a>
 with the <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> set and the
-<a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all properties
+<a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all longhand properties
 the user agent supports with the value being the <a href="#specified-value">specified value</a>
 computed for the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a> using the style rules associated
 with the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a>'s <a href="#associated-document">associated document</a>.</p>
 
 <p class="atrisk">The <dfn id="dom-getstyleutils-defaultstyle" title="dom-GetStyleUtils-defaultStyle"><code>defaultStyle</code></dfn> attribute must return a <a href="#css-declaration-block">CSS declaration block</a> with
 the <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> set and the
-<a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all properties the user agent supports with the value being the <a href="#computed-value">computed
-value</a> computed for the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a> using the user-agent-level style rules and user-level style rules associated with
-the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a>'s <a href="#associated-document">associated document</a>, ignoring transitions, animations, author-level style
+<a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all longhand properties the user agent supports with the value being the
+<a href="#computed-value">computed value</a> computed for the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a> using the user-agent-level style rules and user-level style rules
+associated with the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a>'s <a href="#associated-document">associated document</a>, ignoring transitions, animations, author-level style
 rules, author-level presentational hints and override-level style rules.</p>
 
 <p class="atrisk">The <dfn id="dom-getstyleutils-computedstyle" title="dom-GetStyleUtils-computedStyle"><code>computedStyle</code></dfn> attribute must return a <a href="#css-declaration-block">CSS declaration block</a> with
 the <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> set and the
-<a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all properties
+<a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all longhand properties
 the user agent supports with the value being the <a href="#computed-value">computed value</a>
 computed for the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a> using the style rules associated
 with the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a>'s <a href="#associated-document">associated document</a>.</p>
 
 <p class="atrisk">The <dfn id="dom-getstyleutils-usedstyle" title="dom-GetStyleUtils-usedStyle"><code>usedStyle</code></dfn> attribute must return a <a href="#css-declaration-block">CSS declaration block</a> with the
 <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> set and the
-<a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all properties
+<a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all longhand properties
 the user agent supports with the value being the <a href="#used-value">used value</a>
 computed for the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a> using the style rules associated
 with the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a>'s <a href="#associated-document">associated document</a>.</p>

cssom/Overview.src.html

@@ -1874,7 +1874,9 @@ <h4>The <code title>CSSStyleRule</code> Interface</h4>
  <li><p>Otherwise, if the algorithm returns a null value, do nothing.</p></li>
 </ol>
 
-<p>The <dfn title=dom-CSSStyleRule-style><code>style</code></dfn> attribute must return a <code>CSSStyleDeclaration</code> object for the style rule.</p>
+<p>The <dfn title=dom-CSSStyleRule-style><code>style</code></dfn> attribute must return a <code>CSSStyleDeclaration</code> object for the style rule, with the
+<span title=concept-css-declaration-block-declarations>declarations</span> 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>
 
 
 <h4>The <code title>CSSCharsetRule</code> Interface</h4>
@@ -2028,10 +2030,6 @@ <h3>CSS Declaration Blocks</h3>
  <dd><p>The CSS declarations associated with the object.</p></dd>
 </dl>
 
-<p class="note">The <span title=concept-css-declaration-block-declarations>declarations</span> are
-ordered. This matters for the
-<code title="dom-CSSStyleDeclaration-item">item()</code> method.</p>
-
 <p>To <dfn>parse a CSS declaration block</dfn> from a string <var>string</var>, invoke <span data-anolis-spec=csssyntax>parse a list of declarations</span> with
 <var>string</var> and return the value returned.</p>
 
@@ -2114,8 +2112,9 @@ <h4>The <code title>CSSStyleDeclaration</code> Interface</h4>
  <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>
  a <code data-anolis-spec=dom>NoModificationAllowedError</code> exception and terminate these steps.</li>
  <li><p>Empty the <span title=concept-css-declaration-block-declarations>declarations</span>.</li>
- <li><p><span title='Parse a CSS declaration block'>Parse</span> the given value and, if the return value is not the empty list, insert it into the
- <span title=concept-css-declaration-block-declarations>declarations</span>.</p></li>
+ <li><p><span title='Parse a CSS declaration block'>Parse</span> the given value and, if the return value is not the empty list, insert the items in the list
+ into the <span title=concept-css-declaration-block-declarations>declarations</span>, in the same order as they were specified, with shorthand properties
+ expanded into their longhand properties, in canonical order.</p></li>
 </ol>
 
 <p>The <dfn title=dom-CSSStyleDeclaration-length><code>length</code></dfn> attribute must return the number of declarations in the
@@ -2621,7 +2620,8 @@ <h3>The <code>ElementCSSInlineStyle</code> Interface</h3>
 
 <p>The <dfn title=dom-ElementCSSInlineStyle-style><code>style</code></dfn> attribute must return a <span>CSS declaration block</span> with the
 <span title=concept-css-declaration-block-declarations>declarations</span> being set to the result of <span title='Parse a CSS declaration block'>parsing</span>
-the <code title>style</code> content attribute. If the
+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
 <code title>style</code> content attribute is absent, the object represents an empty list of
 declarations. Mutating the <code>CSSStyleDeclaration</code> object must set the
 <code title>style</code> content attribute on the element to the
@@ -2668,7 +2668,7 @@ <h3>Extensions to the <code title>Window</code> Interface</h3>
  <li>
   <p>Return a <span>CSS declaration block</span> with the
   <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> set and the
-  <span title=concept-css-declaration-block-declarations>declarations</span> set to all properties
+  <span title=concept-css-declaration-block-declarations>declarations</span> set to all longhand properties
   the user agent supports with the value being the <span>resolved value</span>
   computed for <var>obj</var> using the style rules associated
   with <var>doc</var>.</p>
@@ -2703,28 +2703,28 @@ <h3>The <code title>GetStyleUtils</code> Interface</h3>
 
 <p class=atrisk>The <dfn title=dom-GetStyleUtils-specifiedStyle><code>specifiedStyle</code></dfn> attribute must return a <span>CSS declaration block</span>
 with the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> set and the
-<span title=concept-css-declaration-block-declarations>declarations</span> set to all properties
+<span title=concept-css-declaration-block-declarations>declarations</span> set to all longhand properties
 the user agent supports with the value being the <span>specified value</span>
 computed for the <span data-anolis-spec=dom>context object</span> using the style rules associated
 with the <span data-anolis-spec=dom>context object</span>'s <span>associated document</span>.</p>
 
 <p class=atrisk>The <dfn title=dom-GetStyleUtils-defaultStyle><code>defaultStyle</code></dfn> attribute must return a <span>CSS declaration block</span> with
 the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> set and the
-<span title=concept-css-declaration-block-declarations>declarations</span> set to all properties the user agent supports with the value being the <span>computed
-value</span> computed for the <span data-anolis-spec=dom>context object</span> using the user-agent-level style rules and user-level style rules associated with
-the <span data-anolis-spec=dom>context object</span>'s <span>associated document</span>, ignoring transitions, animations, author-level style
+<span title=concept-css-declaration-block-declarations>declarations</span> set to all longhand properties the user agent supports with the value being the
+<span>computed value</span> computed for the <span data-anolis-spec=dom>context object</span> using the user-agent-level style rules and user-level style rules
+associated with the <span data-anolis-spec=dom>context object</span>'s <span>associated document</span>, ignoring transitions, animations, author-level style
 rules, author-level presentational hints and override-level style rules.</p>
 
 <p class=atrisk>The <dfn title=dom-GetStyleUtils-computedStyle><code>computedStyle</code></dfn> attribute must return a <span>CSS declaration block</span> with
 the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> set and the
-<span title=concept-css-declaration-block-declarations>declarations</span> set to all properties
+<span title=concept-css-declaration-block-declarations>declarations</span> set to all longhand properties
 the user agent supports with the value being the <span>computed value</span>
 computed for the <span data-anolis-spec=dom>context object</span> using the style rules associated
 with the <span data-anolis-spec=dom>context object</span>'s <span>associated document</span>.</p>
 
 <p class=atrisk>The <dfn title=dom-GetStyleUtils-usedStyle><code>usedStyle</code></dfn> attribute must return a <span>CSS declaration block</span> with the
 <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> set and the
-<span title=concept-css-declaration-block-declarations>declarations</span> set to all properties
+<span title=concept-css-declaration-block-declarations>declarations</span> set to all longhand properties
 the user agent supports with the value being the <span>used value</span>
 computed for the <span data-anolis-spec=dom>context object</span> using the style rules associated
 with the <span data-anolis-spec=dom>context object</span>'s <span>associated document</span>.</p>