[css-transitions-2] Add 'requirements on pending style changes' section

Author: birtles

css-transitions-2/Overview.bs

@@ -207,6 +207,44 @@ elsewhere</a>.
 
 </div>
 
+## Requirements on pending style changes ## {#requirements-on-pending-style-changes}
+
+Various operations may affect the <a lt="computed value">computed values</a> of
+properties on elements. User agents may, as an optimization, defer recomputing
+these values until it becomes necessary.
+However, all operations included in programming interface defined in this
+specification, as well as those operations defined in Web Animations
+[[!WEB-ANIMATIONS]] that may return objects defined by this specification,
+must produce a result consistent with having fully processed any such pending
+changes to computed values.
+
+<div class="note">
+As an example, in the following code fragment, when the specified value of
+<code>elem</code>'s 'opacity' property is updated, a user agent may defer
+recalculating the computed value of the 'animation' property.
+
+The first time this occurs, calling {{Window/getComputedStyle(elt)}} and
+subsequently accessing the <code>opacity</code> property of the result will
+cause the user agent to recompute the value of opacity.
+
+After the 'opacity' property is updated a second time, the
+{{Animatable/getAnimations()}} method is called on <code>elem</code>.
+This method is specified by Web Animations and can return {{CSSTransition}}
+objects as defined in this specification.
+Hence, as result of the requirements in this section, the user agent must apply
+any pending style changes thus generating a new {{CSSTransition}} for the
+'opacity' property before returning its result.
+
+<div><pre class="example lang-javascript">
+elem.style.transition = 'opacity 100s';
+elem.style.opacity = '0';
+window.getComputedStyle(elem).opacity; // 0
+elem.style.opacity = '1';
+elem.getAnimations()[0].transitionProperty // 'opacity'
+</pre></div>
+
+</div>
+
 <h2 id="issues-common">Issues commonly raised as issues with previous levels</h2>
 
 	<p>

css-transitions-2/Overview.html

@@ -180,6 +180,7 @@ <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="cont
      <a href="#interface-dom"><span class="secno">4</span> <span class="content">DOM Interfaces</span></a>
      <ul class="toc">
       <li><a href="#the-CSSTransition-interface"><span class="secno">4.1</span> <span class="content">The CSSTransition interface</span></a>
+      <li><a href="#requirements-on-pending-style-changes"><span class="secno">4.2</span> <span class="content">Requirements on pending style changes</span></a>
      </ul>
     <li><a href="#issues-common"><span class="secno">5</span> <span class="content">Issues commonly raised as issues with previous levels</span></a>
     <li><a href="#issues-spec"><span class="secno">6</span> <span class="content">Issues deferred from previous levels of the spec</span></a>
@@ -358,6 +359,33 @@ <h3 class="heading settled" data-level="4.1" id="the-CSSTransition-interface"><s
 as has been <a href="https://lists.w3.org/Archives/Public/www-style/2011Mar/0729.html">suggested
 elsewhere</a>.</p>
    </div>
