[css-variables] Specify how to handle loops with animation a custom property used in an animation property.

Author: tabatkins

css-variables/Overview.bs

@@ -183,10 +183,14 @@ Custom Property Value Syntax</h3>
 	can be made conditional with ''@media'' and other conditional rules,
 	can be used in HTML's <code>style</code> attribute,
 	can be read or set using the CSSOM, etc.
+
 	Notably, they can even be transitioned or animated,
 	but since the UA has no way to interpret their contents,
 	they always use the "flips at 50%" behavior
 	that is used for any other pair of values that can't be intelligently interpolated.
+	However, any <a>custom property</a> used in a ''@keyframes'' rule
+	becomes <dfn>animation-tainted</dfn>,
+	which affects how it is treated when referred to via the ''var()'' function in an animation property.
 
 	<div class='example'>
 		This style rule:
@@ -386,6 +390,11 @@ Using Cascading Variables: the ''var()'' notation</h2>
 	To <dfn export>substitute a var()</dfn> in a property's value:
 
 	<ol>
+		<li>
+			If the <a>custom property</a> named by the first argument to the ''var()'' function is <a>animation-tainted</a>,
+			and the ''var()'' function is being used in the 'animation' property or one of its longhands,
+			treat the <a>custom property</a> as having its initial value for the rest of this algorithm.
+
 		<li>
 			If the value of the <a>custom property</a> named by the first argument to the ''var()'' function
 			is anything but the initial value,

css-variables/Overview.html

@@ -56,7 +56,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=20140403>3 April 2014</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20140417>17 April 2014</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-1-20130620/ rel=previous>http://www.w3.org/TR/2013/WD-css-variables-1-20130620/</a><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>
@@ -259,7 +259,7 @@ <h3 class="heading settled heading" data-level=2.1 id=syntax><span class=secno>2
 
 <p class=note>	Note: While <a class="production css-code" data-link-type=type href=#typedef-any-value title="<any-value>">&lt;any-value&gt;</a> must represent at least one token,
 	that one token may be whitespace.
-	This implies that <span class=css data-link-type=propdesc title=--foo>--foo: ;</span> is valid,
+	This implies that <a class=css data-link-type=propdesc title=--foo>--foo: ;</a> is valid,
 	and the corresponding <span class=css data-link-type=maybe title=var(--foo)>var(--foo)</span> call would have a single space as its substitution value,
 	but <span class=css data-link-type=maybe title=--foo:;>--foo:;</span> is invalid.
 
@@ -292,10 +292,14 @@ <h3 class="heading settled heading" data-level=2.1 id=syntax><span class=secno>2
 	can be made conditional with <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-conditional-3/#at-ruledef-media title=@media>@media</a> and other conditional rules,
 	can be used in HTML’s <code>style</code> attribute,
 	can be read or set using the CSSOM, etc.
-	Notably, they can even be transitioned or animated,
+
+<p>	Notably, they can even be transitioned or animated,
 	but since the UA has no way to interpret their contents,
 	they always use the "flips at 50%" behavior
 	that is used for any other pair of values that can’t be intelligently interpolated.
+	However, any <a data-link-type=dfn href=#custom-property title="custom property">custom property</a> used in a <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-animations-1/#at-ruledef-keyframes title=@keyframes>@keyframes</a> rule
+	becomes <dfn data-dfn-type=dfn data-noexport="" id=animation-tainted>animation-tainted<a class=self-link href=#animation-tainted></a></dfn>,
+	which affects how it is treated when referred to via the <a class=css data-link-type=maybe href=#funcdef-var title=var()>var()</a> function in an animation property.
 
 	<div class=example>
 		This style rule:
@@ -457,6 +461,11 @@ <h2 class="heading settled heading" data-level=3 id=using-variables><span class=
 <p>	To <dfn data-dfn-type=dfn data-export="" id=substitute-a-var>substitute a var()<a class=self-link href=#substitute-a-var></a></dfn> in a property’s value:
 
 	<ol>
+		<li>
+			If the <a data-link-type=dfn href=#custom-property title="custom property">custom property</a> named by the first argument to the <a class=css data-link-type=maybe href=#funcdef-var title=var()>var()</a> function is <a data-link-type=dfn href=#animation-tainted title=animation-tainted>animation-tainted</a>,
+			and the <a class=css data-link-type=maybe href=#funcdef-var title=var()>var()</a> function is being used in the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-animations-1/#propdef-animation title=animation>animation</a> property or one of its longhands,
+			treat the <a data-link-type=dfn href=#custom-property title="custom property">custom property</a> as having its initial value for the rest of this algorithm.
+
 		<li>
 			If the value of the <a data-link-type=dfn href=#custom-property title="custom property">custom property</a> named by the first argument to the <a class=css data-link-type=maybe href=#funcdef-var title=var()>var()</a> function
 			is anything but the initial value,
@@ -835,6 +844,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 Index</span><a class=self-link href=#index></a></h2>
 <div data-fill-with=index><ul class=indexlist>
 <li>--*, <a href=#propdef--- title="section 2">2</a>
+<li>animation-tainted, <a href=#animation-tainted title="section 2.1">2.1</a>
 <li>&lt;any-value&gt;, <a href=#typedef-any-value title="section 2.1">2.1</a>
 <li>custom property, <a href=#custom-property title="section 2">2</a>
 <li>&lt;custom-property-name&gt;, <a href=#typedef-custom-property-name title="section 2">2</a>
@@ -847,6 +857,6 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <h2 class="no-num no-ref heading settled heading" id=property-index><span class=content>
 Property index</span><a class=self-link href=#property-index></a></h2>
 <div data-fill-with=property-index><table class="proptable data"><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Animatable<th scope=col>Computed value<tbody>
-<tr><th scope=row><a data-property="">--*</a><td>&lt;any-value&gt;<td>(nothing, see prose)<td>all elements<td>yes<td><td>all<td>no<td>specified value with variables substituted (but see prose for "invalid variables")</table></div>
+<tr><th scope=row><a class=css-code data-link-type=property title=--*>--*</a><td>&lt;any-value&gt;<td>(nothing, see prose)<td>all elements<td>yes<td><td>all<td>no<td>specified value with variables substituted (but see prose for "invalid variables")</table></div>