[Web Animations] Implement CSS Animations and CSS Transitions as Web Animations
[WebKit-https.git] / Source / WebCore / animation / KeyframeEffectReadOnly.cpp
1 /*
2  * Copyright (C) 2017 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
14  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
15  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
17  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
18  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
19  * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
20  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
21  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
22  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 #include "config.h"
27 #include "KeyframeEffectReadOnly.h"
28
29 #include "Animation.h"
30 #include "AnimationEffectTimingReadOnly.h"
31 #include "CSSAnimation.h"
32 #include "CSSComputedStyleDeclaration.h"
33 #include "CSSPropertyAnimation.h"
34 #include "CSSPropertyNames.h"
35 #include "CSSStyleDeclaration.h"
36 #include "CSSTimingFunctionValue.h"
37 #include "CSSTransition.h"
38 #include "Element.h"
39 #include "FontCascade.h"
40 #include "JSCompositeOperation.h"
41 #include "JSKeyframeEffectReadOnly.h"
42 #include "RenderBoxModelObject.h"
43 #include "RenderElement.h"
44 #include "RenderStyle.h"
45 #include "StylePendingResources.h"
46 #include "StyleResolver.h"
47 #include "TimingFunction.h"
48 #include "WillChangeData.h"
49 #include <wtf/UUID.h>
50
51 namespace WebCore {
52 using namespace JSC;
53
54 static inline void invalidateElement(Element* element)
55 {
56     if (element)
57         element->invalidateStyleAndLayerComposition();
58 }
59
60 static inline String CSSPropertyIDToIDLAttributeName(CSSPropertyID cssPropertyId)
61 {
62     // https://drafts.csswg.org/web-animations-1/#animation-property-name-to-idl-attribute-name
63     // 1. If property follows the <custom-property-name> production, return property.
64     // FIXME: We don't handle custom properties yet.
65
66     // 2. If property refers to the CSS float property, return the string "cssFloat".
67     if (cssPropertyId == CSSPropertyFloat)
68         return "cssFloat";
69
70     // 3. If property refers to the CSS offset property, return the string "cssOffset".
71     // FIXME: we don't support the CSS "offset" property
72
73     // 4. Otherwise, return the result of applying the CSS property to IDL attribute algorithm [CSSOM] to property.
74     return getJSPropertyName(cssPropertyId);
75 }
76
77 static inline CSSPropertyID IDLAttributeNameToAnimationPropertyName(const String& idlAttributeName)
78 {
79     // https://drafts.csswg.org/web-animations-1/#idl-attribute-name-to-animation-property-name
80     // 1. If attribute conforms to the <custom-property-name> production, return attribute.
81     // FIXME: We don't handle custom properties yet.
82
83     // 2. If attribute is the string "cssFloat", then return an animation property representing the CSS float property.
84     if (idlAttributeName == "cssFloat")
85         return CSSPropertyFloat;
86
87     // 3. If attribute is the string "cssOffset", then return an animation property representing the CSS offset property.
88     // FIXME: We don't support the CSS "offset" property.
89
90     // 4. Otherwise, return the result of applying the IDL attribute to CSS property algorithm [CSSOM] to attribute.
91     auto cssPropertyId = CSSStyleDeclaration::getCSSPropertyIDFromJavaScriptPropertyName(idlAttributeName);
92
93     // We need to check that converting the property back to IDL form yields the same result such that a property passed
94     // in non-IDL form is rejected, for instance "font-size".
95     if (idlAttributeName != CSSPropertyIDToIDLAttributeName(cssPropertyId))
96         return CSSPropertyInvalid;
97
98     return cssPropertyId;
99 }
100
101 static inline void computeMissingKeyframeOffsets(Vector<KeyframeEffectReadOnly::ParsedKeyframe>& keyframes)
102 {
103     // https://drafts.csswg.org/web-animations-1/#compute-missing-keyframe-offsets
104
105     if (keyframes.isEmpty())
106         return;
107
108     // 1. For each keyframe, in keyframes, let the computed keyframe offset of the keyframe be equal to its keyframe offset value.
109     // In our implementation, we only set non-null values to avoid making computedOffset std::optional<double>. Instead, we'll know
110     // that a keyframe hasn't had a computed offset by checking if it has a null offset and a 0 computedOffset, since the first
111     // keyframe will already have a 0 computedOffset.
112     for (auto& keyframe : keyframes)
113         keyframe.computedOffset = keyframe.offset.value_or(0);
114
115     // 2. If keyframes contains more than one keyframe and the computed keyframe offset of the first keyframe in keyframes is null,
116     //    set the computed keyframe offset of the first keyframe to 0.
117     if (keyframes.size() > 1 && !keyframes[0].offset)
118         keyframes[0].computedOffset = 0;
119
120     // 3. If the computed keyframe offset of the last keyframe in keyframes is null, set its computed keyframe offset to 1.
121     if (!keyframes.last().offset)
122         keyframes.last().computedOffset = 1;
123
124     // 4. For each pair of keyframes A and B where:
125     //    - A appears before B in keyframes, and
126     //    - A and B have a computed keyframe offset that is not null, and
127     //    - all keyframes between A and B have a null computed keyframe offset,
128     //    calculate the computed keyframe offset of each keyframe between A and B as follows:
129     //    1. Let offsetk be the computed keyframe offset of a keyframe k.
130     //    2. Let n be the number of keyframes between and including A and B minus 1.
131     //    3. Let index refer to the position of keyframe in the sequence of keyframes between A and B such that the first keyframe after A has an index of 1.
132     //    4. Set the computed keyframe offset of keyframe to offsetA + (offsetB − offsetA) × index / n.
133     size_t indexOfLastKeyframeWithNonNullOffset = 0;
134     for (size_t i = 1; i < keyframes.size(); ++i) {
135         auto& keyframe = keyframes[i];
136         if (!keyframe.computedOffset)
137             continue;
138         if (indexOfLastKeyframeWithNonNullOffset == i - 1)
139             continue;
140
141         double lastNonNullOffset = keyframes[indexOfLastKeyframeWithNonNullOffset].computedOffset;
142         double offsetDelta = keyframe.computedOffset - lastNonNullOffset;
143         double offsetIncrement = offsetDelta / (i - indexOfLastKeyframeWithNonNullOffset);
144         size_t indexOfFirstKeyframeWithNullOffset = indexOfLastKeyframeWithNonNullOffset + 1;
145         for (size_t j = indexOfFirstKeyframeWithNullOffset; j < i; ++j)
146             keyframes[j].computedOffset = lastNonNullOffset + (j - indexOfLastKeyframeWithNonNullOffset) * offsetIncrement;
147
148         indexOfLastKeyframeWithNonNullOffset = i;
149     }
150 }
151
152 static inline ExceptionOr<void> processIterableKeyframes(ExecState& state, Strong<JSObject>&& keyframesInput, JSValue method, Vector<KeyframeEffectReadOnly::ParsedKeyframe>& parsedKeyframes)
153 {
154     VM& vm = state.vm();
155     auto scope = DECLARE_THROW_SCOPE(vm);
156
157     // 1. Let iter be GetIterator(object, method).
158     forEachInIterable(state, keyframesInput.get(), method, [&parsedKeyframes](VM& vm, ExecState& state, JSValue nextValue) -> ExceptionOr<void> {
159         if (!nextValue || !nextValue.isObject())
160             return Exception { TypeError };
161
162         auto scope = DECLARE_THROW_SCOPE(vm);
163
164         JSObject* keyframe = nextValue.toObject(&state);
165         PropertyNameArray ownPropertyNames(&vm, PropertyNameMode::Strings, PrivateSymbolMode::Exclude);
166         JSObject::getOwnPropertyNames(keyframe, &state, ownPropertyNames, EnumerationMode());
167         size_t numberOfProperties = ownPropertyNames.size();
168
169         KeyframeEffectReadOnly::ParsedKeyframe keyframeOutput;
170
171         String easing("linear");
172         std::optional<double> offset;
173         std::optional<CompositeOperation> composite;
174
175         for (size_t j = 0; j < numberOfProperties; ++j) {
176             auto ownPropertyName = ownPropertyNames[j];
177             if (ownPropertyName == "easing")
178                 easing = convert<IDLDOMString>(state, keyframe->get(&state, ownPropertyName));
179             else if (ownPropertyName == "offset")
180                 offset = convert<IDLNullable<IDLDouble>>(state, keyframe->get(&state, ownPropertyName));
181             else if (ownPropertyName == "composite")
182                 composite = convert<IDLNullable<IDLEnumeration<CompositeOperation>>>(state, keyframe->get(&state, ownPropertyName));
183             else {
184                 auto cssPropertyId = IDLAttributeNameToAnimationPropertyName(ownPropertyName.string());
185                 if (CSSPropertyAnimation::isPropertyAnimatable(cssPropertyId)) {
186                     auto stringValue = convert<IDLDOMString>(state, keyframe->get(&state, ownPropertyName));
187                     if (keyframeOutput.style->setProperty(cssPropertyId, stringValue))
188                         keyframeOutput.unparsedStyle.set(cssPropertyId, stringValue);
189                 }
190             }
191             RETURN_IF_EXCEPTION(scope, Exception { TypeError });
192         }
193
194         keyframeOutput.easing = easing;
195         keyframeOutput.offset = offset;
196         keyframeOutput.composite = composite;
197
198         parsedKeyframes.append(WTFMove(keyframeOutput));
199
200         return { };
201     });
202     RETURN_IF_EXCEPTION(scope, Exception { TypeError });
203
204     return { };
205 }
206
207 static inline ExceptionOr<KeyframeEffectReadOnly::KeyframeLikeObject> processKeyframeLikeObject(ExecState& state, Strong<JSObject>&& keyframesInput)
208 {
209     // https://drafts.csswg.org/web-animations-1/#process-a-keyframe-like-object
210
211     VM& vm = state.vm();
212     auto scope = DECLARE_THROW_SCOPE(vm);
213
214     // 1. Run the procedure to convert an ECMAScript value to a dictionary type [WEBIDL] with keyframe input as the ECMAScript value as follows:
215     // 
216     //    dictionary BasePropertyIndexedKeyframe {
217     //        (double? or sequence<double?>)                       offset = [];
218     //        (DOMString or sequence<DOMString>)                   easing = [];
219     //        (CompositeOperation? or sequence<CompositeOperation?>) composite = [];
220     //    };
221     //
222     //    Store the result of this procedure as keyframe output.
223     auto baseProperties = convert<IDLDictionary<KeyframeEffectReadOnly::BasePropertyIndexedKeyframe>>(state, keyframesInput.get());
224     RETURN_IF_EXCEPTION(scope, Exception { TypeError });
225
226     KeyframeEffectReadOnly::KeyframeLikeObject keyframeOuput;
227     keyframeOuput.baseProperties = baseProperties;
228
229     // 2. Build up a list of animatable properties as follows:
230     //
231     //    1. Let animatable properties be a list of property names (including shorthand properties that have longhand sub-properties
232     //       that are animatable) that can be animated by the implementation.
233     //    2. Convert each property name in animatable properties to the equivalent IDL attribute by applying the animation property
234     //       name to IDL attribute name algorithm.
235
236     // 3. Let input properties be the result of calling the EnumerableOwnNames operation with keyframe input as the object.
237     PropertyNameArray inputProperties(&vm, PropertyNameMode::Strings, PrivateSymbolMode::Exclude);
238     JSObject::getOwnPropertyNames(keyframesInput.get(), &state, inputProperties, EnumerationMode());
239
240     // 4. Make up a new list animation properties that consists of all of the properties that are in both input properties and animatable
241     //    properties, or which are in input properties and conform to the <custom-property-name> production.
242
243     // 5. Sort animation properties in ascending order by the Unicode codepoints that define each property name.
244     //    We only actually perform this after step 6.
245
246     // 6. For each property name in animation properties,
247     size_t numberOfProperties = inputProperties.size();
248     for (size_t i = 0; i < numberOfProperties; ++i) {
249         auto cssPropertyID = IDLAttributeNameToAnimationPropertyName(inputProperties[i].string());
250         if (!CSSPropertyAnimation::isPropertyAnimatable(cssPropertyID))
251             continue;
252
253         // 1. Let raw value be the result of calling the [[Get]] internal method on keyframe input, with property name as the property
254         //    key and keyframe input as the receiver.
255         auto rawValue = keyframesInput->get(&state, inputProperties[i]);
256
257         // 2. Check the completion record of raw value.
258         RETURN_IF_EXCEPTION(scope, Exception { TypeError });
259
260         // 3. Convert raw value to a DOMString or sequence of DOMStrings property values as follows:
261         Vector<String> propertyValues;
262         // Let property values be the result of converting raw value to IDL type (DOMString or sequence<DOMString>)
263         // using the procedures defined for converting an ECMAScript value to an IDL value [WEBIDL].
264         // If property values is a single DOMString, replace property values with a sequence of DOMStrings with the original value of property
265         // Values as the only element.
266         if (rawValue.isString())
267             propertyValues = { rawValue.toWTFString(&state) };
268         else
269             propertyValues = convert<IDLSequence<IDLDOMString>>(state, rawValue);
270         RETURN_IF_EXCEPTION(scope, Exception { TypeError });
271
272         // 4. Calculate the normalized property name as the result of applying the IDL attribute name to animation property name algorithm to property name.
273         // 5. Add a property to to keyframe output with normalized property name as the property name, and property values as the property value.
274         keyframeOuput.propertiesAndValues.append({ cssPropertyID, propertyValues });
275     }
276
277     // Now we can perform step 5.
278     std::sort(keyframeOuput.propertiesAndValues.begin(), keyframeOuput.propertiesAndValues.end(), [](auto& lhs, auto& rhs) {
279         return getPropertyNameString(lhs.property).utf8() < getPropertyNameString(rhs.property).utf8();
280     });
281
282     // 7. Return keyframe output.
283     return { WTFMove(keyframeOuput) };
284 }
285
286 static inline ExceptionOr<void> processPropertyIndexedKeyframes(ExecState& state, Strong<JSObject>&& keyframesInput, Vector<KeyframeEffectReadOnly::ParsedKeyframe>& parsedKeyframes, Vector<String>& unusedEasings)
287 {
288     // 1. Let property-indexed keyframe be the result of running the procedure to process a keyframe-like object passing object as the keyframe input.
289     auto processKeyframeLikeObjectResult = processKeyframeLikeObject(state, WTFMove(keyframesInput));
290     if (processKeyframeLikeObjectResult.hasException())
291         return processKeyframeLikeObjectResult.releaseException();
292     auto propertyIndexedKeyframe = processKeyframeLikeObjectResult.returnValue();
293
294     // 2. For each member, m, in property-indexed keyframe, perform the following steps:
295     for (auto& m : propertyIndexedKeyframe.propertiesAndValues) {
296         // 1. Let property name be the key for m.
297         auto propertyName = m.property;
298         // 2. If property name is “composite”, or “easing”, or “offset”, skip the remaining steps in this loop and continue from the next member in property-indexed
299         //    keyframe after m.
300         //    We skip this test since we split those properties and the actual CSS properties that we're currently iterating over.
301         // 3. Let property values be the value for m.
302         auto propertyValues = m.values;
303         // 4. Let property keyframes be an empty sequence of keyframes.
304         Vector<KeyframeEffectReadOnly::ParsedKeyframe> propertyKeyframes;
305         // 5. For each value, v, in property values perform the following steps:
306         for (auto& v : propertyValues) {
307             // 1. Let k be a new keyframe with a null keyframe offset.
308             KeyframeEffectReadOnly::ParsedKeyframe k;
309             // 2. Add the property-value pair, property name → v, to k.
310             if (k.style->setProperty(propertyName, v))
311                 k.unparsedStyle.set(propertyName, v);
312             // 3. Append k to property keyframes.
313             propertyKeyframes.append(WTFMove(k));
314         }
315         // 6. Apply the procedure to compute missing keyframe offsets to property keyframes.
316         computeMissingKeyframeOffsets(propertyKeyframes);
317
318         // 7. Add keyframes in property keyframes to processed keyframes.
319         for (auto& keyframe : propertyKeyframes)
320             parsedKeyframes.append(WTFMove(keyframe));
321     }
322
323     // 3. Sort processed keyframes by the computed keyframe offset of each keyframe in increasing order.
324     std::sort(parsedKeyframes.begin(), parsedKeyframes.end(), [](auto& lhs, auto& rhs) {
325         return lhs.computedOffset < rhs.computedOffset;
326     });
327
328     // 4. Merge adjacent keyframes in processed keyframes when they have equal computed keyframe offsets.
329     size_t i = 1;
330     while (i < parsedKeyframes.size()) {
331         auto& keyframe = parsedKeyframes[i];
332         auto& previousKeyframe = parsedKeyframes[i - 1];
333         // If the offsets of this keyframe and the previous keyframe are different,
334         // this means that the two keyframes should not be merged and we can move
335         // on to the next keyframe.
336         if (keyframe.computedOffset != previousKeyframe.computedOffset) {
337             i++;
338             continue;
339         }
340         // Otherwise, both this keyframe and the previous keyframe should be merged.
341         // Unprocessed keyframes in parsedKeyframes at this stage have at most a single
342         // property in cssPropertiesAndValues, so just set this on the previous keyframe.
343         // In case an invalid or null value was originally provided, then the property
344         // was not set and the property count is 0, in which case there is nothing to merge.
345         if (keyframe.style->propertyCount()) {
346             auto property = keyframe.style->propertyAt(0);
347             previousKeyframe.style->setProperty(property.id(), property.value());
348             previousKeyframe.unparsedStyle.set(property.id(), keyframe.unparsedStyle.get(property.id()));
349         }
350         // Since we've processed this keyframe, we can remove it and keep i the same
351         // so that we process the next keyframe in the next loop iteration.
352         parsedKeyframes.remove(i);
353     }
354
355     // 5. Let offsets be a sequence of nullable double values assigned based on the type of the “offset” member of the property-indexed keyframe as follows:
356     //    - sequence<double?>, the value of “offset” as-is.
357     //    - double?, a sequence of length one with the value of “offset” as its single item, i.e. « offset »,
358     Vector<std::optional<double>> offsets;
359     if (WTF::holds_alternative<Vector<std::optional<double>>>(propertyIndexedKeyframe.baseProperties.offset))
360         offsets = WTF::get<Vector<std::optional<double>>>(propertyIndexedKeyframe.baseProperties.offset);
361     else if (WTF::holds_alternative<double>(propertyIndexedKeyframe.baseProperties.offset))
362         offsets.append(WTF::get<double>(propertyIndexedKeyframe.baseProperties.offset));
363     else if (WTF::holds_alternative<std::nullptr_t>(propertyIndexedKeyframe.baseProperties.offset))
364         offsets.append(std::nullopt);
365
366     // 6. Assign each value in offsets to the keyframe offset of the keyframe with corresponding position in property keyframes until the end of either sequence is reached.
367     for (size_t i = 0; i < offsets.size() && i < parsedKeyframes.size(); ++i)
368         parsedKeyframes[i].offset = offsets[i];
369
370     // 7. Let easings be a sequence of DOMString values assigned based on the type of the “easing” member of the property-indexed keyframe as follows:
371     //    - sequence<DOMString>, the value of “easing” as-is.
372     //    - DOMString, a sequence of length one with the value of “easing” as its single item, i.e. « easing »,
373     Vector<String> easings;
374     if (WTF::holds_alternative<Vector<String>>(propertyIndexedKeyframe.baseProperties.easing))
375         easings = WTF::get<Vector<String>>(propertyIndexedKeyframe.baseProperties.easing);
376     else if (WTF::holds_alternative<String>(propertyIndexedKeyframe.baseProperties.easing))
377         easings.append(WTF::get<String>(propertyIndexedKeyframe.baseProperties.easing));
378
379     // 8. If easings is an empty sequence, let it be a sequence of length one containing the single value “linear”, i.e. « "linear" ».
380     if (easings.isEmpty())
381         easings.append("linear");
382
383     // 9. If easings has fewer items than property keyframes, repeat the elements in easings successively starting from the beginning of the list until easings has as many
384     //    items as property keyframes.
385     if (easings.size() < parsedKeyframes.size()) {
386         size_t initialNumberOfEasings = easings.size();
387         for (i = initialNumberOfEasings + 1; i <= parsedKeyframes.size(); ++i)
388             easings.append(easings[i % initialNumberOfEasings]);
389     }
390
391     // 10. If easings has more items than property keyframes, store the excess items as unused easings.
392     while (easings.size() > parsedKeyframes.size())
393         unusedEasings.append(easings.takeLast());
394
395     // 11. Assign each value in easings to a property named “easing” on the keyframe with the corresponding position in property keyframes until the end of property keyframes
396     //     is reached.
397     for (size_t i = 0; i < parsedKeyframes.size(); ++i)
398         parsedKeyframes[i].easing = easings[i];
399
400     // 12. If the “composite” member of the property-indexed keyframe is not an empty sequence:
401     Vector<std::optional<CompositeOperation>> compositeModes;
402     if (WTF::holds_alternative<Vector<std::optional<CompositeOperation>>>(propertyIndexedKeyframe.baseProperties.composite))
403         compositeModes = WTF::get<Vector<std::optional<CompositeOperation>>>(propertyIndexedKeyframe.baseProperties.composite);
404     else if (WTF::holds_alternative<CompositeOperation>(propertyIndexedKeyframe.baseProperties.composite))
405         compositeModes.append(WTF::get<CompositeOperation>(propertyIndexedKeyframe.baseProperties.composite));
406     else if (WTF::holds_alternative<std::nullptr_t>(propertyIndexedKeyframe.baseProperties.composite))
407         compositeModes.append(std::nullopt);
408     if (!compositeModes.isEmpty()) {
409         // 1. Let composite modes be a sequence of composite operations assigned from the “composite” member of property-indexed keyframe. If that member is a single composite
410         //    operation, let composite modes be a sequence of length one, with the value of the “composite” as its single item.
411         // 2. As with easings, if composite modes has fewer items than property keyframes, repeat the elements in composite modes successively starting from the beginning of
412         //    the list until composite modes has as many items as property keyframes.
413         if (compositeModes.size() < parsedKeyframes.size()) {
414             size_t initialNumberOfCompositeModes = compositeModes.size();
415             for (i = initialNumberOfCompositeModes + 1; i <= parsedKeyframes.size(); ++i)
416                 compositeModes.append(compositeModes[i % initialNumberOfCompositeModes]);
417         }
418         // 3. Assign each value in composite modes to the keyframe-specific composite operation on the keyframe with the corresponding position in property keyframes until
419         //    the end of property keyframes is reached.
420         for (size_t i = 0; i < compositeModes.size() && i < parsedKeyframes.size(); ++i)
421             parsedKeyframes[i].composite = compositeModes[i];
422     }
423
424     return { };
425 }
426
427 ExceptionOr<Ref<KeyframeEffectReadOnly>> KeyframeEffectReadOnly::create(ExecState& state, Element* target, Strong<JSObject>&& keyframes, std::optional<Variant<double, KeyframeEffectOptions>>&& options)
428 {
429     auto keyframeEffect = adoptRef(*new KeyframeEffectReadOnly(KeyframeEffectReadOnlyClass, AnimationEffectTimingReadOnly::create(), target));
430
431     auto setPropertiesResult = keyframeEffect->timing()->setProperties(WTFMove(options));
432     if (setPropertiesResult.hasException())
433         return setPropertiesResult.releaseException();
434
435     auto processKeyframesResult = keyframeEffect->processKeyframes(state, WTFMove(keyframes));
436     if (processKeyframesResult.hasException())
437         return processKeyframesResult.releaseException();
438
439     return WTFMove(keyframeEffect);
440 }
441
442 ExceptionOr<Ref<KeyframeEffectReadOnly>> KeyframeEffectReadOnly::create(JSC::ExecState&, Ref<KeyframeEffectReadOnly>&& source)
443 {
444     auto keyframeEffect = adoptRef(*new KeyframeEffectReadOnly(KeyframeEffectReadOnlyClass, AnimationEffectTimingReadOnly::create(), nullptr));
445     keyframeEffect->copyPropertiesFromSource(WTFMove(source));
446     return WTFMove(keyframeEffect);
447 }
448
449 Ref<KeyframeEffectReadOnly> KeyframeEffectReadOnly::create(const Element& target)
450 {
451     return adoptRef(*new KeyframeEffectReadOnly(KeyframeEffectReadOnlyClass, AnimationEffectTimingReadOnly::create(), const_cast<Element*>(&target)));
452 }
453
454 KeyframeEffectReadOnly::KeyframeEffectReadOnly(ClassType classType, Ref<AnimationEffectTimingReadOnly>&& timing, Element* target)
455     : AnimationEffectReadOnly(classType, WTFMove(timing))
456     , m_target(target)
457     , m_blendingKeyframes(emptyString())
458 {
459 }
460
461 void KeyframeEffectReadOnly::copyPropertiesFromSource(Ref<KeyframeEffectReadOnly>&& source)
462 {
463     m_target = source->m_target;
464     m_compositeOperation = source->m_compositeOperation;
465     m_iterationCompositeOperation = source->m_iterationCompositeOperation;
466
467     Vector<ParsedKeyframe> parsedKeyframes;
468     for (auto& sourceParsedKeyframe : source->m_parsedKeyframes) {
469         ParsedKeyframe parsedKeyframe;
470         parsedKeyframe.easing = sourceParsedKeyframe.easing;
471         parsedKeyframe.offset = sourceParsedKeyframe.offset;
472         parsedKeyframe.composite = sourceParsedKeyframe.composite;
473         parsedKeyframe.unparsedStyle = sourceParsedKeyframe.unparsedStyle;
474         parsedKeyframe.computedOffset = sourceParsedKeyframe.computedOffset;
475         parsedKeyframe.timingFunction = sourceParsedKeyframe.timingFunction;
476         parsedKeyframe.style = sourceParsedKeyframe.style->mutableCopy();
477         parsedKeyframes.append(WTFMove(parsedKeyframe));
478     }
479     m_parsedKeyframes = WTFMove(parsedKeyframes);
480
481     timing()->copyPropertiesFromSource(source->timing());
482
483     KeyframeList keyframeList("keyframe-effect-" + createCanonicalUUIDString());
484     for (auto& keyframe : source->m_blendingKeyframes.keyframes()) {
485         KeyframeValue keyframeValue(keyframe.key(), RenderStyle::clonePtr(*keyframe.style()));
486         for (auto propertyId : keyframe.properties())
487             keyframeValue.addProperty(propertyId);
488         keyframeList.insert(WTFMove(keyframeValue));
489     }
490     m_blendingKeyframes = WTFMove(keyframeList);
491 }
492
493 Vector<Strong<JSObject>> KeyframeEffectReadOnly::getKeyframes(ExecState& state)
494 {
495     // https://drafts.csswg.org/web-animations-1/#dom-keyframeeffectreadonly-getkeyframes
496
497     auto lock = JSLockHolder { &state };
498
499     // Since keyframes are represented by a partially open-ended dictionary type that is not currently able to be expressed with WebIDL,
500     // the procedure used to prepare the result of this method is defined in prose below:
501     //
502     // 1. Let result be an empty sequence of objects.
503     Vector<Strong<JSObject>> result;
504
505     // 2. Let keyframes be the result of applying the procedure to compute missing keyframe offsets to the keyframes for this keyframe effect.
506
507     // 3. For each keyframe in keyframes perform the following steps:
508     if (is<DeclarativeAnimation>(animation())) {
509         auto computedStyleExtractor = ComputedStyleExtractor(m_target.get());
510         for (size_t i = 0; i < m_blendingKeyframes.size(); ++i) {
511             // 1. Initialize a dictionary object, output keyframe, using the following definition:
512             //
513             // dictionary BaseComputedKeyframe {
514             //      double?             offset = null;
515             //      double              computedOffset;
516             //      DOMString           easing = "linear";
517             //      CompositeOperation? composite = null;
518             // };
519
520             auto& keyframe = m_blendingKeyframes[i];
521
522             // 2. Set offset, computedOffset, easing members of output keyframe to the respective values keyframe offset, computed keyframe offset,
523             // and keyframe-specific timing function of keyframe.
524             BaseComputedKeyframe computedKeyframe;
525             computedKeyframe.offset = keyframe.key();
526             computedKeyframe.computedOffset = keyframe.key();
527
528             auto outputKeyframe = convertDictionaryToJS(state, *jsCast<JSDOMGlobalObject*>(state.lexicalGlobalObject()), computedKeyframe);
529
530             // 3. For each animation property-value pair specified on keyframe, declaration, perform the following steps:
531             auto& style = *keyframe.style();
532             for (auto cssPropertyId : keyframe.properties()) {
533                 // 1. Let property name be the result of applying the animation property name to IDL attribute name algorithm to the property name of declaration.
534                 auto propertyName = CSSPropertyIDToIDLAttributeName(cssPropertyId);
535                 // 2. Let IDL value be the result of serializing the property value of declaration by passing declaration to the algorithm to serialize a CSS value.
536                 auto idlValue = computedStyleExtractor.valueForPropertyinStyle(style, cssPropertyId)->cssText();
537                 // 3. Let value be the result of converting IDL value to an ECMAScript String value.
538                 auto value = toJS<IDLDOMString>(state, idlValue);
539                 // 4. Call the [[DefineOwnProperty]] internal method on output keyframe with property name property name,
540                 //    Property Descriptor { [[Writable]]: true, [[Enumerable]]: true, [[Configurable]]: true, [[Value]]: value } and Boolean flag false.
541                 JSObject::defineOwnProperty(outputKeyframe, &state, AtomicString(propertyName).impl(), PropertyDescriptor(value, 0), false);
542             }
543
544             // 5. Append output keyframe to result.
545             result.append(JSC::Strong<JSC::JSObject> { state.vm(), outputKeyframe });
546         }
547     } else {
548         for (auto& parsedKeyframe : m_parsedKeyframes) {
549             // 1. Initialize a dictionary object, output keyframe, using the following definition:
550             //
551             // dictionary BaseComputedKeyframe {
552             //      double?             offset = null;
553             //      double              computedOffset;
554             //      DOMString           easing = "linear";
555             //      CompositeOperation? composite = null;
556             // };
557
558             // 2. Set offset, computedOffset, easing, composite members of output keyframe to the respective values keyframe offset, computed keyframe
559             // offset, keyframe-specific timing function and keyframe-specific composite operation of keyframe.
560             BaseComputedKeyframe computedKeyframe;
561             computedKeyframe.offset = parsedKeyframe.offset;
562             computedKeyframe.computedOffset = parsedKeyframe.computedOffset;
563             computedKeyframe.easing = parsedKeyframe.timingFunction->cssText();
564             computedKeyframe.composite = parsedKeyframe.composite;
565
566             auto outputKeyframe = convertDictionaryToJS(state, *jsCast<JSDOMGlobalObject*>(state.lexicalGlobalObject()), computedKeyframe);
567
568             // 3. For each animation property-value pair specified on keyframe, declaration, perform the following steps:
569             for (auto it = parsedKeyframe.unparsedStyle.begin(), end = parsedKeyframe.unparsedStyle.end(); it != end; ++it) {
570                 // 1. Let property name be the result of applying the animation property name to IDL attribute name algorithm to the property name of declaration.
571                 auto propertyName = CSSPropertyIDToIDLAttributeName(it->key);
572                 // 2. Let IDL value be the result of serializing the property value of declaration by passing declaration to the algorithm to serialize a CSS value.
573                 // 3. Let value be the result of converting IDL value to an ECMAScript String value.
574                 auto value = toJS<IDLDOMString>(state, it->value);
575                 // 4. Call the [[DefineOwnProperty]] internal method on output keyframe with property name property name,
576                 //    Property Descriptor { [[Writable]]: true, [[Enumerable]]: true, [[Configurable]]: true, [[Value]]: value } and Boolean flag false.
577                 JSObject::defineOwnProperty(outputKeyframe, &state, AtomicString(propertyName).impl(), PropertyDescriptor(value, 0), false);
578             }
579
580             // 4. Append output keyframe to result.
581             result.append(JSC::Strong<JSC::JSObject> { state.vm(), outputKeyframe });
582         }
583     }
584
585     // 4. Return result.
586     return result;
587 }
588
589 ExceptionOr<void> KeyframeEffectReadOnly::processKeyframes(ExecState& state, Strong<JSObject>&& keyframesInput)
590 {
591     // 1. If object is null, return an empty sequence of keyframes.
592     if (!keyframesInput.get())
593         return { };
594
595     VM& vm = state.vm();
596     auto scope = DECLARE_THROW_SCOPE(vm);
597
598     // 2. Let processed keyframes be an empty sequence of keyframes.
599     Vector<ParsedKeyframe> parsedKeyframes;
600
601     // 3. Let method be the result of GetMethod(object, @@iterator).
602     auto method = keyframesInput.get()->get(&state, vm.propertyNames->iteratorSymbol);
603
604     // 4. Check the completion record of method.
605     RETURN_IF_EXCEPTION(scope, Exception { TypeError });
606
607     // 5. Perform the steps corresponding to the first matching condition from below,
608     Vector<String> unusedEasings;
609     if (!method.isUndefined())
610         processIterableKeyframes(state, WTFMove(keyframesInput), WTFMove(method), parsedKeyframes);
611     else
612         processPropertyIndexedKeyframes(state, WTFMove(keyframesInput), parsedKeyframes, unusedEasings);
613
614     // 6. If processed keyframes is not loosely sorted by offset, throw a TypeError and abort these steps.
615     // 7. If there exist any keyframe in processed keyframes whose keyframe offset is non-null and less than
616     //    zero or greater than one, throw a TypeError and abort these steps.
617     double lastNonNullOffset = -1;
618     for (auto& keyframe : parsedKeyframes) {
619         if (!keyframe.offset)
620             continue;
621         auto offset = keyframe.offset.value();
622         if (offset <= lastNonNullOffset || offset < 0 || offset > 1)
623             return Exception { TypeError };
624         lastNonNullOffset = offset;
625     }
626
627     // We take a slight detour from the spec text and compute the missing keyframe offsets right away
628     // since they can be computed up-front.
629     computeMissingKeyframeOffsets(parsedKeyframes);
630
631     // 8. For each frame in processed keyframes, perform the following steps:
632     for (auto& keyframe : parsedKeyframes) {
633         // Let the timing function of frame be the result of parsing the “easing” property on frame using the CSS syntax
634         // defined for the easing property of the AnimationEffectTimingReadOnly interface.
635         // If parsing the “easing” property fails, throw a TypeError and abort this procedure.
636         auto timingFunctionResult = TimingFunction::createFromCSSText(keyframe.easing);
637         if (timingFunctionResult.hasException())
638             return timingFunctionResult.releaseException();
639         keyframe.timingFunction = timingFunctionResult.returnValue();
640     }
641
642     // 9. Parse each of the values in unused easings using the CSS syntax defined for easing property of the
643     //    AnimationEffectTimingReadOnly interface, and if any of the values fail to parse, throw a TypeError
644     //    and abort this procedure.
645     for (auto& easing : unusedEasings) {
646         auto timingFunctionResult = TimingFunction::createFromCSSText(easing);
647         if (timingFunctionResult.hasException())
648             return timingFunctionResult.releaseException();
649     }
650
651     m_parsedKeyframes = WTFMove(parsedKeyframes);
652
653     updateBlendingKeyframes();
654
655     return { };
656 }
657
658 void KeyframeEffectReadOnly::updateBlendingKeyframes()
659 {
660     if (!m_target)
661         return;
662
663     KeyframeList keyframeList("keyframe-effect-" + createCanonicalUUIDString());
664     StyleResolver& styleResolver = m_target->styleResolver();
665
666     for (auto& keyframe : m_parsedKeyframes) {
667         KeyframeValue keyframeValue(keyframe.computedOffset, nullptr);
668         auto renderStyle = RenderStyle::createPtr();
669         // We need to call update() on the FontCascade or we'll hit an ASSERT when parsing font-related properties.
670         renderStyle->fontCascade().update(nullptr);
671
672         auto& styleProperties = keyframe.style;
673         for (unsigned i = 0; i < styleProperties->propertyCount(); ++i) {
674             auto cssPropertyId = styleProperties->propertyAt(i).id();
675             keyframeValue.addProperty(cssPropertyId);
676             keyframeList.addProperty(cssPropertyId);
677             styleResolver.applyPropertyToStyle(cssPropertyId, styleProperties->propertyAt(i).value(), WTFMove(renderStyle));
678             renderStyle = styleResolver.state().takeStyle();
679         }
680
681         keyframeValue.setStyle(RenderStyle::clonePtr(*renderStyle));
682         keyframeList.insert(WTFMove(keyframeValue));
683     }
684
685     m_blendingKeyframes = WTFMove(keyframeList);
686
687     computeStackingContextImpact();
688 }
689
690 void KeyframeEffectReadOnly::computeCSSAnimationBlendingKeyframes()
691 {
692     ASSERT(is<CSSAnimation>(animation()));
693
694     auto& backingAnimation = downcast<CSSAnimation>(animation())->backingAnimation();
695     if (backingAnimation.name().isEmpty())
696         return;
697
698     auto renderStyle = RenderStyle::createPtr();
699     // We need to call update() on the FontCascade or we'll hit an ASSERT when parsing font-related properties.
700     renderStyle->fontCascade().update(nullptr);
701
702     KeyframeList keyframeList(backingAnimation.name());
703     if (auto* styleScope = Style::Scope::forOrdinal(*m_target, backingAnimation.nameStyleScopeOrdinal()))
704         styleScope->resolver().keyframeStylesForAnimation(*m_target, renderStyle.get(), keyframeList);
705
706     // Ensure resource loads for all the frames.
707     for (auto& keyframe : keyframeList.keyframes()) {
708         if (auto* style = const_cast<RenderStyle*>(keyframe.style()))
709             Style::loadPendingResources(*style, m_target->document(), m_target.get());
710     }
711
712     m_blendingKeyframes = WTFMove(keyframeList);
713
714     computeStackingContextImpact();
715 }
716
717 void KeyframeEffectReadOnly::computeCSSTransitionBlendingKeyframes(const RenderStyle* oldStyle, const RenderStyle& newStyle)
718 {
719     ASSERT(is<CSSTransition>(animation()));
720
721     if (!oldStyle || m_blendingKeyframes.size())
722         return;
723
724     auto& backingAnimation = downcast<CSSTransition>(animation())->backingAnimation();
725
726     auto toStyle = RenderStyle::clonePtr(newStyle);
727     if (m_target)
728         Style::loadPendingResources(*toStyle, m_target->document(), m_target.get());
729
730     KeyframeList keyframeList("keyframe-effect-" + createCanonicalUUIDString());
731     keyframeList.addProperty(backingAnimation.property());
732
733     KeyframeValue fromKeyframeValue(0, RenderStyle::clonePtr(*oldStyle));
734     fromKeyframeValue.addProperty(backingAnimation.property());
735     keyframeList.insert(WTFMove(fromKeyframeValue));
736
737     KeyframeValue toKeyframeValue(1, WTFMove(toStyle));
738     toKeyframeValue.addProperty(backingAnimation.property());
739     keyframeList.insert(WTFMove(toKeyframeValue));
740
741     m_blendingKeyframes = WTFMove(keyframeList);
742
743     computeStackingContextImpact();
744 }
745
746 bool KeyframeEffectReadOnly::stylesWouldYieldNewCSSTransitionsBlendingKeyframes(const RenderStyle& oldStyle, const RenderStyle& newStyle) const
747 {
748     ASSERT(is<CSSTransition>(animation()));
749     auto property = downcast<CSSTransition>(animation())->backingAnimation().property();
750
751     // If we didn't have blending keyframes yet, we would create new blending keyframes provided
752     // the start and end styles hold different values for this property.
753     if (!hasBlendingKeyframes())
754         return !CSSPropertyAnimation::propertiesEqual(property, &oldStyle, &newStyle);
755
756     // Otherwise, we would create new blending keyframes provided the current start keyframe holds
757     // a different value than the new start style or the current end keyframe holds a different value
758     // than the new end style for this property.
759     return !CSSPropertyAnimation::propertiesEqual(property, m_blendingKeyframes[0].style(), &oldStyle) || !CSSPropertyAnimation::propertiesEqual(property, m_blendingKeyframes[1].style(), &newStyle);
760 }
761
762 void KeyframeEffectReadOnly::computeStackingContextImpact()
763 {
764     m_triggersStackingContext = false;
765     for (auto cssPropertyId : m_blendingKeyframes.properties()) {
766         if (WillChangeData::propertyCreatesStackingContext(cssPropertyId)) {
767             m_triggersStackingContext = true;
768             break;
769         }
770     }
771 }
772
773 void KeyframeEffectReadOnly::setTarget(RefPtr<Element>&& newTarget)
774 {
775     if (m_target == newTarget)
776         return;
777
778     auto previousTarget = std::exchange(m_target, WTFMove(newTarget));
779
780     if (auto* effectAnimation = animation())
781         effectAnimation->effectTargetDidChange(previousTarget.get(), m_target.get());
782
783     updateBlendingKeyframes();
784
785     // We need to invalidate the effect now that the target has changed
786     // to ensure the effect's styles are applied to the new target right away.
787     invalidate();
788
789     // Likewise, we need to invalidate styles on the previous target so that
790     // any animated styles are removed immediately.
791     invalidateElement(previousTarget.get());
792 }
793
794 void KeyframeEffectReadOnly::apply(RenderStyle& targetStyle)
795 {
796     if (!m_target)
797         return;
798
799     auto progress = iterationProgress();
800     if (!progress)
801         return;
802
803     if (m_startedAccelerated && progress.value() >= 1) {
804         m_startedAccelerated = false;
805         animation()->acceleratedRunningStateDidChange();
806     }
807
808     bool needsToStartAccelerated = false;
809
810     if (!m_started && !m_startedAccelerated) {
811         needsToStartAccelerated = shouldRunAccelerated();
812         m_startedAccelerated = needsToStartAccelerated;
813         if (needsToStartAccelerated)
814             animation()->acceleratedRunningStateDidChange();
815     }
816     m_started = true;
817
818     if (!needsToStartAccelerated && !m_startedAccelerated)
819         setAnimatedPropertiesInStyle(targetStyle, progress.value());
820
821     // https://w3c.github.io/web-animations/#side-effects-section
822     // For every property targeted by at least one animation effect that is current or in effect, the user agent
823     // must act as if the will-change property ([css-will-change-1]) on the target element includes the property.
824     if (m_triggersStackingContext && targetStyle.hasAutoZIndex())
825         targetStyle.setZIndex(0);
826 }
827
828 void KeyframeEffectReadOnly::invalidate()
829 {
830     invalidateElement(m_target.get());
831 }
832
833 bool KeyframeEffectReadOnly::shouldRunAccelerated()
834 {
835     for (auto cssPropertyId : m_blendingKeyframes.properties()) {
836         if (!CSSPropertyAnimation::animationOfPropertyIsAccelerated(cssPropertyId))
837             return false;
838     }
839     return hasBlendingKeyframes();
840 }
841
842 void KeyframeEffectReadOnly::getAnimatedStyle(std::unique_ptr<RenderStyle>& animatedStyle)
843 {
844     if (!animation())
845         return;
846
847     if (!m_blendingKeyframes.size())
848         return;
849
850     auto progress = iterationProgress();
851     if (!progress)
852         return;
853
854     if (!animatedStyle)
855         animatedStyle = RenderStyle::clonePtr(renderer()->style());
856
857     setAnimatedPropertiesInStyle(*animatedStyle.get(), progress.value());
858 }
859
860 void KeyframeEffectReadOnly::setAnimatedPropertiesInStyle(RenderStyle& targetStyle, double iterationProgress)
861 {
862     // 4.4.3. The effect value of a keyframe effect
863     // https://drafts.csswg.org/web-animations-1/#the-effect-value-of-a-keyframe-animation-effect
864     //
865     // The effect value of a single property referenced by a keyframe effect as one of its target properties,
866     // for a given iteration progress, current iteration and underlying value is calculated as follows.
867
868     for (auto cssPropertyId : m_blendingKeyframes.properties()) {
869         // 1. If iteration progress is unresolved abort this procedure.
870         // 2. Let target property be the longhand property for which the effect value is to be calculated.
871         // 3. If animation type of the target property is not animatable abort this procedure since the effect cannot be applied.
872         // 4. Define the neutral value for composition as a value which, when combined with an underlying value using the add composite operation,
873         //    produces the underlying value.
874
875         // 5. Let property-specific keyframes be the result of getting the set of computed keyframes for this keyframe effect.
876         // 6. Remove any keyframes from property-specific keyframes that do not have a property value for target property.
877         unsigned numberOfKeyframesWithZeroOffset = 0;
878         unsigned numberOfKeyframesWithOneOffset = 0;
879         Vector<std::optional<size_t>> propertySpecificKeyframes;
880         for (size_t i = 0; i < m_blendingKeyframes.size(); ++i) {
881             auto& keyframe = m_blendingKeyframes[i];
882             if (!keyframe.containsProperty(cssPropertyId))
883                 continue;
884             auto offset = keyframe.key();
885             if (!offset)
886                 numberOfKeyframesWithZeroOffset++;
887             if (offset == 1)
888                 numberOfKeyframesWithOneOffset++;
889             propertySpecificKeyframes.append(i);
890         }
891
892         // 7. If property-specific keyframes is empty, return underlying value.
893         if (propertySpecificKeyframes.isEmpty())
894             continue;
895
896         // 8. If there is no keyframe in property-specific keyframes with a computed keyframe offset of 0, create a new keyframe with a computed keyframe
897         //    offset of 0, a property value set to the neutral value for composition, and a composite operation of add, and prepend it to the beginning of
898         //    property-specific keyframes.
899         if (!numberOfKeyframesWithZeroOffset) {
900             propertySpecificKeyframes.insert(0, std::nullopt);
901             numberOfKeyframesWithZeroOffset = 1;
902         }
903
904         // 9. Similarly, if there is no keyframe in property-specific keyframes with a computed keyframe offset of 1, create a new keyframe with a computed
905         //    keyframe offset of 1, a property value set to the neutral value for composition, and a composite operation of add, and append it to the end of
906         //    property-specific keyframes.
907         if (!numberOfKeyframesWithOneOffset) {
908             propertySpecificKeyframes.append(std::nullopt);
909             numberOfKeyframesWithOneOffset = 1;
910         }
911
912         // 10. Let interval endpoints be an empty sequence of keyframes.
913         Vector<std::optional<size_t>> intervalEndpoints;
914
915         // 11. Populate interval endpoints by following the steps from the first matching condition from below:
916         if (iterationProgress < 0 && numberOfKeyframesWithZeroOffset > 1) {
917             // If iteration progress < 0 and there is more than one keyframe in property-specific keyframes with a computed keyframe offset of 0,
918             // Add the first keyframe in property-specific keyframes to interval endpoints.
919             intervalEndpoints.append(propertySpecificKeyframes.first());
920         } else if (iterationProgress >= 1 && numberOfKeyframesWithOneOffset > 1) {
921             // If iteration progress ≥ 1 and there is more than one keyframe in property-specific keyframes with a computed keyframe offset of 1,
922             // Add the last keyframe in property-specific keyframes to interval endpoints.
923             intervalEndpoints.append(propertySpecificKeyframes.last());
924         } else {
925             // Otherwise,
926             // 1. Append to interval endpoints the last keyframe in property-specific keyframes whose computed keyframe offset is less than or equal
927             //    to iteration progress and less than 1. If there is no such keyframe (because, for example, the iteration progress is negative),
928             //    add the last keyframe whose computed keyframe offset is 0.
929             // 2. Append to interval endpoints the next keyframe in property-specific keyframes after the one added in the previous step.
930             size_t indexOfLastKeyframeWithZeroOffset = 0;
931             int indexOfFirstKeyframeToAddToIntervalEndpoints = -1;
932             for (size_t i = 0; i < propertySpecificKeyframes.size(); ++i) {
933                 auto keyframeIndex = propertySpecificKeyframes[i];
934                 auto offset = [&] () -> double {
935                     if (!keyframeIndex)
936                         return i ? 1 : 0;
937                     return m_blendingKeyframes[keyframeIndex.value()].key();
938                 }();
939                 if (!offset)
940                     indexOfLastKeyframeWithZeroOffset = i;
941                 if (offset <= iterationProgress && offset < 1)
942                     indexOfFirstKeyframeToAddToIntervalEndpoints = i;
943                 else
944                     break;
945             }
946
947             if (indexOfFirstKeyframeToAddToIntervalEndpoints >= 0) {
948                 intervalEndpoints.append(propertySpecificKeyframes[indexOfFirstKeyframeToAddToIntervalEndpoints]);
949                 intervalEndpoints.append(propertySpecificKeyframes[indexOfFirstKeyframeToAddToIntervalEndpoints + 1]);
950             } else {
951                 ASSERT(indexOfLastKeyframeWithZeroOffset < propertySpecificKeyframes.size() - 1);
952                 intervalEndpoints.append(propertySpecificKeyframes[indexOfLastKeyframeWithZeroOffset]);
953                 intervalEndpoints.append(propertySpecificKeyframes[indexOfLastKeyframeWithZeroOffset + 1]);
954             }
955         }
956
957         // 12. For each keyframe in interval endpoints…
958         // FIXME: we don't support this step yet since we don't deal with any composite operation other than "replace".
959
960         // 13. If there is only one keyframe in interval endpoints return the property value of target property on that keyframe.
961         if (intervalEndpoints.size() == 1) {
962             auto keyframeIndex = intervalEndpoints[0];
963             auto keyframeStyle = !keyframeIndex ? &targetStyle : m_blendingKeyframes[keyframeIndex.value()].style();
964             CSSPropertyAnimation::blendProperties(this, cssPropertyId, &targetStyle, keyframeStyle, keyframeStyle, 0);
965             continue;
966         }
967
968         // 14. Let start offset be the computed keyframe offset of the first keyframe in interval endpoints.
969         auto startKeyframeIndex = intervalEndpoints.first();
970         auto startOffset = !startKeyframeIndex ? 0 : m_blendingKeyframes[startKeyframeIndex.value()].key();
971
972         // 15. Let end offset be the computed keyframe offset of last keyframe in interval endpoints.
973         auto endKeyframeIndex = intervalEndpoints.last();
974         auto endOffset = !endKeyframeIndex ? 1 : m_blendingKeyframes[endKeyframeIndex.value()].key();
975
976         // 16. Let interval distance be the result of evaluating (iteration progress - start offset) / (end offset - start offset).
977         auto intervalDistance = (iterationProgress - startOffset) / (endOffset - startOffset);
978
979         // 17. Let transformed distance be the result of evaluating the timing function associated with the first keyframe in interval endpoints
980         //     passing interval distance as the input progress.
981         auto transformedDistance = intervalDistance;
982         // In case we're backing a CSSAnimation or CSSTransition we won't actually have parsed keyframes.
983         if (startKeyframeIndex && startKeyframeIndex.value() + 1 <= m_parsedKeyframes.size()) {
984             if (auto iterationDuration = timing()->iterationDuration()) {
985                 auto rangeDuration = (endOffset - startOffset) * iterationDuration.seconds();
986                 transformedDistance = m_parsedKeyframes[startKeyframeIndex.value()].timingFunction->transformTime(intervalDistance, rangeDuration);
987             }
988         }
989
990         // 18. Return the result of applying the interpolation procedure defined by the animation type of the target property, to the values of the target
991         //     property specified on the two keyframes in interval endpoints taking the first such value as Vstart and the second as Vend and using transformed
992         //     distance as the interpolation parameter p.
993         auto startStyle = !startKeyframeIndex ? &targetStyle : m_blendingKeyframes[startKeyframeIndex.value()].style();
994         auto endStyle = !endKeyframeIndex ? &targetStyle : m_blendingKeyframes[endKeyframeIndex.value()].style();
995         CSSPropertyAnimation::blendProperties(this, cssPropertyId, &targetStyle, startStyle, endStyle, transformedDistance);
996     }
997 }
998
999 void KeyframeEffectReadOnly::startOrStopAccelerated()
1000 {
1001     auto* renderer = this->renderer();
1002     if (!renderer || !renderer->isComposited())
1003         return;
1004
1005     auto* compositedRenderer = downcast<RenderBoxModelObject>(renderer);
1006     if (m_startedAccelerated) {
1007         auto animation = Animation::create();
1008         animation->setDuration(timing()->iterationDuration().seconds());
1009         compositedRenderer->startAnimation(0, animation.ptr(), m_blendingKeyframes);
1010     } else {
1011         compositedRenderer->animationFinished(m_blendingKeyframes.animationName());
1012         if (!m_target->document().renderTreeBeingDestroyed())
1013             m_target->invalidateStyleAndLayerComposition();
1014     }
1015 }
1016
1017 RenderElement* KeyframeEffectReadOnly::renderer() const
1018 {
1019     return m_target ? m_target->renderer() : nullptr;
1020 }
1021
1022 const RenderStyle& KeyframeEffectReadOnly::currentStyle() const
1023 {
1024     if (auto* renderer = this->renderer())
1025         return renderer->style();
1026     return RenderStyle::defaultStyle();
1027 }
1028
1029 } // namespace WebCore