Skip to content

Commit 9ff19b9

Browse files
author
Simon Pieters
committed
[cssom] Fix serialization of a CSS value to handle a list of longhands
1 parent f5bf7ca commit 9ff19b9

2 files changed

Lines changed: 57 additions & 87 deletions

File tree

‎cssom/Overview.html‎

Lines changed: 36 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2209,13 +2209,23 @@ <h4 id="the-cssstyledeclaration-interface"><span class="secno">6.5.1 </span>The
22092209

22102210
<p>The <dfn id="dom-cssstyledeclaration-getpropertyvalue" title="dom-CSSStyleDeclaration-getPropertyValue"><code>getPropertyValue(<var>property</var>)</code></dfn> method must run these steps:</p>
22112211
<ol>
2212-
<!-- XXX handle shorthands better -->
22132212
<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>.
2213+
<li><p>If <var>property</var> is a shorthand property, then follow these substeps:
2214+
<ol>
2215+
<li><p>Let <var>list</var> be a new empty array.
2216+
<li><p>For each longhand property <var>longhand</var> that <var>property</var> maps to, in canonical order, follow these substeps:
2217+
<ol>
2218+
<li><p>If <var>longhand</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 the
2219+
<a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>, let <var>declaration</var> be that declaration, or null otherwise.
2220+
<li><p>If <var>declaration</var> is null, return the empty string and terminate these steps.
2221+
<li><p>Append the <var>declaration</var> to <var>list</var>.
2222+
</ol>
2223+
<li><p>Return the <a href="#serialize-a-css-value" title="serialize a CSS value">serialization</a> of <var>list</var> and terminate these steps.
2224+
</ol>
22142225
<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>
22152226
match for a property of a declaration in the
2216-
<a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>, return the
2217-
<a href="#serialize-a-css-value" title="serialize a CSS value">serialization</a> of that declaration's
2218-
value.
2227+
<a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>, return the result of invoking
2228+
<a href="#serialize-a-css-value">serialize a CSS value</a> of that declaration and terminate these steps.
22192229
<li><p>Return the empty string.
22202230
</ol>
22212231

@@ -2423,49 +2433,30 @@ <h4 id="serializing-css-values"><span class="secno">6.6.2 </span>Serializing CSS
24232433

24242434
<!-- based on http://damowmow.com/playground/canon.txt -->
24252435

2426-
<p>To <dfn id="serialize-a-css-value">serialize a CSS value</dfn> follow
2436+
<p>To <dfn id="serialize-a-css-value">serialize a CSS value</dfn> of a declaration <var>declaration</var> or a list of longhand declarations <var>list</var>, follow
24272437
these rules:</p>
24282438

2429-
<ul>
2430-
<li><p><a href="#serialize-a-css-component-value" title="Serialize a CSS component value">Serialize</a> any
2431-
CSS component values in the value.</li>
2432-
2433-
<li><p>Where multiple CSS component values can appear in any order
2434-
without changing the meaning of the value (typically represented by a
2435-
double bar <code title="">||</code> in the value syntax), use the order as given
2436-
in the syntax.</li>
2437-
<!-- <code title>&lt;border-width> &lt;border-style> &lt;color></code>
2438-
for <code title>border</code> -->
2439-
2440-
<li>
2441-
<p>Where CSS component values of the value can be omitted without
2442-
changing the meaning of the value (e.g. initial values in shorthand
2443-
properties), omit them. If this would remove all the values, then
2444-
include the first allowed value.</p>
2445-
2446-
<div class="example"><p>E.g. <code title="">margin: 20px 20px</code> becomes
2447-
<code title="">margin: 20px</code>.</div>
2448-
2449-
<div class="example"><p>E.g. the value <code title="">0</code> for the
2450-
'border' property.</div>
2451-
</li>
2452-
2453-
<li><p>If the value of a shorthand property is requested and it cannot be
2454-
computed because the properties associated with the shorthand have values
2455-
that cannot be represented by the shorthand the serialization is the
2456-
empty string.</li>
2457-
2458-
<li><p>If a value has a <a href="#whitespace">whitespace</a>-separated list of
2459-
CSS component values,
2460-
<a href="#serialize-a-whitespace-separated-list" title="serialize a whitespace-separated list">serialize</a> the
2461-
value as a whitespace-separated list.</li>
2462-
2463-
<li><p>If a value has a comma-separated list of
2464-
CSS component values,
2465-
<a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serialize</a> the
2466-
value as a comma-separated list.</li>
2467-
</ul>
2468-
2439+
<ol>
2440+
<li><p>If this algorithm is invoked with a list <var>list</var>, follow these substeps:
2441+
<ol>
2442+
<li><p>Let <var>shorthand</var> be the shorthand property that exactly maps to all the longhand properties in <var>list</var>.
2443+
<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.
2444+
<li><p>Let <var>trimmed list</var> be a new empty array.
2445+
<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
2446+
<var>declaration</var> is a required component of the <var>shorthand</var> property, append <var>declaration</var> to <var>trimmed list</var>.
2447+
<li><p>If <var>trimmed list</var> is empty, append the value of the first item in <var>list</var> to <var>trimmed list</var>.
2448+
<li><p>Let <var>values</var> be a new empty array.
2449+
<li><p>For each declaration <var>declaration</var> in <var>trimmed list</var>, invoke <a href="#serialize-a-css-value">serialize a CSS value</a> of <var>declaration</var>, and
2450+
append the result to <var>values</var>.
2451+
<li><p>Return the result of joining <var>values</var> as appropriate according to the grammar of <var>shorthand</var> and terminate these steps.
2452+
</ol>
2453+
<li><p>Let <var>values</var> be a new empty array.
2454+
<li><p>Append the result of invoking <a href="#serialize-a-css-component-value">serialize a CSS component value</a> of <var>declaration</var>'s value to <var>values</var>.
2455+
<li><p>If the grammar of the property of <var>declaration</var> is defined to be whitespace-separated, return the result of invoking <a href="#serialize-a-whitespace-separated-list">serialize a
2456+
whitespace-separated list</a> of <var>values</var> and terminate these steps.
2457+
<li><p>If the grammar of the property of <var>declaration</var> is defined to be comma-separated, return the result of invoking <a href="#serialize-a-comma-separated-list">serialize a
2458+
comma-separated list</a> of <var>values</var>.
2459+
</ol>
24692460

