Skip to content

Commit 1214f05

Browse files
birtlesbirtles
committed
Spec how getFrames set values on objects
This closes w3c#109.
1 parent a47930c commit 1214f05

File tree

1 file changed

+147
-56
lines changed

1 file changed

+147
-56
lines changed

‎Overview.src.html‎

Lines changed: 147 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ <h1>Web Animations Level 2</h1>
4747
urlPrefix: https://heycam.github.io/webidl/; type: dfn; spec: webidl
4848
text: es to dictionary
4949
text: es to DOMString; url: es-to-DOMString
50+
text: DOMString to es; url: DOMString-to-es
5051
urlPrefix: http://www.ecma-international.org/ecma-262/6.0/#sec-; type: dfn; spec: ecma-262
5152
text: GetIterator
5253
text: GetMethod
@@ -58,6 +59,7 @@ <h1>Web Animations Level 2</h1>
5859
text: Promise.resolve; url: promise.resolve
5960
text: ReturnIfAbrupt
6061
text: well known symbols
62+
text: [[DefineOwnProperty]]; url: ordinary-object-internal-methods-and-internal-slots-defineownproperty-p-desc
6163
urlPrefix: https://html.spec.whatwg.org/multipage/browsers.html; type: dfn; spec: html
6264
text: active document
6365
text: an entry with persisted user state
@@ -80,7 +82,9 @@ <h1>Web Animations Level 2</h1>
8082
url: https://svgwg.org/svg2-draft/pservers.html#StopElementOffsetAttribute; type: element-attr; for: stop; text: offset; spec: svg2
8183
url: https://svgwg.org/svg2-draft/mimereg.html#mime-registration; type: dfn; text: SVG MIME type; spec: svg2
8284
urlPrefix: http://dev.w3.org/csswg/cssom/; type: dfn; spec: cssom
85+
text: CSS property to IDL attribute
8386
text: IDL attribute to CSS property
87+
text: serialize a CSS value
8488
</pre>
8589
<pre class="link-defaults">
8690
spec:dom-ls; type:interface; text:EventTarget
@@ -6482,8 +6486,8 @@ <h3 id="the-keyframeeffect-interfaces">The <code>KeyframeEffectReadOnly</code>
64826486
readonly attribute IterationCompositeOperation iterationComposite;
64836487
readonly attribute CompositeOperation composite;
64846488
readonly attribute DOMString spacing;
6485-
KeyframeEffect clone();
6486-
sequence&lt;ComputedKeyframe&gt; getFrames ();
6489+
KeyframeEffect clone ();
6490+
sequence&lt;object&gt; getFrames ();
64876491
};
64886492

