From 7c47a254a78faa18bfc7e669e36621110a9ed40b Mon Sep 17 00:00:00 2001 From: Brian Birtles Date: Tue, 16 Apr 2019 16:26:15 +0900 Subject: [PATCH 1/9] [web-animations-1] Define animation replacing behavior This fixes #3689. --- web-animations-1/Overview.bs | 342 +++++++++++++++++++++++++++++++++-- 1 file changed, 323 insertions(+), 19 deletions(-) diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs index ad0f08d83a9..e668a120cd9 100644 --- a/web-animations-1/Overview.bs +++ b/web-animations-1/Overview.bs @@ -177,10 +177,16 @@ urlPrefix: https://drafts.csswg.org/cssom/; type: dfn; spec: cssom urlPrefix: https://drafts.csswg.org/css-transitions/; type: dfn; spec: css-transitions-1 text: events from CSS transitions; url: transition-events text: transitionend +urlPrefix: https://drafts.csswg.org/css-transitions-2/; type: dfn; spec: css-transitions-2 + text: owning element (transition); url: owning-element urlPrefix: https://drafts.csswg.org/css-animations/; type: dfn; spec: css-animations-1 text: events from CSS animations; url: events +urlPrefix: https://drafts.csswg.org/css-animations-2/; type: dfn; spec: css-animations-2 + text: owning element (animation); url: owning-element urlPrefix: https://drafts.csswg.org/css-writing-modes-4/; type: dfn; spec: css-writing-modes-4 text: equivalent physical property; url: logical-to-physical +urlPrefix: https://drafts.csswg.org/css-style-attr/; type: dfn; spec: css-style-attr + text: style attribute @@ -592,6 +602,11 @@ a document's load event. A timeline is considered to be inactive when its time value is unresolved. +A timeline is monotonically increasing if its +reported [=timeline current time|current time=] is always greater than or equal +than its previously reported [=timeline current time|current time=]. + Specific types of [=timelines=] may define a procedure to convert a timeline time to an origin-relative time for [=time value=] |time|, so that the [=time @@ -621,6 +636,8 @@ a {{Document}} |doc| at timestamp |now|, run these steps: +1. [=Remove replaced animations=] for |doc|. + 1. [=Perform a microtask checkpoint=]. Note: This is to ensure that any microtasks queued up as a result of @@ -681,6 +698,9 @@ Issue(2079): There must be a better term than “origin time”— Prior to establishing the [=time origin=] for its associated document, a [=document timeline=] is inactive. +After a [=document timeline=] becomes [=inactive timeline|active=], it is +[=monotonically increasing=]. + A document timeline that is associated with a {{Document}} which is not an active document is also considered to be inactive. @@ -2057,6 +2077,9 @@ is absent or has no observable result. :: Queued whenever an animation enters the idle play state from another state. Creating a new animation that is initially idle does not generate a new cancel event. +: replace +:: Queued whenever an animation is automatically removed. + See [[#replacing-animations]].

Animation effects

@@ -3682,10 +3705,132 @@ as follows: href="#the-effect-value-of-a-keyframe-animation-effect" section>. +

Replacing animations

+ +
This section is non-normative + +Using the programming interface defined in this specification, it is possible to +repeatedly trigger new animations that contribute to an element's animated style +indefinitely. + +For example, consider the following code: + +
+elem.addEventListener('mousemove', evt => {
+  circle.animate(
+    { transform: `translate(${evt.clientX}, ${evt.clientY})` },
+    { duration: 500, fill: 'forwards' }
+  );
+});
+
+ +This will generate a new forwards-filling animation each time the mouse is +moved, quickly producing hundreds, even thousands of forwards-filling +animations. + +If the user agent is required to retain all such animations, +the list of animations would grow in an unbounded fashion, +producing a memory leak. + +This section defines a mechanism that causes overridden animations to be +automatically removed unless the author explicitly requests they be retained. + +
+ +

Replace state

+ +An [=animation=] maintains a replace state that may be one of the +following values: + +* ok +* removed +* persisted + +The initial value of an [=animation=]'s [=replace state=] is +[=ok replace state|ok=]. + +The [=animation effects=] of an [=animation=] +whose [=replace state=] is [=removed replace state|removed=] +are not included in the [=effect stacks=] of their [=target properties=]. + +

Performing replacement