24702461
<p>To
24712462
<dfn id="serialize-a-css-component-value">serialize a CSS component value</dfn>

‎cssom/Overview.src.html‎

Lines changed: 21 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2358,48 +2358,27 @@ <h4>Serializing CSS Values</h4>
23582358
<p>To <dfn>serialize a CSS value</dfn> of a declaration <var>declaration</var> or a list of longhand declarations <var>list</var>, follow
23592359
these rules:</p>
23602360

2361-
<ul>
2362-
<li><p>If this algorithm is invoked with a list <var>list</var>, <span title class=issue>...</span>
2363-
2364-
<li><p><span title="Serialize a CSS component value">Serialize</span> the
2365-
CSS component values in <var>declaration</var>'s value.</p></li>
2366-
2367-
<li><p>Where multiple CSS component values can appear in any order
2368-
without changing the meaning of the value (typically represented by a
2369-
double bar <code title>||</code> in the value syntax), use the order as given
2370-
in the syntax.</p></li>
2371-
<!-- <code title>&lt;border-width> &lt;border-style> &lt;color></code>
2372-
for <code title>border</code> -->
2373-
2374-
<li>
2375-
<p>Where CSS component values of the value can be omitted without
2376-
changing the meaning of the value (e.g. initial values in shorthand
2377-
properties), omit them. If this would remove all the values, then
2378-
include the first allowed value.</p>
2379-
2380-
<div class="example"><p>E.g. <code title>margin: 20px 20px</code> becomes
2381-
<code title>margin: 20px</code>.</div>
2382-
2383-
<div class="example"><p>E.g. the value <code title>0</code> for the
2384-
'border' property.</div>
2385-
</li>
2386-
2387-
<li><p>If the value of a shorthand property is requested and it cannot be
2388-
computed because the properties associated with the shorthand have values
2389-
that cannot be represented by the shorthand the serialization is the
2390-
empty string.</p></li>
2391-
2392-
<li><p>If a value has a <span>whitespace</span>-separated list of
2393-
CSS component values,
2394-
<span title="serialize a whitespace-separated list">serialize</span> the
2395-
value as a whitespace-separated list.</p></li>
2396-
2397-
<li><p>If a value has a comma-separated list of
2398-
CSS component values,
2399-
<span title="serialize a comma-separated list">serialize</span> the
2400-
value as a comma-separated list.</p></li>
2401-
</ul>
2402-
2361+
<ol>
2362+
<li><p>If this algorithm is invoked with a list <var>list</var>, follow these substeps:
2363+
<ol>
2364+
<li><p>Let <var>shorthand</var> be the shorthand property that exactly maps to all the longhand properties in <var>list</var>.
2365+
<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.
2366+
<li><p>Let <var>trimmed list</var> be a new empty array.
2367+
<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
2368+
<var>declaration</var> is a required component of the <var>shorthand</var> property, append <var>declaration</var> to <var>trimmed list</var>.
2369+
<li><p>If <var>trimmed list</var> is empty, append the value of the first item in <var>list</var> to <var>trimmed list</var>.
2370+
<li><p>Let <var>values</var> be a new empty array.
2371+
<li><p>For each declaration <var>declaration</var> in <var>trimmed list</var>, invoke <span>serialize a CSS value</span> of <var>declaration</var>, and
2372+
append the result to <var>values</var>.
2373+
<li><p>Return the result of joining <var>values</var> as appropriate according to the grammar of <var>shorthand</var> and terminate these steps.
2374+
</ol>
2375+
<li><p>Let <var>values</var> be a new empty array.
2376+
<li><p>Append the result of invoking <span>serialize a CSS component value</span> of <var>declaration</var>'s value to <var>values</var>.
2377+
<li><p>If the grammar of the property of <var>declaration</var> is defined to be whitespace-separated, return the result of invoking <span>serialize a
2378+
whitespace-separated list</span> of <var>values</var> and terminate these steps.
2379+
<li><p>If the grammar of the property of <var>declaration</var> is defined to be comma-separated, return the result of invoking <span>serialize a
2380+
comma-separated list</span> of <var>values</var>.
2381+
</ol>
24032382

24042383
<p>To
24052384
<dfn>serialize a CSS component value</dfn>

0 commit comments

Comments
 (0)