[css-variables] Make it clearer how variable cycles work.

Author: tabatkins

css-variables/Overview.html

@@ -54,7 +54,7 @@
 </p>
   <h1 class="p-name no-ref" id=title>CSS Custom Properties for Cascading Variables Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
-    <span class=dt-updated><span class=value-title title=20131216>16 December 2013</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20131217>17 December 2013</span></span></span></h2>
   <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-variables/>http://dev.w3.org/csswg/css-variables/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-variables-1/>http://www.w3.org/TR/css-variables-1/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-variables/>http://dev.w3.org/csswg/css-variables/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2013/WD-css-variables-20130312/ rel=previous>http://www.w3.org/TR/2013/WD-css-variables-20130312/</a><dd><a href=http://www.w3.org/TR/2012/WD-css-variables-20120410/ rel=previous>http://www.w3.org/TR/2012/WD-css-variables-20120410/</a>
     <dt>Feedback:</dt>
         <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-variables%5D%20feedback">www-style@w3.org</a>
@@ -384,9 +384,19 @@ <h3 class="heading settled heading" data-level=2.3 id=cycles><span class=secno>2
 <p>	<a data-link-type=dfn href=#custom-property title="custom properties">Custom properties</a> may use variables in their own values to build up composite variables.
 	This can create cyclic dependencies
 	where a custom property uses its own variable,
-	or two or more <a data-link-type=dfn href=#custom-property title="custom properties">custom properties</a> each attempt to use the variable that the other defines;
-	doing so makes all the <a data-link-type=dfn href=#custom-property title="custom properties">custom properties</a> involved in the cycle
-	compute to their initial value (which is a guaranteed-invalid value).
+	or two or more <a data-link-type=dfn href=#custom-property title="custom properties">custom properties</a> each attempt to use the variable that the other defines.
+
+<p>	For each element,
+	create an undirected dependency graph,
+	containing nodes for each <a data-link-type=dfn href=#custom-property title="custom property">custom property</a>.
+	If the value of a <a data-link-type=dfn href=#custom-property title="custom property">custom property</a> <var>prop</var> contains a <a data-link-type=dfn href=#variable title=variable>variable</a> <var>var</var>
+	(including in the fallback of other <a data-link-type=dfn href=#variable title=variables>variables</a>),
+	add an edge between <var>prop</var> and the <a data-link-type=dfn href=#custom-property title="custom property">custom property</a> associated with <var>var</var>.
+	<span class=note>Edges are possible from a custom property to itself.</span>
+	If there is a cycle in the dependency graph,
+	all the <a data-link-type=dfn href=#custom-property title="custom properties">custom properties</a> in the cycle
+	must compute to their initial value
+	(which is a guaranteed-invalid value).
 
 	<div class=example>
 		This example shows a custom property safely using a variable:

css-variables/Overview.src.html

@@ -280,9 +280,19 @@ <h3 id='cycles'>
 	<a>Custom properties</a> may use variables in their own values to build up composite variables.
 	This can create cyclic dependencies
 	where a custom property uses its own variable,
-	or two or more <a>custom properties</a> each attempt to use the variable that the other defines;
-	doing so makes all the <a>custom properties</a> involved in the cycle
-	compute to their initial value (which is a guaranteed-invalid value).
+	or two or more <a>custom properties</a> each attempt to use the variable that the other defines.
+
+	For each element,
+	create an undirected dependency graph,
+	containing nodes for each <a>custom property</a>.
+	If the value of a <a>custom property</a> <var>prop</var> contains a <a>variable</a> <var>var</var>
+	(including in the fallback of other <a>variables</a>),
+	add an edge between <var>prop</var> and the <a>custom property</a> associated with <var>var</var>.
+	<span class='note'>Edges are possible from a custom property to itself.</span>
+	If there is a cycle in the dependency graph,
+	all the <a>custom properties</a> in the cycle
+	must compute to their initial value
+	(which is a guaranteed-invalid value).
 
 	<div class='example'>
 		This example shows a custom property safely using a variable: