[css-animations-2] Add CSSAnimation interface

Author: birtles

css-animations-2/Overview.bs

@@ -29,9 +29,14 @@ Editor: L. David Baron, Mozilla, dbaron@dbaron.org
 Abstract: This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.
 </pre>
 <pre class="anchors">
+urlPrefix: https://w3c.github.io/web-animations/; type: interface; spec: web-animations
+    text: Animation
+    text: KeyframeEffectReadOnly
 urlPrefix: https://w3c.github.io/web-animations/; type: method; for: Animation; spec: web-animations
     text: play()
     text: pause()
+urlPrefix: https://w3c.github.io/web-animations/; type: method; for: KeyframeEffectReadOnly; spec: web-animations
+    text: getFrames()
 urlPrefix: https://w3c.github.io/web-animations/; type: dfn; spec: web-animations
     text: animation playback rate
     text: current iteration
@@ -268,3 +273,76 @@ after the sample as follows:
 
 Issue: Define the value of <code>elapsedTime</code> for each case.
 
+# DOM interfaces # {#interface-dom}
+
+## The CSSAnimation interface ## {#the-CSSAnimation-interface}
+
+<pre class="idl">
+interface CSSAnimation : Animation {
+  readonly attribute DOMString animationName;
+};
+</pre>
+
+:   <dfn attribute for=CSSAnimation>animationName</dfn>
+::  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.
+
+<div class="issue">
+
+We need to define a constructor for <a idl>CSSAnimation</a>.
+Perhaps something like the following:
+
+<pre class="idl">
+[Constructor (DOMString animationName, DOMString defaultEasing)]
+partial interface CSSAnimation { };
+</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">
+[Constructor (DOMString keyframesName, DOMString defaultEasing)]
+interface CSSKeyframeEffectReadOnly : KeyframeEffectReadOnly {
+  readonly attribute DOMString keyframesName;
+  readonly attribute DOMString defaultEasing;
+};
+</pre>
+
+</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 style of
+<code>elem</code> is initially updated, a user agent may defer recalculating
+the computed value of the 'animation' property.
+
+However, the <code>getAnimations</code> method from the {{Element}} interface
+which is specified by [[!WEB-ANIMATIONS]] can return {{CSSAnimation}} objects as
+defined in this specification, and hence the user agent must calculate the
+updated value <code>elem</code>'s 'animation' property and create
+the requested {{CSSAnimation}} object before returning its result.
+
+<div><pre class="example lang-javascript">
+elem.style.animation = 'fadeOut 1s';
+elem.getAnimations()[0].pause();
+</pre></div>
+
+</div>