Mercurial > drafts / changeset

     1.1 --- a/css-transitions/Overview.html	Tue Sep 10 11:12:22 2013 +0200
     1.2 +++ b/css-transitions/Overview.html	Tue Sep 10 11:30:26 2013 +0200
     1.3 @@ -10,7 +10,7 @@
     1.4     rel=dcterms.rights>
     1.5    <meta content="CSS Transitions" name=dcterms.title>
     1.6    <meta content=text name=dcterms.type>
     1.7 -  <meta content=2013-09-06 name=dcterms.date>
     1.8 +  <meta content=2013-09-10 name=dcterms.date>
     1.9    <meta content="L. David Baron" name=dcterms.creator>
    1.10    <meta content=W3C name=dcterms.publisher>
    1.11    <meta content="http://dev.w3.org/csswg/css3-transitions/"
    1.12 @@ -40,7 +40,7 @@
    1.13  
    1.14     <h1>CSS Transitions</h1>
    1.15  
    1.16 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 September
    1.17 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 September
    1.18      2013</h2>
    1.19  
    1.20     <dl>
    1.21 @@ -935,11 +935,60 @@
    1.22      class=css>blue</code>’ takes 1 second.
    1.23    </div>
    1.24  
    1.25 -  <p> When the computed value of a property changes, implementations must
    1.26 -   start transitions based on the relevant item (see <a
    1.27 -   href="#transition-property">the definition of ‘<code
    1.28 -   class=property>transition-property</code>’</a>) in the computed value of
    1.29 -   ‘<a href="#transition-property"><code
    1.30 +  <p> Various things can cause the computed style of an element to change, or
    1.31 +   for an element to start or stop having computed style. (For the purposes
    1.32 +   of this specification, an element has computed style when it is in the
    1.33 +   document tree, and does not have computed style when it is not in the
    1.34 +   document tree.) These include insertion and removal of elements from the
    1.35 +   document tree (which both changes whether those elements have computed
    1.36 +   styles and can change the styles of other elements through selector
    1.37 +   matching), changes to the document tree that cause changes to which
    1.38 +   selectors match elements, changes to style sheets or style attributes, and
    1.39 +   other things. This specification does not define when computed styles are
    1.40 +   updated. However, when an implementation updates the computed style for an
    1.41 +   element to reflect one of these changes, it must update the computed style
    1.42 +   for all elements to reflect all of these changes at the same time (or at
    1.43 +   least it must be undetectable that it was done at a different time). This
    1.44 +   processing of a set of simultaneous style changes is called a <dfn
    1.45 +   id=style-change-event>style change event</dfn>. (Implementations typically
    1.46 +   have a <a href="#style-change-event">style change event</a> to correspond
    1.47 +   with their desired screen refresh rate, and when up-to-date computed style
    1.48 +   is needed for a script API that depends on it.)
    1.49 +
    1.50 +  <p> Since this specification does not define when a <a
    1.51 +   href="#style-change-event">style change event</a> occurs, and thus what
    1.52 +   changes to computed values are considered simultaneous, authors should be
    1.53 +   aware that changing any of the transition properties a small amount of
    1.54 +   time after making a change that might transition can result in behavior
    1.55 +   that varies between implementations, since the changes might be considered
    1.56 +   simultaneous in some implementations but not others.
    1.57 +
    1.58 +  <p> When a <a href="#style-change-event">style change event</a> occurs,
    1.59 +   implementations must start transitions based on the computed styles that
    1.60 +   changed in that event. If an element does not have a computed style either
    1.61 +   before or after the style change event, then transitions are not started
    1.62 +   for that element in that style change event. Otherwise, define the
    1.63 +   <span>before-change style</span> as the computed style for the element as
    1.64 +   of the previous <a href="#style-change-event">style change event</a>,
    1.65 +   except with any styles derived from declarative animations such as CSS
    1.66 +   Transitions, CSS Animations (<a href="#CSS3-ANIMATIONS"
    1.67 +   rel=biblioentry>[CSS3-ANIMATIONS]<!--{{CSS3-ANIMATIONS}}--></a>), and SMIL
    1.68 +   Animations (<a href="#SMIL-ANIMATION"
    1.69 +   rel=biblioentry>[SMIL-ANIMATION]<!--{{SMIL-ANIMATION}}--></a>, <a
    1.70 +   href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>) updated to the
    1.71 +   current time. Likewise, define the <span>after-change style</span> as the
    1.72 +   computed style for the element based on the information known at the start
    1.73 +   of that <a href="#style-change-event">style change event</a>, in other
    1.74 +   words, excluding any changes resulting from CSS Transitions that start
    1.75 +   during that <a href="#style-change-event">style change event</a>.
    1.76 +
    1.77 +  <p> For each element with a <span>before-change style</span> and an
    1.78 +   <span>after-change style</span>, and each property (other than shorthands)
    1.79 +   for which the <span>before-change style</span> is different from the
    1.80 +   <span>after-change style</span>, implementations must start transitions
    1.81 +   based on the relevant item (see <a href="#transition-property">the
    1.82 +   definition of ‘<code class=property>transition-property</code>’</a>)
    1.83 +   in the computed value of ‘<a href="#transition-property"><code
    1.84     class=property>transition-property</code></a>’. Corresponding to this
    1.85     item there are computed values of ‘<a href="#transition-duration"><code
    1.86     class=property>transition-duration</code></a>’ and ‘<a
    1.87 @@ -960,13 +1009,6 @@
    1.88     class=property>transition-timing-function</code></a>’; in other cases
    1.89     transitions do not occur.
    1.90  
    1.91 -  <p> Since this specification does not define when computed values change,
    1.92 -   and thus what changes to computed values are considered simultaneous,
    1.93 -   authors should be aware that changing any of the transition properties a
    1.94 -   small amount of time after making a change that might transition can
    1.95 -   result in behavior that varies between implementations, since the changes
    1.96 -   might be considered simultaneous in some implementations but not others.
    1.97 -
    1.98    <p> Once the transition of a property has started, it must continue running
    1.99     based on the original timing function, duration, and delay, even if the
   1.100     ‘<a href="#transition-timing-function"><code
   1.101 @@ -1645,6 +1687,14 @@
   1.102  
   1.103     <li>Define initial values of event properties, using initializers in <a
   1.104      href="#TransitionEventInit">TransitionEventInit</a>.
   1.105 +
   1.106 +   <li>Define the model for starting of transitions and their interaction
   1.107 +    with other animations more precisely:
   1.108 +    <ul>
   1.109 +     <li>Define the <span>before-change style</span> and <span>after-change
   1.110 +      style</span> used for the style comparison, using the new concept of a
   1.111 +      <a href="#style-change-event">style change event</a>.
   1.112 +    </ul>
   1.113    </ul>
   1.114  
   1.115    <p>For more details on these changes, see the version control change logs,
   1.116 @@ -1696,6 +1746,16 @@
   1.117     </dd>
   1.118     <!---->
   1.119  
   1.120 +   <dt id=CSS3-ANIMATIONS>[CSS3-ANIMATIONS]
   1.121 +
   1.122 +   <dd>Dean Jackson; et al. <a
   1.123 +    href="http://www.w3.org/TR/2013/WD-css3-animations-20130219/"><cite>CSS
   1.124 +    Animations.</cite></a> 19 February 2013. W3C Working Draft. (Work in
   1.125 +    progress.) URL: <a
   1.126 +    href="http://www.w3.org/TR/2013/WD-css3-animations-20130219/">http://www.w3.org/TR/2013/WD-css3-animations-20130219/</a>
   1.127 +   </dd>
   1.128 +   <!---->
   1.129 +
   1.130     <dt id=CSS3-IMAGES>[CSS3-IMAGES]
   1.131  
   1.132     <dd>Elika J. Etemad; Tab Atkins Jr. <a
   1.133 @@ -1715,6 +1775,25 @@
   1.134     </dd>
   1.135     <!---->
   1.136  
   1.137 +   <dt id=SMIL-ANIMATION>[SMIL-ANIMATION]
   1.138 +
   1.139 +   <dd>Patrick Schmitz; Aaron Cohen. <a
   1.140 +    href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL
   1.141 +    Animation.</cite></a> 4 September 2001. W3C Recommendation. URL: <a
   1.142 +    href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/">http://www.w3.org/TR/2001/REC-smil-animation-20010904/</a>
   1.143 +   </dd>
   1.144 +   <!---->
   1.145 +
   1.146 +   <dt id=SVG11>[SVG11]
   1.147 +
   1.148 +   <dd>Erik Dahlström; et al. <a
   1.149 +    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
   1.150 +    Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
   1.151 +    W3C Recommendation. URL: <a
   1.152 +    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
   1.153 +   </dd>
   1.154 +   <!---->
   1.155 +
   1.156     <dt id=WCAG20>[WCAG20]
   1.157  
   1.158     <dd>Ben Caldwell; et al. <a
   1.159 @@ -1848,6 +1927,9 @@
   1.160      href="#single-transition-timing-function"
   1.161      title="section 2.3."><strong>2.3.</strong></a>
   1.162  
   1.163 +   <li>style change event, <a href="#style-change-event"
   1.164 +    title="section 3."><strong>3.</strong></a>
   1.165 +
   1.166     <li>transition, <a href="#transition"
   1.167      title="section 2.5."><strong>2.5.</strong></a>
   1.168  

     2.1 --- a/css-transitions/Overview.src.html	Tue Sep 10 11:12:22 2013 +0200
     2.2 +++ b/css-transitions/Overview.src.html	Tue Sep 10 11:30:26 2013 +0200
     2.3 @@ -912,8 +912,79 @@
     2.4        </div>
     2.5  
     2.6        <p>
     2.7 -        When the computed value of a property changes, implementations
     2.8 -        must start transitions based on the relevant item (see <a
     2.9 +        Various things can cause the computed style of an element to change,
    2.10 +        or for an element to start or stop having computed style.
    2.11 +        (For the purposes of this specification,
    2.12 +        an element has computed style when it is in the document tree,
    2.13 +        and does not have computed style when it is not in the document tree.)
    2.14 +        These include
    2.15 +        insertion and removal of elements from the document tree
    2.16 +        (which both changes whether those elements have computed styles and
    2.17 +        can change the styles of other elements through selector matching),
    2.18 +        changes to the document tree that cause
    2.19 +        changes to which selectors match elements,
    2.20 +        changes to style sheets or style attributes,
    2.21 +        and other things.
    2.22 +        This specification does not define when computed styles are updated.
    2.23 +        However,
    2.24 +        when an implementation updates the computed style for an element
    2.25 +        to reflect one of these changes,
    2.26 +        it must update the computed style for all elements to reflect all
    2.27 +        of these changes at the same time
    2.28 +        (or at least it must be undetectable that it was done at a
    2.29 +        different time).
    2.30 +        This processing of a set of simultaneous style changes is called a
    2.31 +        <dfn>style change event</dfn>.
    2.32 +        (Implementations typically have a <span>style change event</span> to
    2.33 +        correspond with their desired screen refresh rate,
    2.34 +        and when up-to-date computed style is needed
    2.35 +        for a script API that depends on it.)
    2.36 +      </p>
    2.37 +
    2.38 +      <p>
    2.39 +        Since this specification does not define
    2.40 +        when a <span>style change event</span> occurs,
    2.41 +        and thus what changes to computed values are considered simultaneous,
    2.42 +        authors should be aware that changing any of the transition
    2.43 +        properties a small amount of time after making a change that
    2.44 +        might transition can result in behavior that varies between
    2.45 +        implementations, since the changes might be considered
    2.46 +        simultaneous in some implementations but not others.
    2.47 +      </p>
    2.48 +
    2.49 +      <p>
    2.50 +        When a <span>style change event</span> occurs,
    2.51 +        implementations must start transitions based on
    2.52 +        the computed styles that changed in that event.
    2.53 +        If an element does not have a computed style
    2.54 +        either before or after the style change event,
    2.55 +        then transitions are not started for that element
    2.56 +        in that style change event.
    2.57 +        Otherwise,
    2.58 +        define the <span>before-change style</span> as
    2.59 +        the computed style for the element as of
    2.60 +        the previous <span>style change event</span>,
    2.61 +        except with any styles derived from declarative
    2.62 +        animations such as CSS Transitions, CSS Animations
    2.63 +        ([[CSS3-ANIMATIONS]]),
    2.64 +        and SMIL Animations ([[SMIL-ANIMATION]], [[SVG11]])
    2.65 +        updated to the current time.
    2.66 +        Likewise, define the <span>after-change style</span> as
    2.67 +        the computed style for the element based on the information
    2.68 +        known at the start of that <span>style change event</span>,
    2.69 +        in other words,
    2.70 +        excluding any changes resulting from CSS Transitions
    2.71 +        that start during that <span>style change event</span>.
    2.72 +      </p>
    2.73 +
    2.74 +      <p>
    2.75 +        For each element with a <span>before-change style</span> and
    2.76 +        an <span>after-change style</span>,
    2.77 +        and each property (other than shorthands) for which
    2.78 +        the <span>before-change style</span> is different from
    2.79 +        the <span>after-change style</span>,
    2.80 +        implementations must
    2.81 +        start transitions based on the relevant item (see <a
    2.82          href="#transition-property">the definition of
    2.83          'transition-property'</a>) in the computed value of
    2.84          'transition-property'.
    2.85 @@ -930,17 +1001,6 @@
    2.86        </p>
    2.87  
    2.88        <p>
    2.89 -        Since this specification does not define
    2.90 -        when computed values change, and thus what changes to
    2.91 -        computed values are considered simultaneous,
    2.92 -        authors should be aware that changing any of the transition
    2.93 -        properties a small amount of time after making a change that
    2.94 -        might transition can result in behavior that varies between
    2.95 -        implementations, since the changes might be considered
    2.96 -        simultaneous in some implementations but not others.
    2.97 -      </p>
    2.98 -
    2.99 -      <p>
   2.100          Once the transition of a property has started, it must continue
   2.101          running based on the original timing function, duration, and
   2.102          delay, even if the 'transition-timing-function',
   2.103 @@ -1558,6 +1618,10 @@
   2.104    <li>Make the behavior of simultaneous changes of 'transition-*' properties and transitionable properties even clearer.
   2.105    <li>Computed Value line for shorthands should say "see individual properties".
   2.106    <li>Define initial values of event properties,  using initializers in <span>TransitionEventInit</span>.
   2.107 +  <li>Define the model for starting of transitions and their interaction with other animations more precisely:
   2.108 +    <ul>
   2.109 +      <li>Define the <span>before-change style</span> and <span>after-change style</span> used for the style comparison, using the new concept of a <span>style change event</span>.
   2.110 +    </ul>
   2.111  </ul>
   2.112  
   2.113  <p>For more details on these changes, see the version control change logs, which are split in two parts because of a file renaming: <a href="https://dvcs.w3.org/hg/csswg/log/tip/css-transitions/Overview.src.html">change log since 2013 March 28</a>, <a href="https://dvcs.w3.org/hg/csswg/log/tip/css3-transitions/Overview.src.html">change log before 2013 March 28</a>.