[css-typed-om] clarify how CSSUnparsedValues compute. (#296)

(#192)

Author: shans

css-typed-om/Overview.bs

@@ -1416,28 +1416,40 @@ appear as computed values (i.e. as a value stored on computed
 Computed {{CSSUnparsedValue}} objects {#computed-unparsedvalue-objects}
 -----------------------------------------------------------------------------
 
-Custom property references are resolved as part of style computation. Accordingly,
-computed {{CSSUnparsedValue}} objects will not contain {{CSSVariableReferenceValue}} objects.
-As a result, only a single {{DOMString}} will appear in the sequence contained by
-computed {{CSSUnparsedValue}} objects.
-
-Furthermore, values that at specified value time contained custom property references
-are renormalized after computation.
+A property with a specified {{CSSUnparsedValue}} value will not
+compute to a {{CSSUnparsedValue}}. Instead, after custom property references
+are resolved, the {{CSSStyleValue}} subclass appropriate to the property will be
+used.
 
 <div class='example'>
+For example, a style rule containing:
 
-Consider an element "e" with an inline style that specifies a width of <code>var(--baz)</code>.
+<pre class='style'>
+width: calc(var(--foo) + 10%);
+</pre>
 
-Assuming that the custom property --baz contains the value "42px", running the following code:
+Will represent a specified width as an {{CSSUnparsedValue}}, but if this value
+is the winning value during computation for a given element then that element's
+computed width will be represented by a {{CSSLengthValue}} object (assuming
+that --foo resolves to a valid substitution).
+</div>
 
-<pre class='lang-javascript'>
-var a = e.styleMap.get('width');
-var b = getComputedStyleMap(e).get('width');
-</pre>
+Often there will be no {{CSSStyleValue}} subclass appropriate - for example when a custom property
+contains a reference to another custom property. In these cases, a {{CSSStyleValue}}
+is used directly to represent a valud of unknown type.
 
-Will result in "a" containing a {{CSSUnparsedValue}} with a single {{CSSVariableReferenceValue}}
-in its sequence, and "b" containing a {{CSSSimpleLength}} representing 42px.
+<div class='example'>
+
+For example, a style rule containing:
+
+<pre class='style'>
+--foo: var(--bar) black;
+</pre>
 
+Will represent a specified value for --foo as a {{CSSUnparsedValue}}, and if
+this value is the winning declaration for --foo during computation for a given
+element, then that element's will have a computed value for --foo that is
+represented by a {{CSSStyleValue}}. 
 </div>
 
 Computed {{CSSKeywordValue}} objects {#computed-keywordvalue-objects}