[css-transitions] Define a set of completed transitions that implementations must maintain, as part of the new definition of starting and canceling of transitions.

This fixes the issue discussed in
https://lists.w3.org/Archives/Public/www-style/2015Jan/0444.html

Also, make "running transition" a link, like "completed transition".

Author: dbaron

css-transitions/Overview.bs

@@ -502,7 +502,8 @@ url: http://dev.w3.org/csswg/css-color-3/#html4; type: value; text: green;
       </h2>
 
       <p>
-        Implementations must maintain a set of running transitions,
+        Implementations must maintain a set of
+        <dfn title="running transition">running transitions</dfn>,
         each of which applies to a specific element and non-shorthand
         property.  Each of these transitions also has a
         <dfn>start time</dfn>, <dfn>end time</dfn>, <dfn>start value</dfn>,
@@ -512,6 +513,46 @@ url: http://dev.w3.org/csswg/css-color-3/#html4; type: value; text: green;
         and are removed from this set
         when they <a>complete</a>
         or when implementations are required to <dfn>cancel</dfn> them.
+        <span class="note">
+          For the rationale behind the <a>reversing-adjusted start value</a>
+          and <a>reversing shortening factor</a>, see [[#reversing]].
+        </span>
+      </p>
+
+      <p>
+        Implementations must also maintain a set of
+        <dfn title="completed transition">completed transitions</dfn>,
+        each of which
+        (like <a title="running transition">running transitions</a>)
+        applies to a specific element and non-shorthand property.
+        <span class="note">
+          This specification maintains the invariant that
+          there is never both a <a>running transition</a> and
+          a <a>completed transition</a> for the same property and element.
+        </span>
+        <span class="note">
+          This set of completed transitions
+          needs to be maintained
+          in order to prevent
+          transitions from repeating themselves in certain cases,
+          i.e., to maintain the invariant
+          that this specification tries to maintain
+          that unrelated style changes do not trigger transitions.
+        </span>
+      </p>
+
+      <p class="example">
+        An example where maintaining the set of completed transitions
+        is necessary would be a transition on
+        an inherited property,
+        where the parent specifies a transition of that property for
+        a longer duration (say, ''transition: 4s text-indent'')
+        and a child element that inherits the parent's value specifies
+        a transition of the same property for a shorter duration
+        (say, ''transition: 1s text-indent'').
+        Without the maintenance of this set of completed transitions,
+        implementations could start additional transitions on the child
+        after the initial 1 second transition on the child completes.
       </p>
 
       <p>
@@ -637,13 +678,33 @@ url: http://dev.w3.org/csswg/css-color-3/#html4; type: value; text: green;
 
       <ol>
       <li>
-        If the element does not have a running transition for the property,
-        the <a>before-change style</a> is different from
-        and can be interpolated with
-        the <a>after-change style</a> for that property,
-        there is a <a>matching transition-property value</a>,
-        and the <a>combined duration</a> is greater than ''0s'',
-        implementations must
+        If all of the following are true:
+        <ul>
+          <li>
+            the element does not have
+            a <a>running transition</a> for the property,
+          </li>
+          <li>
+            the <a>before-change style</a> is different from
+            and can be interpolated with
+            the <a>after-change style</a> for that property,
+          </li>
+          <li>
+            the element does not have a <a>completed transition</a>
+            for the property
+            or the <a>end value</a> of the <a>completed transition</a>
+            is different from the <a>after-change style</a> for the property,
+          </li>
+          <li>
+            there is a <a>matching transition-property value</a>, and
+          </li>
+          <li>
+            the <a>combined duration</a> is greater than ''0s'',
+          </li>
+        </ul>
+        then implementations must
+        remove the <a>completed transition</a> (if present) from the set
+        of completed transitions and
         start a transition whose:
         <ul>
           <li>
@@ -675,49 +736,52 @@ url: http://dev.w3.org/csswg/css-color-3/#html4; type: value; text: green;
         </ul>
       </li>
       <li>
-        If the element has a running transition for the property,
+        If the element has a <a>running transition</a> or
+        <a>completed transition</a> for the property,
         and there is <strong>not</strong>
         a <a>matching transition-property value</a>,
         then implementations must
-        <a>cancel</a> the running transition.
+        <a>cancel</a> the <a>running transition</a>
+        or remove the <a>completed transition</a> from the set of
+        <a title="completed transition">completed transitions</a>.
       </li>
       <li>
-        If the element has a running transition for the property,
+        If the element has a <a>running transition</a> for the property,
         there is a <a>matching transition-property value</a>,
-        and the <a>end value</a> of the running transition is
+        and the <a>end value</a> of the <a>running transition</a> is
         <strong>not</strong> equal to the value of the property in the
         <a>after-change style</a>, then:
         <ol>
           <li>
             If the <a>current value</a> of the property
-            in the running transition
+            in the <a>running transition</a>
             is equal to
             the value of the property in the <a>after-change style</a>,
             or if these two values cannot be interpolated,
             then implementations must
-            <a>cancel</a> the running transition.
+            <a>cancel</a> the <a>running transition</a>.
           </li>
           <li>
             Otherwise, if the <a>combined duration</a> is
             less than or equal to ''0s'',
             then implementations must
-            <a>cancel</a> the running transition.
+            <a>cancel</a> the <a>running transition</a>.
           </li>
           <li>
             Otherwise, if the <a>reversing-adjusted start value</a>
-            of the running transition is the same as the value of
+            of the <a>running transition</a> is the same as the value of
             the property in the <a>after-change style</a>
             <span class="note">(see the
             <a href="#reversing">section on reversing of
             transitions</a> for why these case exists)</span>,
             implementations must
-            <a>cancel</a> the running transition and
+            <a>cancel</a> the <a>running transition</a> and
             start a new transition whose:
             <ul>
               <li>
                 <a>reversing-adjusted start value</a> is
                 the <a>end value</a> of the
-                running transition
+                <a>running transition</a>
                 <span class="note">(Note: This represents the logical start state of
                 the transition, and allows some calculations to ignore that
                 the transition started before that state was reached, which
@@ -766,7 +830,7 @@ url: http://dev.w3.org/csswg/css-color-3/#html4; type: value; text: green;
               <li>
                 <a>start value</a> is
                 the <a>current value</a> of the property
-                in the running transition,
+                in the <a>running transition</a>,
               </li>
               <li>
                 <a>end value</a> is
@@ -777,7 +841,7 @@ url: http://dev.w3.org/csswg/css-color-3/#html4; type: value; text: green;
           </li>
           <li>
             Otherwise, implementations must
-            <a>cancel</a> the running transition
+            <a>cancel</a> the <a>running transition</a>
             and start a new transition whose:
             <ul>
               <li>
@@ -793,7 +857,7 @@ url: http://dev.w3.org/csswg/css-color-3/#html4; type: value; text: green;
               <li>
                 <a>start value</a> is
                 the <a>current value</a> of the property
-                in the running transition,
+                in the <a>running transition</a>,
               </li>
               <li>
                 <a>end value</a> is
@@ -1003,14 +1067,16 @@ url: http://dev.w3.org/csswg/css-color-3/#html4; type: value; text: green;
       <h2 id="complete">Completion of transitions</h2>
 
       <p>
-        Running transitions <dfn id="dfn-complete">complete</dfn>
+        <a title="running transition">Running transitions</a>
+        <dfn id="dfn-complete">complete</dfn>
         at a time that equal to or after their end time,
         but prior to to the first <a>style change event</a>
         whose time is equal to or after their <a>end time</a>.
         When a transition completes,
-        implementations must remove
+        implementations must move
         all transitions that complete at that time
-        from the set of running transitions
+        from the set of <a>running transitions</a>
+        to the set of <a>completed transitions</a>
         and then fire the <a href="#transition-events">events</a>
         for those completions.
         <span class="note">(Note that doing otherwise could allow