+   <h3 class="heading settled" data-level="4.2" id="requirements-on-pending-style-changes"><span class="secno">4.2. </span><span class="content">Requirements on pending style changes</span><a class="self-link" href="#requirements-on-pending-style-changes"></a></h3>
+   <p>Various operations may affect the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value">computed values</a> of
+properties on elements. User agents may, as an optimization, defer recomputing
+these values until it becomes necessary.
+However, all operations included in programming interface defined in this
+specification, as well as those operations defined in Web Animations <a data-link-type="biblio" href="#biblio-web-animations">[WEB-ANIMATIONS]</a> that may return objects defined by this specification,
+must produce a result consistent with having fully processed any such pending
+changes to computed values.</p>
+   <div class="note" role="note">
+     As an example, in the following code fragment, when the specified value of <code>elem</code>’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity">opacity</a> property is updated, a user agent may defer
+recalculating the computed value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation">animation</a> property. 
+    <p>The first time this occurs, calling <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#dom-window-getcomputedstyle">getComputedStyle(elt)</a></code> and
+subsequently accessing the <code>opacity</code> property of the result will
+cause the user agent to recompute the value of opacity.</p>
+    <p>After the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity">opacity</a> property is updated a second time, the <code class="idl"><a data-link-type="idl" href="http://www.w3.org/TR/web-animations/#dom-animatable-getanimations">getAnimations()</a></code> method is called on <code>elem</code>.
+This method is specified by Web Animations and can return <code class="idl"><a data-link-type="idl" href="#csstransition">CSSTransition</a></code> objects as defined in this specification.
+Hence, as result of the requirements in this section, the user agent must apply
+any pending style changes thus generating a new <code class="idl"><a data-link-type="idl" href="#csstransition">CSSTransition</a></code> for the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity">opacity</a> property before returning its result.</p>
+    <div>
+<pre class="example lang-javascript" id="example-e4db8bb0"><a class="self-link" href="#example-e4db8bb0"></a>elem.style.transition = 'opacity 100s';
+elem.style.opacity = '0';
+window.getComputedStyle(elem).opacity; // 0
+elem.style.opacity = '1';
+elem.getAnimations()[0].transitionProperty // 'opacity'
+</pre>
+    </div>
+   </div>
    <h2 class="heading settled" data-level="5" id="issues-common"><span class="secno">5. </span><span class="content">Issues commonly raised as issues with previous levels</span><a class="self-link" href="#issues-common"></a></h2>
    <p> These issues were commonly reported issues
 		with the previous level of the specification. </p>
@@ -522,11 +550,26 @@ <h3 class="no-num heading settled" id="index-defined-here"><span class="content"
   </ul>
   <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
   <ul class="indexlist">
+   <li>
+    <a data-link-type="biblio" href="#biblio-css-animations-1">[css-animations-1]</a> defines the following terms:
+    <ul>
+     <li><a href="https://drafts.csswg.org/css-animations-1/#propdef-animation">animation</a>
+    </ul>
    <li>
     <a data-link-type="biblio" href="#biblio-css-backgrounds-3">[css-backgrounds-3]</a> defines the following terms:
     <ul>
      <li><a href="https://drafts.csswg.org/css-backgrounds-3/#border-left-width">border-left-width</a>
     </ul>
+   <li>
+    <a data-link-type="biblio" href="#biblio-css-cascade-4">[css-cascade-4]</a> defines the following terms:
+    <ul>
+     <li><a href="https://drafts.csswg.org/css-cascade-4/#computed-value">computed value</a>
+    </ul>
+   <li>
+    <a data-link-type="biblio" href="#biblio-css-color-4">[css-color-4]</a> defines the following terms:
+    <ul>
+     <li><a href="https://drafts.csswg.org/css-color-4/#propdef-opacity">opacity</a>
+    </ul>
    <li>
     <a data-link-type="biblio" href="#biblio-css-transitions-1">[css-transitions-1]</a> defines the following terms:
     <ul>
@@ -536,6 +579,11 @@ <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="con
      <li><a href="https://drafts.csswg.org/css-transitions-1/#style-change-event">style change event</a>
      <li><a href="https://drafts.csswg.org/css-transitions-1/#propdef-transition-property">transition-property</a>
     </ul>
+   <li>
+    <a data-link-type="biblio" href="#biblio-cssom-1">[cssom]</a> defines the following terms:
+    <ul>
+     <li><a href="https://drafts.csswg.org/cssom-1/#dom-window-getcomputedstyle">getComputedStyle(elt)</a>
+    </ul>
    <li>
     <a data-link-type="biblio" href="#biblio-dom-ls">[dom-ls]</a> defines the following terms:
     <ul>
