changeset
[web-animations] Thoroughly rewrite the procedures for handling the effect parameter for the Animation ctor and Animatable.animate method
Thu, 17 Apr 2014 14:35:05 +0900
- author
- Brian Birtles <birtles@gmail.com>
- date
- Thu, 17 Apr 2014 14:35:05 +0900
- changeset 1473
- 7e29a8906626
- parent 1472
- 742aa9c40e82
- child 1474
- 2eb4ed4cdb45
[web-animations] Thoroughly rewrite the procedures for handling the effect parameter for the Animation ctor and Animatable.animate method
And simultaneously remove OneOrMoreKeyframes since its not valid WebIDL and
generally tighten up our procedures for handling non-WebIDL ECMAScript objects.
| web-animations/index.html | file | annotate | diff | comparison | revisions |
1.1 --- a/web-animations/index.html Wed Apr 16 15:30:42 2014 +0900 1.2 +++ b/web-animations/index.html Thu Apr 17 14:35:05 2014 +0900 1.3 @@ -4527,8 +4527,8 @@ 1.4 For example, for the <a href="#programming-interface">programming 1.5 interface</a> defined by this specification, these conditions are 1.6 met by applying the normalization defined in <a 1.7 - href="#normalizing-a-list-of-keyframes" class="sectionRef"></a> and 1.8 - resolving <code>null</code> <a>keyframe offsets</a> by 1.9 + href="#normalizing-a-sequence-of-keyframes" class="sectionRef"></a> 1.10 + and resolving <code>null</code> <a>keyframe offsets</a> by 1.11 applying <a href="#spacing-keyframes">spacing behavior</a>. 1.12 </p> 1.13 </div> 1.14 @@ -6461,7 +6461,8 @@ 1.15 Assign <code><var>animation</var>.effect</code> to 1.16 <var>effect</var>. 1.17 </dd> 1.18 - <dt>If <var>effect</var> is a <a>OneOrMoreKeyframes</a>,</dt> 1.19 + <dt>If <var>effect</var> is a <a>Keyframe</a> object or 1.20 + a sequence of <a>Keyframe</a> objects,</dt> 1.21 <dd> 1.22 Set <code><var>animation</var>.effect</code> to 1.23 a new <a>KeyframeEffect</a> object constructed by 1.24 @@ -6497,11 +6498,23 @@ 1.25 This may be <code>null</code> for animations that do not target 1.26 a specific element. 1.27 </dd> 1.28 - <dt>(AnimationEffect or EffectCallback or OneOrMoreKeyframes)? effect</dt> 1.29 + <dt>object? effect</dt> 1.30 <dd> 1.31 - The animation effect used to set the <code>effect</code> 1.32 - attribute of the newly-created <a title="Animation 1.33 - interface">Animation</a> object. 1.34 + <p> 1.35 + The animation effect used to set the <code>effect</code> 1.36 + attribute of the newly-created <a title="Animation 1.37 + interface">Animation</a> object. 1.38 + It may be one of the following: 1.39 + </p> 1.40 + <ul> 1.41 + <li>An <a>AnimationEffect</a> object, 1.42 + <li>An <a>EffectCallback</a> function, 1.43 + <li>A single <a title="Keyframe interface">Keyframe</a> 1.44 + object, 1.45 + <li>A sequence of <a title="Keyframe interface">Keyframe</a> 1.46 + objects, or 1.47 + <li>null 1.48 + </ul> 1.49 <p> 1.50 If this parameter is an <a>AnimationEffect</a> object or 1.51 <a>EffectCallback</a> object, it will be shared with any 1.52 @@ -6511,7 +6524,10 @@ 1.53 It will <em>not</em> be copied. 1.54 </p> 1.55 <p> 1.56 - If this parameter of type <a>OneOrMoreKeyframes</a>, 1.57 + If this parameter is of type <a 1.58 + title="Keyframe interface">Keyframe</a> or 1.59 + <code>sequence<<a 1.60 + title="Keyframe interface">Keyframe</a>></code>, 1.61 the <a>animation effect</a> of the newly-created 1.62 <a title="Animation interface">Animation</a> will be 1.63 a newly-created <a>KeyframeEffect</a> object 1.64 @@ -6524,6 +6540,11 @@ 1.65 <a title="Animation interface">Animation</a> will also have 1.66 a <code>null</code> animation effect. 1.67 </p> 1.68 + <p> 1.69 + The handling of this parameter is defined in <a 1.70 + href="#processing-the-effect-parameter" 1.71 + class="sectionRef"></a>. 1.72 + </p> 1.73 </dd> 1.74 <dt>optional (unrestricted double or TimingInput) timing</dt> 1.75 <dd> 1.76 @@ -6589,13 +6610,66 @@ 1.77 </li> 1.78 <li>Return a new <a>Animation</a> object created by 1.79 calling the <a 1.80 - href="#widl-ctor-Animation--Animatable-target--AnimationEffect-or-EffectCallback-or-OneOrMoreKeyframes--effect--unrestricted-double-or-TimingInput--timing">Animation 1.81 + href="#widl-ctor-Animation--Animatable-target-object-effect--unrestricted-double-or-TimingInput--timing">Animation 1.82 constructor</a> with parameters 1.83 <code>Animation(<var>source</var>.target, <var>cloned 1.84 effect</var>, <var>cloned timing</var>)</code>.</li> 1.85 </ol> 1.86 </dd> 1.87 </dl> 1.88 + <section> 1.89 + <h4>Processing the <var>effect</var> parameter</h4> 1.90 + <p> 1.91 + The <var>effect</var> parameter, an ECMAScript value passed to the 1.92 + <a title="Animation interface">Animation</a> constructor or to the 1.93 + <code>animate</code> operation of the <a>Animatable</a> interface, 1.94 + may specify an <a>EffectCallback</a>, an <a>AnimationEffect</a>, 1.95 + a <a>Keyframe</a> a sequence of <a>Keyframes</a>, or <span 1.96 + class="esvalue">null</span>. 1.97 + However, since callback functions and dictionaries are not 1.98 + distinguishable in WebIDL, we define the processing of this 1.99 + parameter for ECMAScript here in prose. 1.100 + </p> 1.101 + <p> 1.102 + The <dfn>procedure for converting an effect to an IDL value</dfn> 1.103 + with parameter <var>effect</var> is as follows: 1.104 + </p> 1.105 + <dl class="switch"> 1.106 + <dt>If <var>effect</var> is <span class="esvalue">null</span> or 1.107 + <span class="esvalue">undefined</span>,</dt> 1.108 + <dd>Return <span class="idlvalue">null</span>.</dd> 1.109 + <dt>If <var>effect</var> is a <a 1.110 + href="http://www.w3.org/TR/WebIDL/#dfn-platform-object">platform 1.111 + object</a> but not a <a 1.112 + href="http://www.w3.org/TR/WebIDL/#dfn-platform-array-object">platform 1.113 + array object</a>, then</dt> 1.114 + <dd> 1.115 + <ol> 1.116 + <li>If <var>effect</var> implements <a>AnimationEffect</a>, 1.117 + return the IDL value that is a reference to the object 1.118 + <var>effect</var>. 1.119 + <li>Otherwise, throw a <span class="esvalue">TypeError</span>. 1.120 + </dd> 1.121 + <dt>If IsCallable(<var>effect</var>) is true,</dt> 1.122 + <dd>Return the result of applying the <a 1.123 + href="http://www.w3.org/TR/WebIDL/#es-callback-function">procedure 1.124 + for converting an ECMAScript value to an IDL callback function 1.125 + type</a> to <var>effect</var>. 1.126 + </dd> 1.127 + <dt>If <var>effect</var> is any kind of object except for a native 1.128 + Date object or a native RegExp object,</dt> 1.129 + <dd>Return the result of applying the <a>procedure for converting 1.130 + an ECMAScript value into an IDL keyframe or sequence of 1.131 + keyframes</a> to <var>effect</var>. 1.132 + <dt>Otherwise,</dt> 1.133 + <dd>Throw a TypeError.</dd> 1.134 + </ol> 1.135 + <p class="note"> 1.136 + Note that since the processing of this parameter is defined in 1.137 + prose, the above steps will take place after any coercion is applied 1.138 + to other parameters passed to the same operation. 1.139 + </p> 1.140 + </section> 1.141 <section class="informative"> 1.142 <h4>Creating a new <code>Animation</code> object</h4> 1.143 <p> 1.144 @@ -6729,11 +6803,11 @@ 1.145 <code>play</code> method of the <a>AnimationTimeline</a>. 1.146 </p> 1.147 <dl class="parameters"> 1.148 - <dt>(AnimationEffect or EffectCallback or OneOrMoreKeyframes)? effect</dt> 1.149 + <dt>object? effect</dt> 1.150 <dd> 1.151 The effect to apply. 1.152 This value is passed to the <a 1.153 - href="#widl-ctor-Animation--Animatable-target--AnimationEffect-or-EffectCallback-or-OneOrMoreKeyframes--effect--unrestricted-double-or-TimingInput--timing">Animation 1.154 + href="#widl-ctor-Animation--Animatable-target-object-effect--unrestricted-double-or-TimingInput--timing">Animation 1.155 constructor</a> as the <var>effect</var> parameter and has the 1.156 same interpretation as defined for that constructor. 1.157 </dd> 1.158 @@ -6741,7 +6815,7 @@ 1.159 <dd> 1.160 The timing parameters of the animation. 1.161 This value is passed to the <a 1.162 - href="#widl-ctor-Animation--Animatable-target--AnimationEffect-or-EffectCallback-or-OneOrMoreKeyframes--effect--unrestricted-double-or-TimingInput--timing">Animation 1.163 + href="#widl-ctor-Animation--Animatable-target-object-effect--unrestricted-double-or-TimingInput--timing">Animation 1.164 constructor</a> as the <var>timing</var> parameter and has the 1.165 same interpretation as defined for that constructor. 1.166 </dd> 1.167 @@ -6947,10 +7021,11 @@ 1.168 href="#normalizing-a-keyframe-object" class="sectionRef"></a>. 1.169 </p> 1.170 <dl class="parameters"> 1.171 - <dt>OneOrMoreKeyframes frames</dt> 1.172 + <dt>object frames</dt> 1.173 <dd> 1.174 - The set of <a>keyframes</a> used for calculating animation 1.175 - values for this <a>animation effect</a>. 1.176 + A <a title="Keyframe interface">Keyframe</a> object or sequence 1.177 + of <a title="Keyframe interface">Keyframe</a> objects used for 1.178 + calculating animation values for this <a>animation effect</a>. 1.179 The constraints on this parameter and its processing are 1.180 identical to those for <code>setFrames</code>. 1.181 </dd> 1.182 @@ -7043,7 +7118,7 @@ 1.183 </p> 1.184 <ul> 1.185 <li>The normalization defined in <a 1.186 - href="#normalizing-a-list-of-keyframes" 1.187 + href="#normalizing-a-sequence-of-keyframes" 1.188 class="sectionRef"></a> is applied to <var>frames</var> which 1.189 may result in some frames being removed or re-ordered and some 1.190 properties being removed. 1.191 @@ -7055,19 +7130,64 @@ 1.192 a Number. 1.193 </ul> 1.194 </dd> 1.195 - <dt>void setFrames(OneOrMoreKeyframes frames)</dt> 1.196 - <dd> 1.197 - <p> 1.198 - Replaces the set of <a>keyframes</a> that make up this effect. 1.199 - </p> 1.200 - <p> 1.201 - Upon setting, each keyframe in <var>frames</var> is normalized 1.202 - using the procedure in <a href="#normalizing-a-keyframe-object" 1.203 + <dt>void setFrames(object frames)</dt> 1.204 + <dd> 1.205 + <p> 1.206 + A <a title="Keyframe interface">Keyframe</a> object or sequence 1.207 + of <a title="Keyframe interface">Keyframe</a> objects used to 1.208 + replace the set of <a>keyframes</a> that make up this effect. 1.209 + </p> 1.210 + <p> 1.211 + The processing of the <var>frames</var> parameter is defined in <a 1.212 + href="#processing-a-sequence-of-Keyframe-objects-or-a-single-item" 1.213 + class="sectionRef"></a>. 1.214 + Subsequently, the resulting sequence of <a 1.215 + title="Keyframe interface">Keyframe</a> objects is normalized 1.216 + using the procedure in <a 1.217 + href="#normalizing-a-sequence-of-keyframes" 1.218 class="sectionRef"></a> before storing. 1.219 </p> 1.220 </dd> 1.221 </dl> 1.222 <section> 1.223 + <h2>Processing a sequence of <code>Keyframe</code> objects or a single item</h2> 1.224 + <p> 1.225 + WebIDL does not currently make a dictionary and a sequence 1.226 + distinguishable but it was felt that allowing both was important 1.227 + for useability of the <code>animate</code> operation on 1.228 + <a>Animatable</a>. 1.229 + Therefore, we define the processing for handling a parameter 1.230 + that may be either a single <a 1.231 + title="Keyframe interface">Keyframe</a> dictionary object, or 1.232 + a sequence of such objects. 1.233 + </p> 1.234 + <p> 1.235 + The <dfn>procedure for converting an ECMAScript value into 1.236 + an IDL keyframe or sequence of keyframes</dfn> with parameter 1.237 + <var>keyframeOrKeyframeList</var> is as follows: 1.238 + </p> 1.239 + <dl class="switch"> 1.240 + <dt>If HasOwnProperty(<var>keyframeOrKeyframeList</var>, "length") 1.241 + is true or <var>keyframeOrKeyframeList</var> is a platform 1.242 + object that <a 1.243 + href="http://www.w3.org/TR/WebIDL/#dfn-support-indexed-properties">supports 1.244 + indexed properties</a>,</dt> 1.245 + <dd>Return the result of following the steps for <a 1.246 + href="http://www.w3.org/TR/WebIDL/#es-sequence">converting an 1.247 + ECMAScript value into an IDL sequence</a> using the <a>procedure 1.248 + for converting an ECMAScript value to an IDL Keyframe object</a> 1.249 + as the procedure for converting <var>E</var> to an IDL value of 1.250 + type <var>T</var>.</dd> 1.251 + <dt>Otherwise,</dt> 1.252 + <dd>Return the result of applying the <a>procedure for converting 1.253 + an ECMAScript value to an IDL Keyframe object</a> to 1.254 + <var>keyframeOrKeyframeList</a>.<dd> 1.255 + </dl> 1.256 + <p class="issue"> 1.257 + Should this be defined in terms of <code>IsIterable</code> instead? 1.258 + </p> 1.259 + </section> 1.260 + <section> 1.261 <h2>The <code>KeyframeEffectOptions</code> dictionary</h2> 1.262 <p> 1.263 Additional parameters may be passed to the <a>KeyframeEffect</a> 1.264 @@ -7107,56 +7227,129 @@ 1.265 </dl> 1.266 </section> 1.267 <section> 1.268 - <h4>Normalizing a list of keyframes</h4> 1.269 + <h4>Normalizing a sequence of keyframes</h4> 1.270 <p> 1.271 For each call to <code>setFrames</code> or the <a>KeyframeEffect</a> 1.272 - constructor the following normalization is performed on the passed 1.273 + constructor, the following normalization is performed on the passed 1.274 in <var>frames</var> parameter before storing its value. 1.275 </p> 1.276 + <p class="note"> 1.277 + Note that the processing of the ECMAScript value into a suitable IDL 1.278 + value defined in <a href="#processing-a-keyframe-object" 1.279 + class="sectionRef"></a> is performed before this operation is 1.280 + initiated. 1.281 + </p> 1.282 <ol> 1.283 - <li>For each <a title="Keyframe interface">Keyframe</a> object in 1.284 - <var>frames</var> apply the normalization described in <a 1.285 - href="#normalizing-a-keyframe-object" class="sectionRef"></a>. 1.286 - Any exceptions thrown that by procedure will likewise abort this 1.287 - procedure. 1.288 + <li>If <var>frames</var> is a single <a title="Keyframe 1.289 + interface">Keyframe</a> object, replaces <var>frames</var> with 1.290 + a new sequence with a single item that is the previous value of 1.291 + <var>frames</var>. 1.292 <li>If <var>frames</var> is not <a>loosely sorted by offset</a>, 1.293 then, 1.294 <dl class="switch"> 1.295 <dt>If each <a title="Keyframe interface">Keyframe</a> has 1.296 - a specified <a>keyframe offset</a>,</dt> 1.297 - <dd>Sort <var>frames</var> in ascending order by <a>keyframe 1.298 - offset</a>.</dd> 1.299 + a non-null <code>offset</code>,</dt> 1.300 + <dd>Sort <var>frames</var> in ascending order by 1.301 + <code>offset</code>.</dd> 1.302 <dt>Otherwise,</dt> 1.303 <dd>Throw a DOMException of type 1.304 <code>InvalidModificationError</code>.</dd> 1.305 </dl> 1.306 <li>If there exist any <a title="Keyframe interface">Keyframe</a> 1.307 - objects in <var>frames</var> whose specified <a>keyframe 1.308 - offset</a> is less than zero, remove all keyframes 1.309 + objects in <var>frames</var> whose <code>offset</code> member is 1.310 + non-null and less than zero, remove all keyframes 1.311 objects from the start of <var>frames</var> up to and including 1.312 - the keyframe with the largest specified <a>keyframe offset</a> 1.313 + the keyframe with the largest non-null <code>offset</code> 1.314 that is still less than zero. 1.315 <li>Likewise, if there exist any <a 1.316 title="Keyframe interface">Keyframe</a> objects in 1.317 - <var>frames</var> whose specified <a>keyframe offset</a> 1.318 - is greater than one, remove all <a>keyframes</a> from 1.319 - keyframe with the smallest specified <a>keyframe offset</a> 1.320 + <var>frames</var> whose <code>offset</code> member is non-null 1.321 + and greater than one, remove all <a>keyframes</a> from 1.322 + the keyframe with the smallest non-null <code>offset</code> 1.323 that is still greater than one until the end of 1.324 <var>frames</var>. 1.325 <li>Remove all property values in <var>frames</var> that are invalid 1.326 or not supported by the implementation. 1.327 + <p class="issue"> 1.328 + Need to define what invalid means here. 1.329 + </p> 1.330 </ol> 1.331 </section> 1.332 + </section> 1.333 + <section> 1.334 + <h3>The <code>Keyframe</code> dictionary</h3> 1.335 + <p> 1.336 + Individual <a>keyframes</a> are represented by a special kind of 1.337 + <a title="Keyframe interface">Keyframe</a> dictionary type whose 1.338 + members map to the properties to be animated. 1.339 + At the time of writing, this kind of open-ended dictionary cannot 1.340 + be represented using WebIDL and hence special 1.341 + ECMAScript-specific handling for this type is defined in 1.342 + <a href="#normalizing-a-keyframe-object" class="sectionRef"></a>. 1.343 + No handling is defined for other languages. 1.344 + </p> 1.345 + <dl class="idl" title="dictionary Keyframe"> 1.346 + <dt>// ... property-value pairs ...</dt><dd></dd> 1.347 + <dt>double? offset = null</dt> 1.348 + <dd> 1.349 + <p> 1.350 + The <a>keyframe offset</a> of the <a>keyframe</a> specified as 1.351 + a number between 0.0 and 1.0 inclusive or <code>null</code>. 1.352 + </p> 1.353 + <p> 1.354 + <a>Keyframes</a> with offsets outside the range [0.0, 1.0] are 1.355 + ignored when calculating animation values as defined in 1.356 + <a href="#normalizing-a-sequence-of-keyframes" 1.357 + class="sectionRef"></a>. 1.358 + </p> 1.359 + <p> 1.360 + A <code>null</code> value indicates that the <a>keyframe</a> 1.361 + should be positioned using the <a>keyframe animation effect</a>'s 1.362 + <a>keyframe spacing mode</a>. 1.363 + </p> 1.364 + </dd> 1.365 + <dt>DOMString easing = "linear"</dt> 1.366 + <dd> 1.367 + <p> 1.368 + The <a>timing function</a> used to transform the progress of time 1.369 + from this keyframe until the next keyframe in the series. 1.370 + </p> 1.371 + <p> 1.372 + The syntax and error-handling associated with parsing this string 1.373 + is identical to that defined for the <code>easing</code> attribute 1.374 + of the <a title="Timing interface">Timing</a> interface. 1.375 + </p> 1.376 + </dd> 1.377 + <dt>CompositeOperation? composite = null</dt> 1.378 + <dd> 1.379 + <p> 1.380 + The <a>composition operation</a> used to combine the values 1.381 + specified in this keyframe with the <a>underlying value</a>. 1.382 + </p> 1.383 + <p> 1.384 + If <code>null</code>, the <a>composition operation</a> 1.385 + specified on the <a>AnimationEffect</a> will be used. 1.386 + </p> 1.387 + </dd> 1.388 + </dl> 1.389 + <div class="note"> 1.390 + <a title="Keyframe interface">Keyframe</a> objects returned by the 1.391 + <code>getFrames</code> method of <a>KeyframeEffect</a> include an 1.392 + additional Number property <code>computedOffset</code> representing 1.393 + the <a>keyframe offset</a> as calculated by <a 1.394 + href="#spacing-keyframes" class="sectionRef"></a>. 1.395 + </div> 1.396 <section> 1.397 - <h4>Normalizing a <code>Keyframe</code> object</h4> 1.398 + <h4>Processing a <code>Keyframe</code> object</h4> 1.399 <div class="note"> 1.400 <p> 1.401 Since accessing the properties of an ECMAScript user object can 1.402 have side effects, the manner in which these properties is 1.403 accessed is important. 1.404 - In light of this consideration the procedure for normalizing 1.405 - a <a title="Keyframe interface">Keyframe</a> object has the 1.406 - following properties: 1.407 + In light of this consideration the procedure for converting an 1.408 + ECMAScript object into an IDL <a 1.409 + title="Keyframe interface">Keyframe</a> object has the following 1.410 + properties: 1.411 </p> 1.412 <ul> 1.413 <li>Each property that is read, is read only once.</li> 1.414 @@ -7166,15 +7359,16 @@ 1.415 </ul> 1.416 </div> 1.417 <p> 1.418 - A <a title="Keyframe interface">Keyframe</a> object, <var>keyframe 1.419 - input</var>, is converted to a normalized internal representation 1.420 - <var>keyframe result</var> using the following procedure: 1.421 + The <dfn>procedure for converting an ECMAScript value to an IDL 1.422 + Keyframe object</dfn> with parameter <var>keyframe input</var> 1.423 + is as follows: 1.424 </p> 1.425 <ol> 1.426 - <li>Let the initial <a>keyframe offset</a> 1.427 - of <var>keyframe result</var> be <code>null</code>. 1.428 - <li>Let the initial <a>composition operation</a> 1.429 - of <var>keyframe result</var> be <code>null</code>. 1.430 + <li>Let <var>keyframe result</var> be a <a 1.431 + title="Keyframe interface">Keyframe</a> object with the 1.432 + <code>offset</code>, <code>easing</code> and 1.433 + <code>composite</code> attributes set to the default dictionary 1.434 + values. 1.435 <li>Create a list, <var>supported properties</var>, of property 1.436 names and attribute names that can be animated by the 1.437 implementation. 1.438 @@ -7186,20 +7380,22 @@ 1.439 class="prop-name">float</a> CSS property, replace 'float' in 1.440 <var>supported properties</var> with 'cssFloat'. 1.441 <li>Let <var>animation properties</var> be an empty sequence. 1.442 - <li>Iterate over the properties of <var>keyframe input</var>. 1.443 - For each <var>property</var> in <var>keyframe input</var>, 1.444 - perform the step corresponding to the first matching condition 1.445 - from below, if any. 1.446 + <li>Use <code>Object.keys(<var>keyframe input</var>)</code> to 1.447 + iterate over each of the enumerable properties in <var>keyframe 1.448 + input</var>. 1.449 + For each <var>property</var> perform the step corresponding to 1.450 + the first matching condition from below, if any. 1.451 <dl class="switch"> 1.452 <dt>If <var>property</var> is a case-sensitive match for 1.453 the string 'offset',</dt> 1.454 <dd> 1.455 - Set the <a>keyframe offset</a> of <var>keyframe result</var> 1.456 - to the result of applying the <a 1.457 + Set the <code>offset</code> member of <var>keyframe 1.458 + result</var> to the result of applying the <a 1.459 href="http://www.w3.org/TR/WebIDL/#es-double">procedure for 1.460 - converting an ECMAScript value into an IDL double</a> defined 1.461 - in WebIDL [[!WEBIDL]] to 1.462 - <code><var>keyframe input</var>.offset</code>. 1.463 + converting an ECMAScript value into an IDL double</a> 1.464 + [[!WEBIDL]] to the result of calling the [‌[Get]] 1.465 + internal method on <var>keyframe input</var> with property 1.466 + name 'offset'. 1.467 </dd> 1.468 <dt>If <var>property</var> is a case-sensitive match for 1.469 the string 'computedOffset',</dt> 1.470 @@ -7210,35 +7406,37 @@ 1.471 the string 'easing',</dt> 1.472 <dd> 1.473 <p> 1.474 - Set the <a>timing function</a> of <var>keyframe result</var> 1.475 - to the result of applying <a 1.476 - href="http://www.w3.org/TR/WebIDL/#es-DOMString">the 1.477 - procedure for converting an ECMAScript value to an IDL 1.478 - DOMString value</a> defined in WebIDL [[!WEBIDL]] to 1.479 - <code><var>keyframe input</var>.easing</code> with the <a 1.480 + Set the <code>easing</code> member of <var>keyframe 1.481 + result</var> to the result of applying the <a 1.482 + href="http://www.w3.org/TR/WebIDL/#es-DOMString">procedure 1.483 + for converting an ECMAScript value to an IDL 1.484 + DOMString value</a> [[!WEBIDL]] with the <a 1.485 href="http://www.w3.org/TR/WebIDL/#TreatNullAs">[TreatNullAs=EmptyString]</a> 1.486 - annotation in effect. 1.487 + annotation in effect, to the result of calling 1.488 + the [‌[Get]] internal method of <var>keyframe 1.489 + input</var> with property name 'easing'. 1.490 </p> 1.491 <p> 1.492 If the resulting string does not conform to the 1.493 grammar defined for the <a 1.494 href="#widl-Timing-easing"><code>easing</code></a> attribute 1.495 of the <a title="Timing interface">Timing</a> interface or 1.496 - is not supported by the implementation then 1.497 - set the <a>timing function</a> of <var>keyframe result</var> 1.498 + is not supported by the implementation, then 1.499 + set the <code>easing</code> of <var>keyframe result</var> 1.500 to the string “linear”. 1.501 </p> 1.502 </dd> 1.503 <dt>If <var>property</var> is a case-sensitive match for 1.504 the string 'composite',</dt> 1.505 <dd> 1.506 - Set the <a>composition operation</a> of <var>keyframe 1.507 + Set the <code>composite</code> member of <var>keyframe 1.508 result</var> to the result applying <a 1.509 href="http://www.w3.org/TR/WebIDL/#es-enumeration">the 1.510 procedure for converting an ECMAScript value to an IDL 1.511 - enumeration type</a> defined in WebIDL [[!WEBIDL]] to 1.512 - <code><var>keyframe input</var>.offset</code> with 1.513 - <a>CompositeOperation</a> as the enumeration type. 1.514 + enumeration type</a> [[!WEBIDL]] with 1.515 + <a>CompositeOperation</a> as the enumeration type, to 1.516 + the result of calling the [‌[Get]] internal method on 1.517 + <var>keyframe input</var> with property name 'composite'. 1.518 </dd> 1.519 <dt>Otherwise, if <var>property</var> also exists in 1.520 <var>supported properties</var> based on a case-sensitive 1.521 @@ -7257,30 +7455,31 @@ 1.522 </p> 1.523 <li>Sort <var>animation properties</var> lexicographically by 1.524 the Unicode codepoints that define each element. 1.525 - <li>Iterate over <var>animation properties</var> and for each 1.526 - element, <var>name</var>, add a new property-value pair to 1.527 - <var>keyframe result</var> as follows: 1.528 + <li>Iterate over <var>animation properties</var> from beginning to 1.529 + end and for each <var>name</var> in <var>animation 1.530 + properties</var> add a new member pair to <var>keyframe 1.531 + result</var> as follows: 1.532 <ul> 1.533 - <li><em>property name</em>: the result of applying the 1.534 + <li><em>member name</em>: the result of applying the 1.535 the <a 1.536 - href="http://dev.w3.org/csswg/cssom/#idl-attribute-to-css-property">IDL 1.537 + href="http://dev.w3.org/csswg/cssom/#idl-attribute-to-css-property">IDL 1.538 attribute to CSS property</a> algorithm [[!CSSOM]] to 1.539 <var>name</var> unless <var>name</var> is 1.540 a case-sensitive match for the string 'cssFloat' in 1.541 which case use the string 'float'. 1.542 - <li><em>property value</em>: the result of calling 1.543 - <code>toString</code> on the <var>name</var> property of 1.544 - <var>keyframe input</var>. 1.545 - If the <var>name</var> property of <var>keyframe input</var> 1.546 - is null or undefined, let the property value be an empty 1.547 - string. 1.548 + <li><em>member value</em>: the result of calling 1.549 + <code>ToString</code> on the value returned from the 1.550 + [‌[Get]] method of <a>keyframe input</a> with property 1.551 + name, <var>name</var>. 1.552 + If [‌[Get]] returns null or undefined, let the member 1.553 + value be an empty string. 1.554 </ul> 1.555 <li>Return <var>keyframe result</var>. 1.556 </ol> 1.557 <div class="issue"> 1.558 <p> 1.559 The above algorithm gives special meaning to the property names 1.560 - 'offset', 'computedOffset', and 'composite'. 1.561 + 'offset', 'computedOffset', 'easing', and 'composite'. 1.562 If a CSS property called 'offset' or 'composite' is ever 1.563 introduced it will clash with the meaning here. 1.564 </p> 1.565 @@ -7290,86 +7489,13 @@ 1.566 <ul> 1.567 <li>Add special handling at that time to allow addressing the 1.568 property of the same name, e.g. <code>cssOffset</code>. 1.569 - <li>Rename these keywords now to avoid risk of a later clash, 1.570 + <li>Rename these keywords now to reduce risk of a later clash, 1.571 e.g. 'keyframeOffset'. 1.572 </ul> 1.573 </div> 1.574 </section> 1.575 </section> 1.576 <section> 1.577 - <h3>The <code>Keyframe</code> dictionary</h3> 1.578 - <p> 1.579 - Individual <a>keyframes</a> are represented by a special kind of 1.580 - <a title="Keyframe interface">Keyframe</a> dictionary type whose 1.581 - members map to the properties to be animated. 1.582 - At the time of writing, this kind of open-ended dictionary cannot 1.583 - be represented using WebIDL and hence special 1.584 - ECMAScript-specific handling for this type is defined in 1.585 - <a href="#normalizing-a-keyframe-object" class="sectionRef"></a>. 1.586 - No handling is defined for other languages. 1.587 - </p> 1.588 - <dl class="idl" title="dictionary Keyframe"> 1.589 - <dt>// ... property-value pairs ...</dt><dd></dd> 1.590 - <dt>double? offset = null</dt> 1.591 - <dd> 1.592 - <p> 1.593 - The <a>keyframe offset</a> of the <a>keyframe</a> specified as 1.594 - a number between 0.0 and 1.0 inclusive or <code>null</code>. 1.595 - </p> 1.596 - <p> 1.597 - <a>Keyframes</a> with offsets outside the range [0.0, 1.0] are 1.598 - ignored when calculating animation values as defined in 1.599 - <a href="#normalizing-a-list-of-keyframes" 1.600 - class="sectionRef"></a>. 1.601 - </p> 1.602 - <p> 1.603 - A <code>null</code> value indicates that the <a>keyframe</a> 1.604 - should be positioned using the <a>keyframe animation effect</a>'s 1.605 - <a>keyframe spacing mode</a>. 1.606 - </p> 1.607 - </dd> 1.608 - <dt>DOMString easing = "linear"</dt> 1.609 - <dd> 1.610 - <p> 1.611 - The <a>timing function</a> used to transform the progress of time 1.612 - from this keyframe until the next keyframe in the series. 1.613 - </p> 1.614 - <p> 1.615 - The syntax and error-handling associated with parsing this string 1.616 - is identical to that defined for the <code>easing</code> attribute 1.617 - of the <a title="Timing interface">Timing</a> interface. 1.618 - </p> 1.619 - </dd> 1.620 - <dt>CompositeOperation? composite = null</dt> 1.621 - <dd> 1.622 - <p> 1.623 - The <a>composition operation</a> used to combine the values 1.624 - specified in this keyframe with the <a>underlying value</a>. 1.625 - </p> 1.626 - <p> 1.627 - If <code>null</code>, the <a>composition operation</a> 1.628 - specified on the <a>AnimationEffect</a> will be used. 1.629 - </p> 1.630 - </dd> 1.631 - </dl> 1.632 - <div class="note"> 1.633 - <a title="Keyframe interface">Keyframe</a> objects returned by the 1.634 - <code>getFrames</code> method of <a>KeyframeEffect</a> include an 1.635 - additional Number property <code>computedOffset</code> representing 1.636 - the <a>keyframe offset</a> as calculated by <a 1.637 - href="#spacing-keyframes" class="sectionRef"></a>. 1.638 - </div> 1.639 - </section> 1.640 - <section> 1.641 - <h3>The <code>OneOrMoreKeyframes</code> typedef</h3> 1.642 - <div class="idl" 1.643 - title="typedef (Keyframe or sequence<Keyframe>) OneOrMoreKeyframes"> 1.644 - Throughout this specification we use the <a>OneOrMoreKeyframes</a> 1.645 - type to represent either a single keyframe or a list of such 1.646 - keyframes. 1.647 - </div> 1.648 - </section> 1.649 - <section> 1.650 <h3>The <code>MotionPathEffect</code> interface</h3> 1.651 <p> 1.652 <a>Motion path animation effects</a> are 1.653 @@ -8037,6 +8163,11 @@ 1.654 renamed <code>ParGroup</code> to <a>AnimationGroup</a>. 1.655 <li>Renamed <code>SeqGroup</code> to <a>AnimationSequence</a> and made 1.656 it inherit from <a>AnimationGroup</a>. 1.657 + <li>Changed the type of the <var>effect</var> argument to the <a 1.658 + title="Animation interface">Animation</a> constructor and 1.659 + the <code><a>Animatable</a>.animate</code> method to 1.660 + <code>object?</code> and defined its <a 1.661 + href="#processing-the-effect-parameter">processing</a>. 1.662 <li>Removed <code>null</code> as a possible value for the 1.663 <em>timing</em> parameter of the <a>AnimationGroup</a>, 1.664 <a>AnimationSequence</a> 1.665 @@ -8064,11 +8195,18 @@ 1.666 <li>Made <code>getFrames</code> on <a>KeyframeEffect</a> return the 1.667 computed <a>keyframe offset</a> as <code>computedOffset</code> and 1.668 apply the normalization of keyframes defined in <a 1.669 - href="#normalizing-a-list-of-keyframes" class="sectionRef"></a>. 1.670 + href="#normalizing-a-sequence-of-keyframes" class="sectionRef"></a>. 1.671 + <li>Removed the <code>OneOrMoreKeyframes</code> typedef since it is no 1.672 + longer a valid WebIDL union. Replaced useage of 1.673 + <code>OneOrMoreKeyframes</code> with <code>object</code> and defined 1.674 + its <a 1.675 + href="#processing-a-sequence-of-keyframe-objects-or-a-single-item">processing</a>. 1.676 <li>Made the normalization of keyframes no longer fill in the 1.677 - <a>keyframe offset</a> of a keyframe. 1.678 + <code>offset</code> of a keyframe. 1.679 This is now incorporated in <a href="#spacing-keyframes" 1.680 class="sectionRef"></a> which is now a core part of the model. 1.681 + <li>Defined the procedure used for iterating of the properties of 1.682 + a passed in keyframe object as using <code>Object.keys()</code>. 1.683 <li>Made the normalization of keyframes sort keyframes if all 1.684 <a>keyframe offset</a> are specified or otherwise throw an exception 1.685 if the frames are not <a>loosely sorted by offset</a> and not all
