Merge branch 'master' of github.com:w3c/csswg-drafts

svgeesus · svgeesus · commit 8bd3b4a2f3d3 · 2020-03-04T11:46:19.000-05:00
diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs
@@ -102,9 +102,6 @@ The <dfn>owning element</dfn> of an animation refers to the element or
 pseudo-element to which the 'animation-name' property was applied that generated
 the animation.
 
-If an animation was generated directly by script (e.g. using
-the {{CSSAnimation}} constructor) then it has no <a>owning element</a>.
-
 If an animation generated using the markup defined in this specification is
 later disassociated from that markup by an update to the computed value of the
 'animation-name' property on the <a>owning element</a>, the animation is
@@ -147,9 +144,9 @@ animation.effect = null;
 
 ## Animation composite order ## {#animation-composite-order}
 
-<a spec='web-animations'>Animations</a> generated from the markup or interfaces
-(e.g. the {{CSSAnimation}} constructor) defined in this specification have an
-<a>animation class</a> of &lsquo;CSS Animation&rsquo;.
+<a spec='web-animations'>Animations</a> generated from the markup defined in
+this specification have an <a>animation class</a> of &lsquo;CSS
+Animation&rsquo;.
 
 CSS Animations <em>with</em> an <a>owning element</a> have a <em>later</em>
 composite order than CSS Transitions but an <em>earlier</em> composite order
@@ -198,9 +195,6 @@ Note, this behavior relies on the fact that disassociating an animation
 from its <a>owning element</a> always causes it to enter (or remain) in the
 <a>idle play state</a>.
 
-CSS Animations created using the {{CSSAnimation}} constructor are appended
-to the <a>global animation list</a> at the moment they are constructed.
-
 # Keyframes # {#keyframes}
 
 ## The 'animation-play-state' property ## {#animation-play-state}