+ +An [=animation=] is +replaceable +if all of the following conditions are true: + +* The existence of the [=animation=] is not prescribed by markup. + That is, it is not + a CSS animation with an [=owning element (animation)|owning element=], or + a CSS transition with an [=owning element (transition)|owning element=]. +* The [=animation=]'s [=play state=] is [=finished play state|finished=]. +* The [=animation=]'s [=replace state=] is not + [=removed replace state|removed=]. +* The [=animation=] is associated with a [=monotonically increasing=] + [=timeline=]. +* The [=animation=] has an associated [=target effect=]. +* The [=target effect=] associated with the [=animation=] is [=in effect=]. +* The [=target effect=] has an associated [=target element=]. + +When asked to remove replaced animations +for a {{Document}}, |doc|, +then for every [=animation=], |animation|, that: + +* has an [=associated with an animation|associated=] [=animation effect=] + whose [=target element=] is a [=descendant=] of |doc|, and + +* is [=replaceable=], and + +* has a [=replace state=] of [=ok replace state|ok=], and + +* for which there exists for each [=target property=] + of every [=animation effect=] + [=associated with an animation|associated=] with |animation|, + an [=animation effect=] associated with a [=replaceable=] [=animation=] + with a higher [=composite order=] than |animation| + that includes the same [=target property=]. + +perform the following steps: + +1. Set |animation|'s [=replace state=] to [=removed replace state|removed=]. + +1. Create an {{AnimationPlaybackEvent}}, + |replaceEvent|. + +1. Set |replaceEvent|'s {{Event/type}} attribute to + replace. + +1. Set |replaceEvent|'s {{AnimationPlaybackEvent/currentTime}} attribute + to the [=current time=] of |animation|. + +1. Set |replaceEvent|'s {{AnimationPlaybackEvent/timelineTime}} + attribute to the current time + of the [=timeline=] with which |animation| is associated. + +1. If |animation| has a [=document for timing=], then append + |replaceEvent| to its [=document for timing=]'s + [=pending animation event queue=] along with its target, |animation|. + For the [=scheduled event time=], use the result of converting + |animation|'s [=target effect end=] to an origin-relative time. + + Otherwise, [=queue a task=] to [=dispatch=] |replaceEvent| at + |animation|. + The task source for this task is the [=DOM manipulation task + source=]. + +Issue: According to the above logic, +if the author calls {{Animation/persist()}} on an {{Animation}} prior to it +being replaced, we will never dispatch a replace event. +Does that suggest the event should be called “remove” instead? +

Side effects of animation