@@ -556,6 +604,7 @@ <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="con
      <li><a href="http://www.w3.org/TR/web-animations/#animatable">Animatable</a>
      <li><a href="http://www.w3.org/TR/web-animations/#animationtimeline">AnimationTimeline</a>
      <li><a href="http://www.w3.org/TR/web-animations/#dictdef-keyframeeffectoptions">KeyframeEffectOptions</a>
+     <li><a href="http://www.w3.org/TR/web-animations/#dom-animatable-getanimations">getAnimations()</a>
     </ul>
    <li>
     <a data-link-type="biblio" href="#biblio-webidl">[WebIDL]</a> defines the following terms:
@@ -568,12 +617,20 @@ <h3 class="no-num heading settled" id="normative"><span class="content">Normativ
   <dl>
    <dt id="biblio-webidl"><a class="self-link" href="#biblio-webidl"></a>[WebIDL]
    <dd>Cameron McCormack; Boris Zbarsky. <a href="http://www.w3.org/TR/WebIDL-1/">WebIDL Level 1</a>. 4 August 2015. WD. URL: <a href="http://www.w3.org/TR/WebIDL-1/">http://www.w3.org/TR/WebIDL-1/</a>
+   <dt id="biblio-css-animations-1"><a class="self-link" href="#biblio-css-animations-1"></a>[CSS-ANIMATIONS-1]
+   <dd>CSS Animations Module Level 1 URL: <a href="http://www.w3.org/TR/css3-animations/">http://www.w3.org/TR/css3-animations/</a>
    <dt id="biblio-css-backgrounds-3"><a class="self-link" href="#biblio-css-backgrounds-3"></a>[CSS-BACKGROUNDS-3]
    <dd>CSS Backgrounds and Borders Module Level 3 URL: <a href="http://www.w3.org/TR/css3-background/">http://www.w3.org/TR/css3-background/</a>
+   <dt id="biblio-css-cascade-4"><a class="self-link" href="#biblio-css-cascade-4"></a>[CSS-CASCADE-4]
+   <dd>Elika Etemad; Tab Atkins Jr.. <a href="http://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 8 September 2015. WD. URL: <a href="http://www.w3.org/TR/css-cascade-4/">http://www.w3.org/TR/css-cascade-4/</a>
+   <dt id="biblio-css-color-4"><a class="self-link" href="#biblio-css-color-4"></a>[CSS-COLOR-4]
+   <dd>CSS Color Module Level 4 URL: <a href="https://drafts.csswg.org/css-color-4/">https://drafts.csswg.org/css-color-4/</a>
    <dt id="biblio-css-transitions-1"><a class="self-link" href="#biblio-css-transitions-1"></a>[CSS-TRANSITIONS-1]
    <dd>CSS Transitions Module Level 1 URL: <a href="http://www.w3.org/TR/css3-transitions/">http://www.w3.org/TR/css3-transitions/</a>
    <dt id="biblio-css3-transitions"><a class="self-link" href="#biblio-css3-transitions"></a>[CSS3-TRANSITIONS]
    <dd>Dean Jackson; et al. <a href="http://www.w3.org/TR/css3-transitions/">CSS Transitions</a>. 19 November 2013. WD. URL: <a href="http://www.w3.org/TR/css3-transitions/">http://www.w3.org/TR/css3-transitions/</a>
+   <dt id="biblio-cssom"><a class="self-link" href="#biblio-cssom"></a>[CSSOM]
+   <dd>Simon Pieters; Glenn Adams. <a href="http://www.w3.org/TR/cssom/">CSS Object Model (CSSOM)</a>. 5 December 2013. WD. URL: <a href="http://www.w3.org/TR/cssom/">http://www.w3.org/TR/cssom/</a>
    <dt id="biblio-dom-ls"><a class="self-link" href="#biblio-dom-ls"></a>[DOM-LS]
    <dd>Document Object Model URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
    <dt id="biblio-rfc2119"><a class="self-link" href="#biblio-rfc2119"></a>[RFC2119]