@@ -550,47 +544,7 @@ interface CSSAnimation : Animation {
 ::  The key used to find matching keyframes rules that define <a>target
     effect</a> at the point when the animation was created.
     This is the value of the 'animation-name' property that caused this
-    object to be generated or, if this object was generated using the
-    programming interface, the <code>animationName</code> argument
-    that was passed to the {{CSSAnimation}} constructor.
-
-<div class="issue">
-
-We need to define a constructor for {{CSSAnimation}}.
-Perhaps something like the following:
-
-<pre class="idl">
-partial interface CSSAnimation {
-  constructor(Animatable? target,
-              CSSOMString animationName,
-              optional (unrestricted double or KeyframeEffectOptions) options,
-              optional CSSOMString defaultEasing = "ease");
-  constructor(Animatable? target,
-              CSSOMString animationName,
-              (unrestricted double or KeyframeEffectOptions) options,
-              CSSOMString defaultEasing,
-              AnimationTimeline? timeline);
-};
-</pre>
-
-The difficulty is with liveness. The most useful and least magical
-(but most complicated) approach is to define a subclass of
-{{KeyframeEffectReadOnly}} that has the special behavior of tracking changes
-to all @keyframes rules that match the supplied name and automatically
-updating the set of keyframes returned by
-{{KeyframeEffectReadOnly/getFrames()}} after filling-in the default easing.
-
-Something like,
-
-<pre class="idl">
-interface CSSKeyframeEffectReadOnly : KeyframeEffectReadOnly {
-  constructor(CSSOMString keyframesName, CSSOMString defaultEasing);
-  readonly attribute CSSOMString keyframesName;
-  readonly attribute CSSOMString defaultEasing;
-};
-</pre>
-
-</div>
+    object to be generated.
 
 ## Requirements on pending style changes ## {#requirements-on-pending-style-changes}
 
@@ -599,9 +553,9 @@ 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.
+[[!WEB-ANIMATIONS]] that may return objects or animation state 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 style of
@@ -620,6 +574,16 @@ elem.style.animation = 'fadeOut 1s';
 elem.getAnimations()[0].pause();
 </pre></div>
 
+Similarly, reading {{Animation/playState}} may depend on pending style
+changes.
+
+<div><pre class="example lang-javascript">
+elem.style.animation = 'fadeOut 1s paused';
+const anim = elem.getAnimations()[0];
+elem.style.animationPlayState = 'running';
+console.log(anim.playState); // Should be 'running'.
+</pre></div>
+
 </div>
 
 
diff --git a/css-text-3/Overview.bs b/css-text-3/Overview.bs
@@ -1171,7 +1171,7 @@ Text Processing</h3>
 
     <p class="note">
       Note: The set of characters considered <a>document white space</a> (part of the document content)
-      and that considered syntactic white space (part of the CSS syntax)
+      and those considered syntactic white space (part of the CSS syntax)
       are not necessarily identical.
       However, since both include spaces (U+0020), tabs (U+0009), and line feeds (U+000A)
       most authors won't notice any differences.
diff --git a/css-transitions-2/Overview.bs b/css-transitions-2/Overview.bs
@@ -25,19 +25,22 @@ Level: 2
 Group: csswg
 ED: https://drafts.csswg.org/css-transitions-2/
 Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
+Editor: Brian Birtles, Invited Expert, brian@birchill.co.jp, w3cid 43194
 Issue Tracking: Bugzilla bugs for all levels https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Transitions&amp;resolution=---
 Abstract: CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
 Ignored Terms: translate, rotate, scale
 </pre>
 <pre class="anchors">
-urlPrefix: https://w3c.github.io/web-animations/; type: interface; spec: web-animations
+urlPrefix: https://drafts.csswg.org/web-animations/; type: interface; spec: web-animations
     text: Animation
-urlPrefix: https://w3c.github.io/web-animations/; type: dfn; spec: web-animations
+urlPrefix: https://drafts.csswg.org/web-animations/; type: dfn; spec: web-animations
     text: active duration
     text: active time
     text: animation
+    text: animation effect
     text: animation class
     text: animation playback rate
+    text: cancel an animation
     text: current iteration
     text: current time
     text: fill mode
@@ -51,9 +54,12 @@ urlPrefix: https://w3c.github.io/web-animations/; type: dfn; spec: web-animation
     text: target effect
     text: target effect end
     text: unresolved
+urlPrefix: https://html.spec.whatwg.org/multipage/browsers.html; type: dfn; spec: html
+    text: being rendered
 </pre>
 <pre class=link-defaults>
 spec:css-transitions-1; type:value; text:all
+spec:css-transitions-1; type:dfn; text:cancel
 </pre>
 
 <h2 id="delta">Delta specification</h2>
@@ -63,58 +69,92 @@ spec:css-transitions-1; type:value; text:all
 	Once the Level 1 specification is closer to complete, it will be merged
 	with the additions here into a complete level 2 specification.</p>
 
-# Starting of transitions # {#starting}
 
-Associated with each top-level browsing context is a <dfn>current transition
-generation</dfn> that is incremented on each <a>style change event</a>.
-
-Each time a new transition is generated, the current value of the (already
-incremented) <a>current transition generation</a> is stored as the
-transition's <dfn>transition generation</dfn>.
+# Transitions # {#transitions}
 
-## The transition property name ## {#transition-property-name}
+## The 'transition-property' Property ## {#transition-name-property}
 
 Although the 'transition-property' may specify shorthand properties and the
 ''all'' keyword, individual transitions are generated for each longhand
 sub-property that is animatable. The <dfn>expanded transition property
 name</dfn> of a transition is the name of the longhand sub-property for which
 the transition was generated (e.g. 'border-left-width').
 
-## The transition timing function ## {#transition-timing-function}
+## The 'transition-duration' Property ## {#transition-duration-property}
+
+The 'transition-duration' property specifies the [=iteration duration=]
+of the transition's associated [=animation effect=].
 
-When creating a {{KeyframeEffect}} for a transition, the effect's {{EffectTiming/easing}}
-option is set to the value of the matching 'transition-timing-function' property,
-which must be used by {{AnimationEffect/getComputedTiming()}}.
+## The 'transition-timing-function' Property ## {#transition-timing-function-property}
+
+The 'transition-timing-function' property specifies the [=timing function=]
+of the transition's associated [=animation effect=]
+(see [[web-animations-1#time-transformations]]).
 
 Note: Unlike CSS animations, the timing function for CSS transitions applies to
 the animation effect as opposed to the individual keyframes since this allows
 it to be reflected in the <a>transformed progress</a> as used when calculating
 the reversing shortening factor.
 
-## Owning element ## {#owning-element-section}
+## The 'transition-delay' Property ## {#transition-delay-property}
+
+The 'transition-delay' property specifies the [=start delay=]
+of the transition's associated [=animation effect=].
+
+
+# Starting of transitions # {#starting}
 
 The <dfn>owning element</dfn> of a transition refers to the element or
 pseudo-element to which the 'transition-property' property was applied that
 generated the animation.
+A transition may be disassociated from its [=owning element=]
+such that it has no [=owning element=].
+
+The set of [=running transitions=] includes
+only those transitions that have an [=owning element=].
+
+Whenever an implementation is required to [=cancel=] a transition,
+it must disassociate the transition from its [=owning element=]
+and run the procedure to [=cancel an animation=] on the transition.
+
+Although not explicitly defined by level 1 of this specification,
+in addition to [=cancel|canceling=] transitions on elements that
+are no longer [=connected=],
+implementations must also [=cancel=] any running transitions
+on elements that are no longer [=being rendered=] and
+remove transitions on them from the set of [=completed transitions=].
+
+Note that calling the {{Animation/cancel()}} method
+on the {{CSSTransition}} object representing a [=running transition=]
+does <em>not</em> cause the transition to be disassociated
+from its [=owning element=].
+
+## Faster reversing of interrupted transitions ## {#reversing}
+
+The [=reversing shortening factor=] and [=reversing-adjusted start value=]
+associated with a transition in order to produce correct reverse behavior,
+are associated with the transition itself and not, for example,
+its [=animation effect=].
+As a result, transitions will use these same values when producing a
+reversed transition, even if the transition's associated [=animation effect=]
+has been updated or replaced using the Web Animations API [[WEB-ANIMATIONS]].
 
-If a transition was generated directly by script (e.g. using the
-{{CSSTransition}} constructor) then it has no <a>owning element</a>.
+## The current transition generation ## {#current-transition-generation-section}
 
-If a transition generated using the markup defined in this specification is
-later disassociated from that markup because it is cancelled or replaced by
-a newer transition, the animation is disassociated from its <a>owning
-element</a> (that is, it has no <a>owning element</a> from that point
-forwards).
+Associated with each top-level browsing context is a <dfn>current transition
+generation</dfn> that is incremented on each <a>style change event</a>.
+
+Each time a new transition is generated, the current value of the (already
+incremented) <a>current transition generation</a> is stored as the
+transition's <dfn>transition generation</dfn>.
 
-Issue: Define the above more precisely once we rewrite firing of transitions
-in terms of Web Animations concepts (specifically when we spell out when we
-cancel an animation).
+# Application of transitions # {#application}
 
 ## Animation composite order ## {#animation-composite-order}
 
-<a spec='web-animations'>Animations</a> generated from the markup and
-interfaces (e.g. the {{CSSTransition}} constructor) defined in this
-specification have an <a>animation class</a> of &lsquo;CSS Transition&rsquo;.
+<a spec='web-animations'>Animations</a> generated from the markup defined in
+this specification have an <a>animation class</a> of &lsquo;CSS
+Transition&rsquo;.
 
 CSS Transitions have an <em>earlier</em> composite order that CSS Animations
 and animations without a specific <a>animation class</a>.
@@ -165,8 +205,16 @@ Note, this behavior relies on the fact that disassociating a transition
 from its <a>owning element</a> always causes it to enter (or remain) in the
 <a>idle play state</a>.
 
-Transitions created using the {{CSSTransition}} constructor are appended
-to the <a>global animation list</a> at the moment they are constructed.
+## Animation cascade level ## {#cascade-level}
+
+Animations with an [=animation class=] of &lsquo;CSS Transition&rsquo;
+that have an [=owning element=]
+are applied to the &lsquo;Transitions declaration&rsquo; level
+of the CSS cascade.
+All other animations generated by the markup defined in this specification,
+including animations that no longer have an [=owning element=],
+are applied to the &lsquo;Animation declarations&rsquo; level of the cascade.
+(See [[web-animations-1#applying-the-composited-result]].)
 
 # Transition Events # {#transition-events}
 
@@ -362,53 +410,6 @@ interface CSSTransition : Animation {
 :   <dfn attribute for=CSSTransition>transitionProperty</dfn>
 ::  The <a>expanded transition property name</a> of this transition.
 
-<div class="issue">
-
-This interface needs a constructor. Perhaps something like the following,
-
-<pre class="idl">
-partial interface CSSTransition {
-  constructor(Animatable? target,
-              CSSOMString transitionProperty,
-              any transitionValue,
-              optional (unrestricted double or KeyframeEffectOptions) options);
-  constructor(Animatable? target,
-              CSSOMString transitionProperty,
-              any transitionValue,
-              (unrestricted double or KeyframeEffectOptions) options,
-              AnimationTimeline? timeline);
-};
-</pre>
-
-Using <code>any</code> as the type for <code>transitionValue</code> would allow
-the following usage:
-
-<pre class="example lang-javascript">
-  var transition = new CSSTransition(elem, 'opacity', 1, 2000);
-  transition.play();
-</pre>
-
-The above example, however, is <em>not</em> equivalent to triggering a
-transition. It has the following differences:
-
-*   It does not update the specified style.
-*   It would not cancel any existing transition on the given property unless
-    we add special wording to that effect.
-*   It would exhibit different composite order to a regular transition
-    (this should be easily fixed, however).
-*   It has been suggested that <a
-    href="https://github.com/w3c/web-animations/issues/62#issuecomment-117357703">script-generated
-    animations should not apply to the transition level of the cascade</a>.
-
-It is unclear how much we should extend the {{CSSTransition}} constructor to
-overcome the above limitations so that it can be used to generate transitions
-programmatically, or whether we should introduce a separate helper method such
-as has been <a
-href="https://lists.w3.org/Archives/Public/www-style/2011Mar/0729.html">suggested
-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
@@ -423,7 +424,7 @@ 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.
+recalculating the computed value of the 'opacity' property.
 
 The first time this occurs, calling {{Window/getComputedStyle(elt)}} and
 subsequently accessing the <code>opacity</code> property of the result will