For every property targeted by at least one animation effect that is -current or in effect, the user agent must act as if the +current or in effect, +and which is associated with an [=animation=] whose [=replace state=] +is not [=removed replace state|removed=], +the user agent must act as if the 'will-change' property ([[!css-will-change-1]]) on the target element includes the property. @@ -3808,17 +3953,21 @@ interface Animation : EventTarget { attribute double? currentTime; attribute double playbackRate; readonly attribute AnimationPlayState playState; + readonly attribute AnimationReplaceState replaceState; readonly attribute boolean pending; readonly attribute Promise<Animation> ready; readonly attribute Promise<Animation> finished; attribute EventHandler onfinish; attribute EventHandler oncancel; + attribute EventHandler onreplace; void cancel (); void finish (); void play (); void pause (); void updatePlaybackRate (double playbackRate); void reverse (); + void persist (); + void commitStyles (optional sequence<DOMString> properties); }; @@ -3900,6 +4049,8 @@ interface Animation : EventTarget { : playState :: The play state of this animation. +: replaceState +:: The replace state of this animation. : pending :: Returns true if this animation has a pending play task or a pending pause task. @@ -3911,6 +4062,8 @@ interface Animation : EventTarget { :: The event handler for the finish event. : oncancel :: The event handler for the cancel event. +: onreplace +:: The event handler for the replace event. @@ -3960,9 +4113,144 @@ interface Animation : EventTarget { method unpauses the animation and, if the animation has already finished playing in the reversed direction, seeks to the start of the target effect. +: void persist() +:: Sets this animation's [=replace state=] to + [=persisted replace state|persisted=]. +: void commitStyles() +:: Writes the current [=effect values=] + produced by this animation's [=animation effects=] + to their corresponding [=target elements=]' inline style + using the [=commit computed styles=] procedure + passing {{Animation/commitStyles(properties)/properties}} + as the list of property names. + +
+ + This is useful for retaining the effect of an animation after it has been + removed (see [[#performing-replacement]]) or canceled without retaining + the actual animation. + + Note that the values committed are the computed values + produced by the [=animation effects=] at the time when this method is + called. + Since these values are computed values, they do not reflect to changes to + context such as responding to changes to CSS variables or + recalculating em units based on changes to the computed ''font-size'' + in the way the values produced by a live animation would. + + In order to retain full fidelty of a filling animation's result after it + has been replaced (see [[#replacing-animations]]), + the {{Animation/persist()}} method may be used, + but note that doing so will mean the animation continues to consume + resources. + +
+ +
+ + : properties + :: The set of properties to commit. + If not specified, all of the [=target properties=] of this + animation's associated [=animation effects=] will be committed. + +
+To commit computed styles for an [=animation=], +|animation|, given an optional list of property names, |properties|: + +1. Let |longhandProperties| be an empty [=ordered set|set=] of + CSS property names. + +1. Let |filterProperties| be a boolean value that is initially false. + +1. If |properties| is [=present=]: + + 1. Let |filterProperties| be true. + + 1. For each CSS property name, |propertyName|, in |properties|: + + 1. If |propertyName| corresponds to a CSS shorthand property name, + append each longhand property + that |propertyName| maps to, + to |longhandProperties|. + + 1. Otherwise, + append |propertyName| to |longhandProperties|. + +1. Let |targets| be the [=ordered set|set=] of all [=target elements=] + for [=animation effects=] [=associated with an animation|associated=] + with |animation|. + +1. For each |target| in |targets|: + + 1. If |target| is not an element capable of having a [=style + attribute=] [[!CSS-STYLE-ATTR]] + (for example, it is a pseudo-element or is an element in + a document format for which style attributes are not defined) + proceed to the next item in |targets|. + + Issue: Should we throw an exception here? This is only likely to + occur if the author recycles a CSSAnimation or + CSSTransition targeting a pseudo-element. + + 1. Let |physicalProperties| be a [=ordered set|set=] of CSS property + names with the same contents as |longhandProperties| but + with each logical property name in |longhandProperties| + replaced with the [=equivalent physical properties=] based on the + computed value of 'writing-mode', 'direction', and + 'text-orientation' for |target|. + + 1. Let |inline style| be the result of getting the + [=CSS declaration block=] corresponding to |target|'s + [=style attribute=]. + If |target| does not [=has an attribute|have=] + a [=style attribute=], + let |inline style| be a new empty [=CSS declaration block=] with + the readonly flag unset and + owner node set to |target|. + + 1. Let |targeted properties| be the [=ordered set|set=] + of physical longhand properties + that are a [=target property=] for at least one [=animation effect=] + [=associated with an animation|associated=] with |animation| + whose [=target element=] is |target|. + + 1. For each property, |property|, in |targeted properties|: + + 1. If |filterProperties| is true and |physicalProperties| + does not include |property|, proceed to the next + property. + + 1. Let |partialEffectStack| be a copy of the [=effect stack=] + for |property| on |target|. + + 1. If |animation|'s [=replace state=] is + [=removed replace state|removed=], + add all [=animation effects=] + [=associated with an animation|associated=] with |animation| + whose [=target element=] is |target| and which include + |property| as a [=target property=] to |partialEffectStack|. + + 1. Remove from |partialEffectStack| any [=animation effects=] + whose [=associated with an animation|associated=] [=animation=] + has a higher [=composite order=] than |animation|. + + 1. Let |effect value| be the result of calculating the result of + |partialEffectStack| for |property| using |target|'s computed + style (see [[#calculating-the-result-of-an-effect-stack]]). + + 1. [=Set a CSS declaration=] |property| for |effect value| in + |inline style|. + + 1. [=Update style attribute for=] |inline style|. + +Issue: The above needs to define what happens for the case of non-rendered + elements since they won't have a resolved ''writing-mode'' etc. to + resolve against. +

The AnimationPlayState enumeration

@@ -3978,6 +4266,19 @@ enum AnimationPlayState { "idle", "running", "paused", "finished" };
 :   finished
 ::  Corresponds to the finished play state.
 
+

The AnimationReplaceState enumeration

+ +
+enum AnimationReplaceState { "ok", "removed", "persisted" };
+
+ +: ok +:: Corresponds to the [=ok replace state=]. +: removed +:: Corresponds to the [=removed replace state=]. +: persisted +:: Corresponds to the [=persisted replace state=]. +

The AnimationEffect interface

Animation effects are represented in the Web Animations API by the @@ -5451,11 +5752,17 @@ animation.play();
: sequence<Animation> getAnimations() -:: Returns the set of {{Animation}} objects - whose target effect is current or in effect and - contains at least one animation effect whose +:: Returns the set of [=relevant=] {{Animation}} objects + that contain at least one animation effect whose target element is this object. + An [=animation=] is + relevant if: + + * Its [=target effect=] is [=current=] or [=in effect=], + and + * Its [=replace state=] is not [=removed replace state|removed=]. + The returned list is sorted using the composite order described for the associated animations of effects in [[#the-effect-stack]]. @@ -5499,10 +5806,9 @@ partial interface Document { : sequence<Animation> getAnimations() -:: Returns the set of {{Animation}} objects - that have an associated target effect which is current or - in effect and whose target element is a descendant - of the document. +:: Returns the set of [=relevant=] {{Animation}} objects + that have an associated target effect + whose target element is a descendant of the document. The returned list is sorted using the composite order described for the associated animations of effects in [[#the-effect-stack]]. @@ -5512,17 +5818,6 @@ partial interface Document { any pending style changes to animation such as changes to animation-related style properties that have yet to be processed. - Issue(2054): Both this method and {{Animatable/getAnimations()}} on the - {{Animatable}} interface mixin require retaining - forwards-filling animation effects and their - animations such that a document that - repeatedly produces forwards-filling animations will consume - memory in an unbounded fashion. - We may need to revise this definition (previously these methods - only returned animations whose target effect was - current) or provide a loophole for implementations to - discard old animations in such conditions. -

Extensions to the Element interface

@@ -5845,6 +6140,15 @@ The following changes have been made since the #3193). * Updated the steps for resolving which properties to use when calculating [=computed keyframes=] when physical and logical properties are used. +* Introduced steps for removing animations that have been overridden: + [[#replacing-animations]]. + * Added a new [=replace event=] to signal when this process occurs. + * Added corresponding IDL members to the {{Animation}} interface: + {{Animation/replaceState}}, + {{Animation/onreplace}}, + {{Animation/persist}}. +* Added the {{Animation/commitStyles}} method to the {{Animation}} interface + to allow preserving the result of an [=animation=] that has been removed. The changelog From 51abea5c47cc570fefa8e6fcb43ff129e524a1e0 Mon Sep 17 00:00:00 2001 From: Brian Birtles Date: Wed, 17 Apr 2019 14:26:38 +0900 Subject: [PATCH 2/9] [web-animations-1] Rename replace event to remove event --- web-animations-1/Overview.bs | 37 ++++++++++++++++-------------------- 1 file changed, 16 insertions(+), 21 deletions(-) diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs index e668a120cd9..877105951af 100644 --- a/web-animations-1/Overview.bs +++ b/web-animations-1/Overview.bs @@ -2077,7 +2077,7 @@ is absent or has no observable result. :: Queued whenever an animation enters the idle play state from another state. Creating a new animation that is initially idle does not generate a new cancel event. -: replace +: remove :: Queued whenever an animation is automatically removed. See [[#replacing-animations]]. @@ -3753,7 +3753,7 @@ The [=animation effects=] of an [=animation=] whose [=replace state=] is [=removed replace state|removed=] are not included in the [=effect stacks=] of their [=target properties=]. -

Performing replacement

+

Removing replaced animations

An [=animation=] is replaceable @@ -3795,35 +3795,30 @@ perform the following steps: 1. Set |animation|'s [=replace state=] to [=removed replace state|removed=]. 1. Create an {{AnimationPlaybackEvent}}, - |replaceEvent|. + |removeEvent|. -1. Set |replaceEvent|'s {{Event/type}} attribute to - replace. +1. Set |removeEvent|'s {{Event/type}} attribute to + remove. -1. Set |replaceEvent|'s {{AnimationPlaybackEvent/currentTime}} attribute +1. Set |removeEvent|'s {{AnimationPlaybackEvent/currentTime}} attribute to the [=current time=] of |animation|. -1. Set |replaceEvent|'s {{AnimationPlaybackEvent/timelineTime}} +1. Set |removeEvent|'s {{AnimationPlaybackEvent/timelineTime}} attribute to the current time of the [=timeline=] with which |animation| is associated. 1. If |animation| has a [=document for timing=], then append - |replaceEvent| to its [=document for timing=]'s + |removeEvent| to its [=document for timing=]'s [=pending animation event queue=] along with its target, |animation|. For the [=scheduled event time=], use the result of converting |animation|'s [=target effect end=] to an origin-relative time. - Otherwise, [=queue a task=] to [=dispatch=] |replaceEvent| at + Otherwise, [=queue a task=] to [=dispatch=] |removeEvent| at |animation|. The task source for this task is the [=DOM manipulation task source=]. -Issue: According to the above logic, -if the author calls {{Animation/persist()}} on an {{Animation}} prior to it -being replaced, we will never dispatch a replace event. -Does that suggest the event should be called “remove” instead? -

Side effects of animation

For every property targeted by at least one animation effect that is @@ -3959,7 +3954,7 @@ interface Animation : EventTarget { readonly attribute Promise<Animation> finished; attribute EventHandler onfinish; attribute EventHandler oncancel; - attribute EventHandler onreplace; + attribute EventHandler onremove; void cancel (); void finish (); void play (); @@ -4062,8 +4057,8 @@ interface Animation : EventTarget { :: The event handler for the finish event. : oncancel :: The event handler for the cancel event. -: onreplace -:: The event handler for the replace event. +: onremove +:: The event handler for the remove event. @@ -4127,8 +4122,8 @@ interface Animation : EventTarget {
This is useful for retaining the effect of an animation after it has been - removed (see [[#performing-replacement]]) or canceled without retaining - the actual animation. + removed (see [[#removing-replaced-animations]]) or canceled without + retaining the actual animation. Note that the values committed are the computed values produced by the [=animation effects=] at the time when this method is @@ -6142,10 +6137,10 @@ The following changes have been made since the Date: Mon, 22 Apr 2019 10:09:00 +0900 Subject: [PATCH 3/9] [web-animations-1] Throw an exception when we can't commit styles --- web-animations-1/Overview.bs | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs index 877105951af..e46a0ee8690 100644 --- a/web-animations-1/Overview.bs +++ b/web-animations-1/Overview.bs @@ -1159,7 +1159,7 @@ as CSS Animations [[CSS-ANIMATIONS-1]]. * current time > target effect end, :: If target effect end is positive infinity, - throw an InvalidStateError and + throw an "{{InvalidStateError}}" {{DOMException}} and abort these steps. Otherwise, set animation's hold time to target effect end. @@ -1321,7 +1321,7 @@ follows: : Otherwise, :: If target effect end for animation is positive infinity, - throw an InvalidStateError + throw an "{{InvalidStateError}}" {{DOMException}} and abort these steps. Otherwise, let animation's hold time be target effect end. @@ -1649,7 +1649,7 @@ for animation defined below: 1. If |animation|'s [=effective playback rate=] is zero, or if |animation|'s [=effective playback rate=] > 0 and target effect end is infinity, - throw an InvalidStateError and + throw an "{{InvalidStateError}}" {{DOMException}} and abort these steps. 1. [=Apply any pending playback rate=] to |animation|. @@ -1892,7 +1892,7 @@ The procedure to reverse an animation of animation 1. If there is no timeline associated with animation, or the associated timeline is inactive - throw an InvalidStateError and + throw an "{{InvalidStateError}}" {{DOMException}} and abort these steps. 1. Let |original pending playback rate| be |animation|'s [=pending playback @@ -4074,7 +4074,7 @@ interface Animation : EventTarget {
- : DOMException of type InvalidStateError + : DOMException of type {{InvalidStateError}} :: Raised if this animation's [=playback rate=] is zero, or if this animation's [=playback rate=] is > zero and the end time of this animation's target effect is infinity. @@ -4185,11 +4185,8 @@ To commit computed styles for an [=animation=], attribute=] [[!CSS-STYLE-ATTR]] (for example, it is a pseudo-element or is an element in a document format for which style attributes are not defined) - proceed to the next item in |targets|. - - Issue: Should we throw an exception here? This is only likely to - occur if the author recycles a CSSAnimation or - CSSTransition targeting a pseudo-element. + throw a "{{NoModificationAllowedError}}" {{DOMException}} + and abort these steps. 1. Let |physicalProperties| be a [=ordered set|set=] of CSS property names with the same contents as |longhandProperties| but From 6d27bc9346f814dcfcedffa682cb2efc6753bac4 Mon Sep 17 00:00:00 2001 From: Brian Birtles Date: Mon, 22 Apr 2019 10:20:30 +0900 Subject: [PATCH 4/9] [web-animations-1] Throw when attempting to commit computed styles if the element is not rendered --- web-animations-1/Overview.bs | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs index e46a0ee8690..fe2d910c333 100644 --- a/web-animations-1/Overview.bs +++ b/web-animations-1/Overview.bs @@ -140,6 +140,7 @@ urlPrefix: http://www.ecma-international.org/ecma-262/6.0/#sec-; type: dfn; spec text: [[Get]]; url: ordinary-object-internal-methods-and-internal-slots-get-p-receiver urlPrefix: https://html.spec.whatwg.org/multipage/browsers.html; type: dfn; spec: html text: active document + text: being rendered text: document associated with a window; url: concept-document-window text: an entry with persisted user state text: session history entry @@ -4188,6 +4189,10 @@ To commit computed styles for an [=animation=], throw a "{{NoModificationAllowedError}}" {{DOMException}} and abort these steps. + 1. If |target| is not [=being rendered=], + throw an "{{InvalidStateError}}" {{DOMException}} + and abort these steps. + 1. Let |physicalProperties| be a [=ordered set|set=] of CSS property names with the same contents as |longhandProperties| but with each logical property name in |longhandProperties| @@ -4239,10 +4244,6 @@ To commit computed styles for an [=animation=], 1. [=Update style attribute for=] |inline style|. -Issue: The above needs to define what happens for the case of non-rendered - elements since they won't have a resolved ''writing-mode'' etc. to - resolve against. -

The AnimationPlayState enumeration


From b4f26d41b609d4f48de65784374f8e277822ddef Mon Sep 17 00:00:00 2001
From: Brian Birtles 
Date: Mon, 22 Apr 2019 10:23:51 +0900
Subject: [PATCH 5/9] [web-animations-1] Rename "ok" replace state to "active"

---
 web-animations-1/Overview.bs | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs
index fe2d910c333..eeb0159caaf 100644
--- a/web-animations-1/Overview.bs
+++ b/web-animations-1/Overview.bs
@@ -3743,12 +3743,12 @@ automatically removed unless the author explicitly requests they be retained.
 An [=animation=] maintains a replace state that may be one of the
 following values:
 
-* ok
+* active
 * removed
 * persisted
 
 The initial value of an [=animation=]'s [=replace state=] is
-[=ok replace state|ok=].
+[=active replace state|active=].
 
 The [=animation effects=] of an [=animation=]
 whose [=replace state=] is [=removed replace state|removed=]
@@ -3782,7 +3782,7 @@ then for every [=animation=], |animation|, that:
 
 *   is [=replaceable=], and
 
-*   has a [=replace state=] of [=ok replace state|ok=], and
+*   has a [=replace state=] of [=active replace state|active=], and
 
 *   for which there exists for each [=target property=]
     of every [=animation effect=]
@@ -4262,11 +4262,11 @@ enum AnimationPlayState { "idle", "running", "paused", "finished" };
 

The AnimationReplaceState enumeration

-enum AnimationReplaceState { "ok", "removed", "persisted" };
+enum AnimationReplaceState { "active", "removed", "persisted" };
 
-: ok -:: Corresponds to the [=ok replace state=]. +: active +:: Corresponds to the [=active replace state=]. : removed :: Corresponds to the [=removed replace state=]. : persisted From 0c38b54821aa5b27d9643c6694e4f4cd5aa0ddc4 Mon Sep 17 00:00:00 2001 From: Brian Birtles Date: Mon, 22 Apr 2019 10:44:00 +0900 Subject: [PATCH 6/9] [web-animations-1] Various editorial tweaks --- web-animations-1/Overview.bs | 38 +++++++++++++++++++++++------------- 1 file changed, 24 insertions(+), 14 deletions(-) diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs index eeb0159caaf..dc1af99f36d 100644 --- a/web-animations-1/Overview.bs +++ b/web-animations-1/Overview.bs @@ -3762,8 +3762,8 @@ if all of the following conditions are true: * The existence of the [=animation=] is not prescribed by markup. That is, it is not - a CSS animation with an [=owning element (animation)|owning element=], or - a CSS transition with an [=owning element (transition)|owning element=]. + a CSS animation with an [=owning element (animation)|owning element=], + nor a CSS transition with an [=owning element (transition)|owning element=]. * The [=animation=]'s [=play state=] is [=finished play state|finished=]. * The [=animation=]'s [=replace state=] is not [=removed replace state|removed=]. @@ -3789,7 +3789,7 @@ then for every [=animation=], |animation|, that: [=associated with an animation|associated=] with |animation|, an [=animation effect=] associated with a [=replaceable=] [=animation=] with a higher [=composite order=] than |animation| - that includes the same [=target property=]. + that includes the same [=target property=] perform the following steps: @@ -3811,9 +3811,11 @@ perform the following steps: 1. If |animation| has a [=document for timing=], then append |removeEvent| to its [=document for timing=]'s [=pending animation event queue=] along with its target, |animation|. - For the [=scheduled event time=], use the result of converting - |animation|'s [=target effect end=] to an origin-relative time. + For the [=scheduled event time=], use the result of + applying the procedure to convert + [=timeline time to origin-relative time=] to + the [=timeline current time|current time=] of the [=timeline=] + with which |animation| is associated. Otherwise, [=queue a task=] to [=dispatch=] |removeEvent| at |animation|. @@ -4112,7 +4114,7 @@ interface Animation : EventTarget { : void persist() :: Sets this animation's [=replace state=] to [=persisted replace state|persisted=]. -: void commitStyles() +: void commitStyles(properties) :: Writes the current [=effect values=] produced by this animation's [=animation effects=] to their corresponding [=target elements=]' inline style @@ -4123,8 +4125,8 @@ interface Animation : EventTarget {
This is useful for retaining the effect of an animation after it has been - removed (see [[#removing-replaced-animations]]) or canceled without - retaining the actual animation. + removed (see [[#removing-replaced-animations]]) without retaining the + actual animation. Note that the values committed are the computed values produced by the [=animation effects=] at the time when this method is @@ -4140,6 +4142,10 @@ interface Animation : EventTarget { but note that doing so will mean the animation continues to consume resources. + Also note that as with other methods defined on this interface, + calling this method does not trigger a [=style change event=] + (see [[#model-liveness]]). +
@@ -4155,7 +4161,7 @@ interface Animation : EventTarget {
To commit computed styles for an [=animation=], -|animation|, given an optional list of property names, |properties|: +|animation|, given an optional list of CSS property names, |properties|: 1. Let |longhandProperties| be an empty [=ordered set|set=] of CSS property names. @@ -4168,13 +4174,17 @@ To commit computed styles for an [=animation=], 1. For each CSS property name, |propertyName|, in |properties|: - 1. If |propertyName| corresponds to a CSS shorthand property name, - append each longhand property +
+ + : If |propertyName| corresponds to a CSS shorthand property name, + :: append each longhand property that |propertyName| maps to, to |longhandProperties|. - 1. Otherwise, - append |propertyName| to |longhandProperties|. + : Otherwise, + :: append |propertyName| to |longhandProperties|. + +
1. Let |targets| be the [=ordered set|set=] of all [=target elements=] for [=animation effects=] [=associated with an animation|associated=] From 5f0df9a6abe809ba580f5a6b2d3fbc2cff336864 Mon Sep 17 00:00:00 2001 From: Brian Birtles Date: Tue, 23 Apr 2019 10:38:46 +0900 Subject: [PATCH 7/9] [web-animations-1] Tweak commitStyles comment --- web-animations-1/Overview.bs | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs index dc1af99f36d..c5c724ae3ec 100644 --- a/web-animations-1/Overview.bs +++ b/web-animations-1/Overview.bs @@ -4124,9 +4124,12 @@ interface Animation : EventTarget {
- This is useful for retaining the effect of an animation after it has been - removed (see [[#removing-replaced-animations]]) without retaining the - actual animation. + Since the procedure to [=commit computed styles=] includes the + [=effect values=] for the animation even if it is + [=removed replace state|removed=], + this method is useful for retaining the effect of an animation + after it has been replaced (see [[#removing-replaced-animations]]) + without retaining the actual animation. Note that the values committed are the computed values produced by the [=animation effects=] at the time when this method is From 0292de9d99531ac700246728a193a77202eea588 Mon Sep 17 00:00:00 2001 From: Brian Birtles Date: Tue, 23 Apr 2019 10:54:33 +0900 Subject: [PATCH 8/9] [web-animations-1] Make commitStyles flush --- web-animations-1/Overview.bs | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs index c5c724ae3ec..c36d8ed6df0 100644 --- a/web-animations-1/Overview.bs +++ b/web-animations-1/Overview.bs @@ -4122,6 +4122,9 @@ interface Animation : EventTarget { passing {{Animation/commitStyles(properties)/properties}} as the list of property names. + Unlike most other methods defined on this interface, calling this method + does trigger a [=style change event=] (see [[#model-liveness]]). +
Since the procedure to [=commit computed styles=] includes the @@ -4145,10 +4148,6 @@ interface Animation : EventTarget { but note that doing so will mean the animation continues to consume resources. - Also note that as with other methods defined on this interface, - calling this method does not trigger a [=style change event=] - (see [[#model-liveness]]). -
@@ -4202,10 +4201,23 @@ To commit computed styles for an [=animation=], throw a "{{NoModificationAllowedError}}" {{DOMException}} and abort these steps. - 1. If |target| is not [=being rendered=], + 1. If, after applying any pending style changes, + |target| is not [=being rendered=], throw an "{{InvalidStateError}}" {{DOMException}} and abort these steps. +
+ + The definition of [=being rendered=] [[!HTML]] with regards to + ''display: contents'' is still under discussion. + For the purpose of this procedure, we assume that an + element with ''display: contents'' that otherwise would have + associated layout boxes (i.e. it is [=connected=] and not part of + a ''display: none'' subtree) is being rendered. + +
+ 1. Let |physicalProperties| be a [=ordered set|set=] of CSS property names with the same contents as |longhandProperties| but with each logical property name in |longhandProperties| From 5ebd26186c54ee8533002708b4d610c357ce2cb9 Mon Sep 17 00:00:00 2001 From: Brian Birtles Date: Wed, 8 May 2019 09:48:31 +0900 Subject: [PATCH 9/9] [web-animations] Drop properties parameter from commitStyles --- web-animations-1/Overview.bs | 55 +++--------------------------------- 1 file changed, 4 insertions(+), 51 deletions(-) diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs index c36d8ed6df0..1b613b0b5d5 100644 --- a/web-animations-1/Overview.bs +++ b/web-animations-1/Overview.bs @@ -3965,7 +3965,7 @@ interface Animation : EventTarget { void updatePlaybackRate (double playbackRate); void reverse (); void persist (); - void commitStyles (optional sequence<DOMString> properties); + void commitStyles (); };
@@ -4114,13 +4114,11 @@ interface Animation : EventTarget { : void persist() :: Sets this animation's [=replace state=] to [=persisted replace state|persisted=]. -: void commitStyles(properties) +: void commitStyles() :: Writes the current [=effect values=] produced by this animation's [=animation effects=] to their corresponding [=target elements=]' inline style - using the [=commit computed styles=] procedure - passing {{Animation/commitStyles(properties)/properties}} - as the list of property names. + using the [=commit computed styles=] procedure. Unlike most other methods defined on this interface, calling this method does trigger a [=style change event=] (see [[#model-liveness]]). @@ -4150,43 +4148,9 @@ interface Animation : EventTarget {
-
- - : properties - :: The set of properties to commit. - If not specified, all of the [=target properties=] of this - animation's associated [=animation effects=] will be committed. - -
-
-To commit computed styles for an [=animation=], -|animation|, given an optional list of CSS property names, |properties|: - -1. Let |longhandProperties| be an empty [=ordered set|set=] of - CSS property names. - -1. Let |filterProperties| be a boolean value that is initially false. - -1. If |properties| is [=present=]: - - 1. Let |filterProperties| be true. - - 1. For each CSS property name, |propertyName|, in |properties|: - -
- - : If |propertyName| corresponds to a CSS shorthand property name, - :: append each longhand property - that |propertyName| maps to, - to |longhandProperties|. - - : Otherwise, - :: append |propertyName| to |longhandProperties|. - -
+To commit computed styles for an [=animation=], |animation|: 1. Let |targets| be the [=ordered set|set=] of all [=target elements=] for [=animation effects=] [=associated with an animation|associated=] @@ -4218,13 +4182,6 @@ To commit computed styles for an [=animation=], - 1. Let |physicalProperties| be a [=ordered set|set=] of CSS property - names with the same contents as |longhandProperties| but - with each logical property name in |longhandProperties| - replaced with the [=equivalent physical properties=] based on the - computed value of 'writing-mode', 'direction', and - 'text-orientation' for |target|. - 1. Let |inline style| be the result of getting the [=CSS declaration block=] corresponding to |target|'s [=style attribute=]. @@ -4242,10 +4199,6 @@ To commit computed styles for an [=animation=], 1. For each property, |property|, in |targeted properties|: - 1. If |filterProperties| is true and |physicalProperties| - does not include |property|, proceed to the next - property. - 1. Let |partialEffectStack| be a copy of the [=effect stack=] for |property| on |target|.