64896493
[Constructor (Animatable? target,
@@ -6687,18 +6691,122 @@ <h3 id="the-keyframeeffect-interfaces">The <code>KeyframeEffectReadOnly</code>
66876691
argument.
66886692

66896693
: <dfn method for=KeyframeEffectReadOnly lt="getFrames()">
6690-
sequence&lt;ComputedKeyframe&gt; getFrames()</dfn>
6694+
sequence&lt;object&gt; getFrames()</dfn>
66916695
:: Returns the <a>computed keyframes</a> that make up this effect along with
66926696
their <a>computed keyframe offsets</a>.
66936697

6694-
<div class="issue">
6698+
<div class='informative-bg'><em>This section is non-normative</em>
6699+
6700+
The result of this method is a sequence of objects of the following
6701+
format:
6702+
6703+
<pre class='lang-idl'>
6704+
dictionary ComputedKeyframe {
6705+
// ... property-value pairs ...
6706+
// i.e. DOMString propertyName
6707+
double? offset = null;
6708+
double computedOffset;
6709+
DOMString easing = "linear";
6710+
CompositeOperation? composite;
6711+
};
6712+
</pre>
6713+
6714+
The meaning and values of each member is as follows:
6715+
6716+
: <code>offset</code>
6717+
:: The <a>keyframe offset</a> of the <a>keyframe</a> specified as
6718+
a number between 0.0 and 1.0 inclusive or <code>null</code>.
66956719

6696-
Spec the exact steps here. Specifically describing how we set up these
6697-
objects (using \[[DefineOwnProperty]]) and the property names we use for
6698-
each part of the keyframes.
6720+
This will be <code>null</code> if the <a>keyframe</a> is
6721+
automatically spaced using the <a>keyframe effect</a>'s
6722+
<a>keyframe spacing mode</a>.
6723+
6724+
: <code>computedOffset</code>
6725+
:: The <a>computed keyframe offset</a> for this <a>keyframe</a>
6726+
calculated by applying the <a>keyframe effect</a>'s <a>keyframe
6727+
spacing mode</a> when the list of <a>computed keyframes</a> was
6728+
produced.
6729+
6730+
Unlike the <code>offset</code> member, the <code>computedOffset</code>
6731+
is never null.
6732+
6733+
: <code>easing</code>
6734+
:: The <a>timing function</a> used to transform the progress of time
6735+
from this keyframe until the next keyframe in the series.
6736+
6737+
: <code>composite</code>
6738+
:: The <a>keyframe-specific composite operation</a> used to combine the
6739+
values specified in this keyframe with the <a>underlying value</a>.
6740+
6741+
This member will be absent if the <a>composite operation</a>
6742+
specified on the <a>keyframe effect</a> is being used.
66996743

67006744
</div>
67016745

6746+
Since <a>keyframes</a> are represented by a partially open-ended dictionary
6747+
type that is not currently able to be expressed with WebIDL, the procedure
6748+
used to prepare the result of this method is defined in prose below:
6749+
6750+
1. Let <var>result</var> be an empty sequence of objects.
6751+
1. Let <var>computed keyframes</var> be the result of calculating the
6752+
<a>computed keyframes</a> for this <a>keyframe effect</a>
6753+
(see [[#computed-keyframes-section]]).
6754+
1. For each <var>computed keyframe</var> in <var>computed keyframes</var>
6755+
perform the following steps:
6756+
6757+
1. Initialize a dictionary object, <var>output keyframe</var>, using
6758+
the following definition:
6759+
6760+
<pre class='idl'>
6761+
dictionary BaseComputedKeyframe {
6762+
double? offset = null;
6763+
double computedOffset;
6764+
DOMString easing = "linear";
6765+
CompositeOperation composite;
6766+
};
6767+
</pre>
6768+
6769+
1. Set {{BaseComputedKeyframe/offset}},
6770+
{{BaseComputedKeyframe/computedOffset}},
6771+
{{BaseComputedKeyframe/easing}} members of
6772+
<var>output keyframe</var> to the respective values
6773+
<a>keyframe offset</a>,
6774+
<a>computed keyframe offset</a>, and
6775+
keyframe-specific <a>timing function</a>
6776+
of <var>computed keyframe</var>.
6777+
1. If <var>computed keyframe</var> has a <a>keyframe-specific composite
6778+
operation</a>, set {{BaseComputedKeyframe/composite}} to that value.
6779+
1. For each animation property-value pair specified on <var>computed
6780+
keyframe</var>, <var>declaration</var>, perform the following steps:
6781+
6782+
1. Let <var>property name</var> be the result of applying the
6783+
<a>animation property name to IDL attribute name</a> algorithm
6784+
to the property name of <var>declaration</var>.
6785+
1. Let <var>IDL value</var> be result of serializing the
6786+
the property value of <var>declaration</var>.
6787+
For CSS properties, this is the result of passing
6788+
<var>declaration</var> to the algorithm to <a>serialize a CSS
6789+
value</a> [[!CSSOM]].
6790+
6791+
Issue: Define serialization for SVG attributes.
6792+
6793+
1. Let <var>value</var> be the result of <a
6794+
lt="DOMString to es">converting</a> <var>IDL value</var> to an
6795+
ECMAScript String value.
6796+
1. Call the <a>\[[DefineOwnProperty]]</a> internal method on
6797+
<var>output keyframe</var> with property name <var>property
6798+
name</var>,
6799+
Property Descriptor {
6800+
\[[Writable]]: <span class=esvalue>true</span>,
6801+
\[[Enumerable]]: <span class=esvalue>true</span>,
6802+
\[[Configurable]]: <span class=esvalue>true</span>,
6803+
\[[Value]]: <var>value</var> }
6804+
and Boolean flag <span class=esvalue>false</a>.
6805+
6806+
1. Append <var>output keyframe</var> to <var>result</var>.
6807+
6808+
1. Return <var>result</var>.
6809+
67026810
: <dfn method for=KeyframeEffect lt='setFrames(frames)'>
67036811
void setFrames(object? frames)</dfn>
67046812
:: Replaces the set of <a>keyframes</a> that make up this effect.
@@ -6795,6 +6903,33 @@ <h4 id="creating-a-new-keyframeeffect-object">Creating a new <code>KeyframeEffec
67956903

67966904
</div>
67976905

6906+
<h4 id="property-name-conversion">Property names and IDL names</h4>
6907+
6908+
The <dfn>animation property name to IDL attribute name</dfn> algorithm for
6909+
<var>property</var> is as follows:
6910+
6911+
1. If <var>property</var> refers to the <{stop/offset}> attribute of
6912+
the SVG <{stop}> element, return the the string "svgOffset".
6913+
6914+
1. If <var>property</var> refers to the CSS 'float' property,
6915+
return the string "cssFloat".
6916+
6917+
1. Otherwise, return the result of applying the <a>CSS property to IDL
6918+
attribute</a> algorithm [[!CSSOM]] to <var>property</var>.
6919+
6920+
The <dfn>IDL attribute name to animation property name</dfn> algorithm for
6921+
<var>attribute</var> is as follows:
6922+
6923+
1. If <var>attribute</var> is the string "svgOffset", then return
6924+
an animation property representing the <{stop/offset}> attribute
6925+
of the SVG <{stop}> element.
6926+
6927+
1. If <var>attribute</var> is the string "cssFloat", then return
6928+
an animation property representing the CSS 'float' property.
6929+
6930+
1. Otherwise, return the result of applying the <a>IDL attribute to CSS
6931+
property</a> algorithm [[!CSSOM]] to <var>attribute</var>.
6932+
67986933
<h4 id="processing-a-frames-argument">Processing a <code>frames</code>
67996934
argument</h4>
68006935

@@ -6998,16 +7133,8 @@ <h4 id="processing-a-frames-argument">Processing a <code>frames</code>
69987133
names and attribute names that can be animated by the
69997134
implementation.
70007135
1. Convert each property name in <var>animatable properties</var>
7001-
to the equivalent IDL attribute by applying the <a
7002-
href="http://dev.w3.org/csswg/cssom/#css-property-to-idl-attribute">CSS
7003-
property to IDL attribute</a> algorithm [[!CSSOM]].
7004-
1. If the user agent supports animation of the 'float'
7005-
CSS property, replace "float" in
7006-
<var>animatable properties</var> with "cssFloat".
7007-
1. If the user agent supports animation of the
7008-
<{stop/offset}> attribute of <{stop}> elements [[!SVG2]],
7009-
replace "offset" in <var>animatable properties</var> with "svgOffset".
7010-
7136+
to the equivalent IDL attribute by applying the
7137+
<a>animation property name to IDL attribute name</a> algorithm.
70117138

70127139
1. Let <var>input properties</var> be the result of calling the <a
70137140
href="http://www.ecma-international.org/ecma-262/6.0/#sec-enumerableownnames">EnumerableOwnNames</a> operation with <var>keyframe input</var> as the object.
@@ -7051,21 +7178,9 @@ <h4 id="processing-a-frames-argument">Processing a <code>frames</code>
70517178

70527179
</div>
70537180

7054-
1. Calculate the <var>normalized property name</var> as the result of the
7055-
first matching condition from the following:
7056-
7057-
<div class="switch">
7058-
: If <var>property name</var> is the string "cssFloat",
7059-
:: "float".
7060-
7061-
: If <var>property name</var> is the string "svgOffset",
7062-
:: "offset"
7063-
7064-
: Otherwise,
7065-
:: the result of applying the <a>IDL attribute to CSS property</a>
7066-
algorithm [[!CSSOM]] to <var>property name</var>.
7067-
7068-
</div>
7181+
1. Calculate the <var>normalized property name</var> as the result of
7182+
applying the <a>IDL attribute name to animation property name</a>
7183+
algorithm to <var>property name</var>.
70697184

70707185
1. Add a property to to <var>keyframe output</var> with <var>normalized
70717186
property name</var> as the property name, and <var>property values</var>
@@ -7355,30 +7470,6 @@ <h3 id="the-compositeoperation-enumeration">The <code>CompositeOperation</code>
73557470
lt="animation accumulation">accumulated</a> on to the
73567471
<a>underlying value</a>.
73577472

7358-
<h3 id="the-computedkeyframe-dictionary">The <code>ComputedKeyframe</code> dictionary</h3>
7359-
7360-
<a>Keyframes</a> returned by the {{KeyframeEffectReadOnly/getFrames()}} method
7361-
of the {{KeyframeEffectReadOnly}} interface are represented using
7362-
{{ComputedKeyframe}} dictionary objects.
7363-
7364-
<pre class='idl'>
7365-
dictionary ComputedKeyframe {
7366-
double? offset = null;
7367-
DOMString easing = "linear";
7368-
CompositeOperation composite;
7369-
double computedOffset;
7370-
};
7371-
</pre>
7372-
7373-
<div class='members'>
7374-
7375-
: <dfn dict-member for=ComputedKeyframe>computedOffset</dfn>
7376-
:: The <a>computed keyframe offset</a> calculated for this <a>keyframe</a> as
7377-
a result of applying the spacing procedure defined in
7378-
[[#spacing-keyframes]].
7379-
7380-
</div>
7381-
73827473
<h3 id="the-sharedkeyframelist-interface">The <code>SharedKeyframeList</code> interface</h3>
73837474

73847475
The {{SharedKeyframeList}} interface represents a sequence of <a>keyframes</a>

0 commit comments

Comments
 (0)