[css-variables] Define 'resolve a variable'.

--HG--
extra : rebase_source : c3bbf8ac79e0c940a5ccaa837ee89e7d7575c85e

Author: tabatkins

css-variables/Overview.html

@@ -419,15 +419,31 @@ <h2 id="using-variables" data-level="3"><span class="secno">3 </span>
 	For example, a variable use like <a data-autolink="maybe" class="css">var(foo, red, blue)</a> defines a fallback of <a data-autolink="maybe" class="css">red, blue</a>;
 	that is, anything between the first comma and the end of the function is considered a <a data-autolink="link" class="production" href="#fallback-type"><var>&lt;fallback&gt;</var></a> value.
 
-</p><p>	If the variable named by the first argument is valid, 
-	the variable's value is substituted as normal. 
-	If the variable is invalid, 
-	and a <a data-autolink="link" class="production" href="#fallback-type"><var>&lt;fallback&gt;</var></a> was provided, 
-	the <a data-autolink="link" class="production" href="#fallback-type"><var>&lt;fallback&gt;</var></a> is substituted instead. 
-	Otherwise, the result of evaluating the <a data-autolink="maybe" class="css" href="#variable-type">var()</a> function will mean 
-	that the containing declaration is invalid at computed-value time.
+</p><p>	A property value containing a variable must be assumed to be valid at parse time.
+	It is only syntax-checked at computed-value time,
+	after variable references have been <a title="resolve a variable" data-autolink="link" href="#resolve-a-variable">resolved</a>.
 
-	</p><div class="example">
+</p><p>	To <dfn id="resolve-a-variable">resolve a variable</dfn> in a property's value:
+
+	</p><ol>
+		<li>
+			If the variable named by the first argument to the <a data-autolink="maybe" class="css" href="#variable-type">var()</a> function is a valid variable,
+			replace the <a data-autolink="maybe" class="css" href="#variable-type">var()</a> function by the value of the corresponding <a data-autolink="link" href="#custom-property">custom property</a>.
+
+		</li><li>
+			Otherwise, if the <a data-autolink="maybe" class="css" href="#variable-type">var()</a> function has a <a data-autolink="link" class="production" href="#fallback-type"><var>&lt;fallback&gt;</var></a> value as its second argument,
+			replace the <a data-autolink="maybe" class="css" href="#variable-type">var()</a> function by the <a data-autolink="link" class="production"><var>&lt;falback&gt;</var></a> value.
+			If there are any <a data-autolink="maybe" class="css" href="#variable-type">var()</a> references in the fallback,
+			<a title="resolve a variable" data-autolink="link" href="#resolve-a-variable">resolve</a> them as well.
+
+		</li><li>
+			Otherwise,
+			the property containing the <a data-autolink="maybe" class="css" href="#variable-type">var()</a> function is <a data-autolink="link" href="#invalid-at-computed-value-time">invalid at computed-value time</a>.
+
+<p class="note">			Note: Other things can also make a property <a data-autolink="link" href="#invalid-at-computed-value-time">invalid at computed-value time</a>.
+	</p></li></ol>
+
+	<div class="example">
 		The fallback value allows for some types of defensive coding.
 		For example,
 		an author may create a component
@@ -895,7 +911,7 @@ <h3 id="informative" class="no-num no-ref">
 
 <h2 id="index" class="no-num no-ref">
 Index</h2>
-<div data-fill-with="index"><ul class="indexlist"><li>associated style declaration, <a href="#associated-style-declaration" title="section 4.1">4.1</a></li><li>authoring tool, <a href="#authoring-tool" title="section ??">??</a></li><li>cascading variable, <a href="#cascading-variable" title="section 2">2</a></li><li>&lt;CDC&gt;, <a href="#cdc-production" title="section 2">2</a></li><li>&lt;CDO&gt;, <a href="#cdo-production" title="section 2">2</a></li><li>creator, <a href="#cssvariablesdeclaration-creator" title="section 4.2">4.2</a></li><li>CSS declaration block declarations, <a href="#css-declaration-block-declarations" title="section 4.2">4.2</a></li><li>CSSStyleDeclaration, <a href="#cssstyledeclaration" title="section 4.1">4.1</a></li><li>CSSVariablesDeclaration, <a href="#cssvariablesdeclaration" title="section 4.2">4.2</a></li><li>custom property, <a href="#custom-property" title="section 2">2</a></li><li>deleter, <a href="#cssvariablesdeclaration-deleter" title="section 4.2">4.2</a></li><li>&lt;fallback&gt;, <a href="#fallback-type" title="section 3">3</a></li><li>getter, <a href="#cssvariablesdeclaration-getter" title="section 4.2">4.2</a></li><li>invalid at computed-value time, <a href="#invalid-at-computed-value-time" title="section 3.1">3.1</a></li><li>invalid variable, <a href="#invalid-variable" title="section 3.1">3.1</a></li><li>renderer, <a href="#renderer" title="section ??">??</a></li><li>setter, <a href="#cssvariablesdeclaration-setter" title="section 4.2">4.2</a></li><li>style sheet!!as conformance class, <a href="#style-sheet" title="section ??">??</a></li><li>&lt;value&gt;, <a href="#value-production" title="section 2">2</a></li><li>var-*, <a href="#var-" title="section 2">2</a></li><li>var(), <a href="#variable-type" title="section 3">3</a></li><li>&lt;variable&gt;, <a href="#variable-type" title="section 3">3</a></li><li>variable, <a href="#cascading-variable" title="section 2">2</a></li></ul></div>
+<div data-fill-with="index"><ul class="indexlist"><li>associated style declaration, <a href="#associated-style-declaration" title="section 4.1">4.1</a></li><li>authoring tool, <a href="#authoring-tool" title="section ??">??</a></li><li>cascading variable, <a href="#cascading-variable" title="section 2">2</a></li><li>&lt;CDC&gt;, <a href="#cdc-production" title="section 2">2</a></li><li>&lt;CDO&gt;, <a href="#cdo-production" title="section 2">2</a></li><li>creator, <a href="#cssvariablesdeclaration-creator" title="section 4.2">4.2</a></li><li>CSS declaration block declarations, <a href="#css-declaration-block-declarations" title="section 4.2">4.2</a></li><li>CSSStyleDeclaration, <a href="#cssstyledeclaration" title="section 4.1">4.1</a></li><li>CSSVariablesDeclaration, <a href="#cssvariablesdeclaration" title="section 4.2">4.2</a></li><li>custom property, <a href="#custom-property" title="section 2">2</a></li><li>deleter, <a href="#cssvariablesdeclaration-deleter" title="section 4.2">4.2</a></li><li>&lt;fallback&gt;, <a href="#fallback-type" title="section 3">3</a></li><li>getter, <a href="#cssvariablesdeclaration-getter" title="section 4.2">4.2</a></li><li>invalid at computed-value time, <a href="#invalid-at-computed-value-time" title="section 3.1">3.1</a></li><li>invalid variable, <a href="#invalid-variable" title="section 3.1">3.1</a></li><li>renderer, <a href="#renderer" title="section ??">??</a></li><li>resolve a variable, <a href="#resolve-a-variable" title="section 3">3</a></li><li>setter, <a href="#cssvariablesdeclaration-setter" title="section 4.2">4.2</a></li><li>style sheet!!as conformance class, <a href="#style-sheet" title="section ??">??</a></li><li>&lt;value&gt;, <a href="#value-production" title="section 2">2</a></li><li>var-*, <a href="#var-" title="section 2">2</a></li><li>var(), <a href="#variable-type" title="section 3">3</a></li><li>&lt;variable&gt;, <a href="#variable-type" title="section 3">3</a></li><li>variable, <a href="#cascading-variable" title="section 2">2</a></li></ul></div>
 
 <h2 id="property-index" class="no-num no-ref">
 Property index</h2>

css-variables/Overview.src.html

@@ -362,13 +362,29 @@ <h2 id='using-variables'>
 	For example, a variable use like ''var(foo, red, blue)'' defines a fallback of ''red, blue'';
 	that is, anything between the first comma and the end of the function is considered a <<fallback>> value.
 
-	If the variable named by the first argument is valid, 
-	the variable's value is substituted as normal. 
-	If the variable is invalid, 
-	and a <<fallback>> was provided, 
-	the <<fallback>> is substituted instead. 
-	Otherwise, the result of evaluating the ''var()'' function will mean 
-	that the containing declaration is invalid at computed-value time.
+	A property value containing a variable must be assumed to be valid at parse time.
+	It is only syntax-checked at computed-value time,
+	after variable references have been <a title="resolve a variable">resolved</a>.
+
+	To <dfn>resolve a variable</dfn> in a property's value:
+
+	<ol>
+		<li>
+			If the variable named by the first argument to the ''var()'' function is a valid variable,
+			replace the ''var()'' function by the value of the corresponding <a>custom property</a>.
+
+		<li>
+			Otherwise, if the ''var()'' function has a <<fallback>> value as its second argument,
+			replace the ''var()'' function by the <<falback>> value.
+			If there are any ''var()'' references in the fallback,
+			<a title="resolve a variable">resolve</a> them as well.
+
+		<li>
+			Otherwise,
+			the property containing the ''var()'' function is <a>invalid at computed-value time</a>.
+
+			Note: Other things can also make a property <a>invalid at computed-value time</a>.
+	</ol>
 
 	<div class='example'>
 		The fallback value allows for some types of defensive coding.