[Web Animations] Fix a host of small CSS Animations and CSS Transitions issues
[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 "GeometryUtilities.h"
41 #include "JSCompositeOperation.h"
42 #include "JSKeyframeEffectReadOnly.h"
43 #include "RenderBoxModelObject.h"
44 #include "RenderElement.h"
45 #include "RenderStyle.h"
46 #include "StylePendingResources.h"
47 #include "StyleResolver.h"
48 #include "TimingFunction.h"
49 #include "WillChangeData.h"
50 #include <wtf/UUID.h>
51
52 namespace WebCore {
53 using namespace JSC;
54
55 static inline void invalidateElement(Element* element)
56 {
57     if (element)
58         element->invalidateStyleAndLayerComposition();
59 }
60
61 static inline String CSSPropertyIDToIDLAttributeName(CSSPropertyID cssPropertyId)
62 {
63     // https://drafts.csswg.org/web-animations-1/#animation-property-name-to-idl-attribute-name
64     // 1. If property follows the <custom-property-name> production, return property.
65     // FIXME: We don't handle custom properties yet.
66
67     // 2. If property refers to the CSS float property, return the string "cssFloat".
68     if (cssPropertyId == CSSPropertyFloat)
69         return "cssFloat";
70
71     // 3. If property refers to the CSS offset property, return the string "cssOffset".
72     // FIXME: we don't support the CSS "offset" property
73
74     // 4. Otherwise, return the result of applying the CSS property to IDL attribute algorithm [CSSOM] to property.
75     return getJSPropertyName(cssPropertyId);
76 }
77
78 static inline CSSPropertyID IDLAttributeNameToAnimationPropertyName(const String& idlAttributeName)
79 {
80     // https://drafts.csswg.org/web-animations-1/#idl-attribute-name-to-animation-property-name
81     // 1. If attribute conforms to the <custom-property-name> production, return attribute.
82     // FIXME: We don't handle custom properties yet.
83
84     // 2. If attribute is the string "cssFloat", then return an animation property representing the CSS float property.
85     if (idlAttributeName == "cssFloat")
86         return CSSPropertyFloat;
87
88     // 3. If attribute is the string "cssOffset", then return an animation property representing the CSS offset property.
89     // FIXME: We don't support the CSS "offset" property.
90
91     // 4. Otherwise, return the result of applying the IDL attribute to CSS property algorithm [CSSOM] to attribute.
92     auto cssPropertyId = CSSStyleDeclaration::getCSSPropertyIDFromJavaScriptPropertyName(idlAttributeName);
93
94     // We need to check that converting the property back to IDL form yields the same result such that a property passed
95     // in non-IDL form is rejected, for instance "font-size".
96     if (idlAttributeName != CSSPropertyIDToIDLAttributeName(cssPropertyId))
97         return CSSPropertyInvalid;
98
99     return cssPropertyId;
100 }
101
102 static inline void computeMissingKeyframeOffsets(Vector<KeyframeEffectReadOnly::ParsedKeyframe>& keyframes)
103 {
104     // https://drafts.csswg.org/web-animations-1/#compute-missing-keyframe-offsets
105
106     if (keyframes.isEmpty())
107         return;
108
109     // 1. For each keyframe, in keyframes, let the computed keyframe offset of the keyframe be equal to its keyframe offset value.
110     // In our implementation, we only set non-null values to avoid making computedOffset std::optional<double>. Instead, we'll know
111     // that a keyframe hasn't had a computed offset by checking if it has a null offset and a 0 computedOffset, since the first
112     // keyframe will already have a 0 computedOffset.
113     for (auto& keyframe : keyframes)
114         keyframe.computedOffset = keyframe.offset.value_or(0);
115
116     // 2. If keyframes contains more than one keyframe and the computed keyframe offset of the first keyframe in keyframes is null,
117     //    set the computed keyframe offset of the first keyframe to 0.
118     if (keyframes.size() > 1 && !keyframes[0].offset)
119         keyframes[0].computedOffset = 0;
120
121     // 3. If the computed keyframe offset of the last keyframe in keyframes is null, set its computed keyframe offset to 1.
122     if (!keyframes.last().offset)
123         keyframes.last().computedOffset = 1;
124
125     // 4. For each pair of keyframes A and B where:
126     //    - A appears before B in keyframes, and
127     //    - A and B have a computed keyframe offset that is not null, and
128     //    - all keyframes between A and B have a null computed keyframe offset,
129     //    calculate the computed keyframe offset of each keyframe between A and B as follows:
130     //    1. Let offsetk be the computed keyframe offset of a keyframe k.
131     //    2. Let n be the number of keyframes between and including A and B minus 1.
132     //    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.
133     //    4. Set the computed keyframe offset of keyframe to offsetA + (offsetB − offsetA) × index / n.
134     size_t indexOfLastKeyframeWithNonNullOffset = 0;
135     for (size_t i = 1; i < keyframes.size(); ++i) {
136         auto& keyframe = keyframes[i];
137         if (!keyframe.computedOffset)
138             continue;
139         if (indexOfLastKeyframeWithNonNullOffset == i - 1)
140             continue;
141
142         double lastNonNullOffset = keyframes[indexOfLastKeyframeWithNonNullOffset].computedOffset;
143         double offsetDelta = keyframe.computedOffset - lastNonNullOffset;
144         double offsetIncrement = offsetDelta / (i - indexOfLastKeyframeWithNonNullOffset);
145         size_t indexOfFirstKeyframeWithNullOffset = indexOfLastKeyframeWithNonNullOffset + 1;
146         for (size_t j = indexOfFirstKeyframeWithNullOffset; j < i; ++j)
147             keyframes[j].computedOffset = lastNonNullOffset + (j - indexOfLastKeyframeWithNonNullOffset) * offsetIncrement;
148
149         indexOfLastKeyframeWithNonNullOffset = i;
150     }
151 }
152
153 static inline ExceptionOr<void> processIterableKeyframes(ExecState& state, Strong<JSObject>&& keyframesInput, JSValue method, Vector<KeyframeEffectReadOnly::ParsedKeyframe>& parsedKeyframes)
154 {
155     VM& vm = state.vm();
156     auto scope = DECLARE_THROW_SCOPE(vm);
157
158     // 1. Let iter be GetIterator(object, method).
159     forEachInIterable(state, keyframesInput.get(), method, [&parsedKeyframes](VM& vm, ExecState& state, JSValue nextValue) -> ExceptionOr<void> {
160         if (!nextValue || !nextValue.isObject())
161             return Exception { TypeError };
162
163         auto scope = DECLARE_THROW_SCOPE(vm);
164
165         JSObject* keyframe = nextValue.toObject(&state);
166         PropertyNameArray ownPropertyNames(&vm, PropertyNameMode::Strings, PrivateSymbolMode::Exclude);
167         JSObject::getOwnPropertyNames(keyframe, &state, ownPropertyNames, EnumerationMode());
168         size_t numberOfProperties = ownPropertyNames.size();
169
170         KeyframeEffectReadOnly::ParsedKeyframe keyframeOutput;
171
172         String easing("linear");
173         std::optional<double> offset;
174         std::optional<CompositeOperation> composite;
175
176         for (size_t j = 0; j < numberOfProperties; ++j) {
177             auto ownPropertyName = ownPropertyNames[j];
178             if (ownPropertyName == "easing")
179                 easing = convert<IDLDOMString>(state, keyframe->get(&state, ownPropertyName));
180             else if (ownPropertyName == "offset")
181                 offset = convert<IDLNullable<IDLDouble>>(state, keyframe->get(&state, ownPropertyName));
182             else if (ownPropertyName == "composite")
183                 composite = convert<IDLNullable<IDLEnumeration<CompositeOperation>>>(state, keyframe->get(&state, ownPropertyName));
184             else {
185                 auto cssPropertyId = IDLAttributeNameToAnimationPropertyName(ownPropertyName.string());
186                 if (CSSPropertyAnimation::isPropertyAnimatable(cssPropertyId)) {
187                     auto stringValue = convert<IDLDOMString>(state, keyframe->get(&state, ownPropertyName));
188                     if (keyframeOutput.style->setProperty(cssPropertyId, stringValue))
189                         keyframeOutput.unparsedStyle.set(cssPropertyId, stringValue);
190                 }
191             }
192             RETURN_IF_EXCEPTION(scope, Exception { TypeError });
193         }
194
195         keyframeOutput.easing = easing;
196         keyframeOutput.offset = offset;
197         keyframeOutput.composite = composite;
198
199         parsedKeyframes.append(WTFMove(keyframeOutput));
200
201         return { };
202     });
203     RETURN_IF_EXCEPTION(scope, Exception { TypeError });
204
205     return { };
206 }
207
208 static inline ExceptionOr<KeyframeEffectReadOnly::KeyframeLikeObject> processKeyframeLikeObject(ExecState& state, Strong<JSObject>&& keyframesInput)
209 {
210     // https://drafts.csswg.org/web-animations-1/#process-a-keyframe-like-object
211
212     VM& vm = state.vm();
213     auto scope = DECLARE_THROW_SCOPE(vm);
214
215     // 1. Run the procedure to convert an ECMAScript value to a dictionary type [WEBIDL] with keyframe input as the ECMAScript value as follows:
216     // 
217     //    dictionary BasePropertyIndexedKeyframe {
218     //        (double? or sequence<double?>)                       offset = [];
219     //        (DOMString or sequence<DOMString>)                   easing = [];
220     //        (CompositeOperation? or sequence<CompositeOperation?>) composite = [];
221     //    };
222     //
223     //    Store the result of this procedure as keyframe output.
224     auto baseProperties = convert<IDLDictionary<KeyframeEffectReadOnly::BasePropertyIndexedKeyframe>>(state, keyframesInput.get());
225     RETURN_IF_EXCEPTION(scope, Exception { TypeError });
226
227     KeyframeEffectReadOnly::KeyframeLikeObject keyframeOuput;
228     keyframeOuput.baseProperties = baseProperties;
229
230     // 2. Build up a list of animatable properties as follows:
231     //
232     //    1. Let animatable properties be a list of property names (including shorthand properties that have longhand sub-properties
233     //       that are animatable) that can be animated by the implementation.
234     //    2. Convert each property name in animatable properties to the equivalent IDL attribute by applying the animation property
235     //       name to IDL attribute name algorithm.
236
237     // 3. Let input properties be the result of calling the EnumerableOwnNames operation with keyframe input as the object.
238     PropertyNameArray inputProperties(&vm, PropertyNameMode::Strings, PrivateSymbolMode::Exclude);
239     JSObject::getOwnPropertyNames(keyframesInput.get(), &state, inputProperties, EnumerationMode());
240
241     // 4. Make up a new list animation properties that consists of all of the properties that are in both input properties and animatable
242     //    properties, or which are in input properties and conform to the <custom-property-name> production.
243
244     // 5. Sort animation properties in ascending order by the Unicode codepoints that define each property name.
245     //    We only actually perform this after step 6.
246
247     // 6. For each property name in animation properties,
248     size_t numberOfProperties = inputProperties.size();
249     for (size_t i = 0; i < numberOfProperties; ++i) {
250         auto cssPropertyID = IDLAttributeNameToAnimationPropertyName(inputProperties[i].string());
251         if (!CSSPropertyAnimation::isPropertyAnimatable(cssPropertyID))
252             continue;
253
254         // 1. Let raw value be the result of calling the [[Get]] internal method on keyframe input, with property name as the property
255         //    key and keyframe input as the receiver.
256         auto rawValue = keyframesInput->get(&state, inputProperties[i]);
257
258         // 2. Check the completion record of raw value.
259         RETURN_IF_EXCEPTION(scope, Exception { TypeError });
260
261         // 3. Convert raw value to a DOMString or sequence of DOMStrings property values as follows:
262         Vector<String> propertyValues;
263         // Let property values be the result of converting raw value to IDL type (DOMString or sequence<DOMString>)
264         // using the procedures defined for converting an ECMAScript value to an IDL value [WEBIDL].
265         // If property values is a single DOMString, replace property values with a sequence of DOMStrings with the original value of property
266         // Values as the only element.
267         if (rawValue.isString())
268             propertyValues = { rawValue.toWTFString(&state) };
269         else
270             propertyValues = convert<IDLSequence<IDLDOMString>>(state, rawValue);
271         RETURN_IF_EXCEPTION(scope, Exception { TypeError });
272
273         // 4. Calculate the normalized property name as the result of applying the IDL attribute name to animation property name algorithm to property name.
274         // 5. Add a property to to keyframe output with normalized property name as the property name, and property values as the property value.
275         keyframeOuput.propertiesAndValues.append({ cssPropertyID, propertyValues });
276     }
277
278     // Now we can perform step 5.
279     std::sort(keyframeOuput.propertiesAndValues.begin(), keyframeOuput.propertiesAndValues.end(), [](auto& lhs, auto& rhs) {
280         return getPropertyNameString(lhs.property).utf8() < getPropertyNameString(rhs.property).utf8();
281     });
282
283     // 7. Return keyframe output.
284     return { WTFMove(keyframeOuput) };
285 }
286
287 static inline ExceptionOr<void> processPropertyIndexedKeyframes(ExecState& state, Strong<JSObject>&& keyframesInput, Vector<KeyframeEffectReadOnly::ParsedKeyframe>& parsedKeyframes, Vector<String>& unusedEasings)
288 {
289     // 1. Let property-indexed keyframe be the result of running the procedure to process a keyframe-like object passing object as the keyframe input.
290     auto processKeyframeLikeObjectResult = processKeyframeLikeObject(state, WTFMove(keyframesInput));
291     if (processKeyframeLikeObjectResult.hasException())
292         return processKeyframeLikeObjectResult.releaseException();
293     auto propertyIndexedKeyframe = processKeyframeLikeObjectResult.returnValue();
294
295     // 2. For each member, m, in property-indexed keyframe, perform the following steps:
296     for (auto& m : propertyIndexedKeyframe.propertiesAndValues) {
297         // 1. Let property name be the key for m.
298         auto propertyName = m.property;
299         // 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
300         //    keyframe after m.
301         //    We skip this test since we split those properties and the actual CSS properties that we're currently iterating over.
302         // 3. Let property values be the value for m.
303         auto propertyValues = m.values;
304         // 4. Let property keyframes be an empty sequence of keyframes.
305         Vector<KeyframeEffectReadOnly::ParsedKeyframe> propertyKeyframes;
306         // 5. For each value, v, in property values perform the following steps:
307         for (auto& v : propertyValues) {
308             // 1. Let k be a new keyframe with a null keyframe offset.
309             KeyframeEffectReadOnly::ParsedKeyframe k;
310             // 2. Add the property-value pair, property name → v, to k.
311             if (k.style->setProperty(propertyName, v))
312                 k.unparsedStyle.set(propertyName, v);
313             // 3. Append k to property keyframes.
314             propertyKeyframes.append(WTFMove(k));
315         }
316         // 6. Apply the procedure to compute missing keyframe offsets to property keyframes.
317         computeMissingKeyframeOffsets(propertyKeyframes);
318
319         // 7. Add keyframes in property keyframes to processed keyframes.
320         for (auto& keyframe : propertyKeyframes)
321             parsedKeyframes.append(WTFMove(keyframe));
322     }
323
324     // 3. Sort processed keyframes by the computed keyframe offset of each keyframe in increasing order.
325     std::sort(parsedKeyframes.begin(), parsedKeyframes.end(), [](auto& lhs, auto& rhs) {
326         return lhs.computedOffset < rhs.computedOffset;
327     });
328
329     // 4. Merge adjacent keyframes in processed keyframes when they have equal computed keyframe offsets.
330     size_t i = 1;
331     while (i < parsedKeyframes.size()) {
332         auto& keyframe = parsedKeyframes[i];
333         auto& previousKeyframe = parsedKeyframes[i - 1];
334         // If the offsets of this keyframe and the previous keyframe are different,
335         // this means that the two keyframes should not be merged and we can move
336         // on to the next keyframe.
337         if (keyframe.computedOffset != previousKeyframe.computedOffset) {
338             i++;
339             continue;
340         }
341         // Otherwise, both this keyframe and the previous keyframe should be merged.
342         // Unprocessed keyframes in parsedKeyframes at this stage have at most a single
343         // property in cssPropertiesAndValues, so just set this on the previous keyframe.
344         // In case an invalid or null value was originally provided, then the property
345         // was not set and the property count is 0, in which case there is nothing to merge.
346         if (keyframe.style->propertyCount()) {
347             auto property = keyframe.style->propertyAt(0);
348             previousKeyframe.style->setProperty(property.id(), property.value());
349             previousKeyframe.unparsedStyle.set(property.id(), keyframe.unparsedStyle.get(property.id()));
350         }
351         // Since we've processed this keyframe, we can remove it and keep i the same
352         // so that we process the next keyframe in the next loop iteration.
353         parsedKeyframes.remove(i);
354     }
355
356     // 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:
357     //    - sequence<double?>, the value of “offset” as-is.
358     //    - double?, a sequence of length one with the value of “offset” as its single item, i.e. « offset »,
359     Vector<std::optional<double>> offsets;
360     if (WTF::holds_alternative<Vector<std::optional<double>>>(propertyIndexedKeyframe.baseProperties.offset))
361         offsets = WTF::get<Vector<std::optional<double>>>(propertyIndexedKeyframe.baseProperties.offset);
362     else if (WTF::holds_alternative<double>(propertyIndexedKeyframe.baseProperties.offset))
363         offsets.append(WTF::get<double>(propertyIndexedKeyframe.baseProperties.offset));
364     else if (WTF::holds_alternative<std::nullptr_t>(propertyIndexedKeyframe.baseProperties.offset))
365         offsets.append(std::nullopt);
366
367     // 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.
368     for (size_t i = 0; i < offsets.size() && i < parsedKeyframes.size(); ++i)
369         parsedKeyframes[i].offset = offsets[i];
370
371     // 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:
372     //    - sequence<DOMString>, the value of “easing” as-is.
373     //    - DOMString, a sequence of length one with the value of “easing” as its single item, i.e. « easing »,
374     Vector<String> easings;
375     if (WTF::holds_alternative<Vector<String>>(propertyIndexedKeyframe.baseProperties.easing))
376         easings = WTF::get<Vector<String>>(propertyIndexedKeyframe.baseProperties.easing);
377     else if (WTF::holds_alternative<String>(propertyIndexedKeyframe.baseProperties.easing))
378         easings.append(WTF::get<String>(propertyIndexedKeyframe.baseProperties.easing));
379
380     // 8. If easings is an empty sequence, let it be a sequence of length one containing the single value “linear”, i.e. « "linear" ».
381     if (easings.isEmpty())
382         easings.append("linear");
383
384     // 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
385     //    items as property keyframes.
386     if (easings.size() < parsedKeyframes.size()) {
387         size_t initialNumberOfEasings = easings.size();
388         for (i = initialNumberOfEasings + 1; i <= parsedKeyframes.size(); ++i)
389             easings.append(easings[i % initialNumberOfEasings]);
390     }
391
392     // 10. If easings has more items than property keyframes, store the excess items as unused easings.
393     while (easings.size() > parsedKeyframes.size())
394         unusedEasings.append(easings.takeLast());
395
396     // 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
397     //     is reached.
398     for (size_t i = 0; i < parsedKeyframes.size(); ++i)
399         parsedKeyframes[i].easing = easings[i];
400
401     // 12. If the “composite” member of the property-indexed keyframe is not an empty sequence:
402     Vector<std::optional<CompositeOperation>> compositeModes;
403     if (WTF::holds_alternative<Vector<std::optional<CompositeOperation>>>(propertyIndexedKeyframe.baseProperties.composite))
404         compositeModes = WTF::get<Vector<std::optional<CompositeOperation>>>(propertyIndexedKeyframe.baseProperties.composite);
405     else if (WTF::holds_alternative<CompositeOperation>(propertyIndexedKeyframe.baseProperties.composite))
406         compositeModes.append(WTF::get<CompositeOperation>(propertyIndexedKeyframe.baseProperties.composite));
407     else if (WTF::holds_alternative<std::nullptr_t>(propertyIndexedKeyframe.baseProperties.composite))
408         compositeModes.append(std::nullopt);
409     if (!compositeModes.isEmpty()) {
410         // 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
411         //    operation, let composite modes be a sequence of length one, with the value of the “composite” as its single item.
412         // 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
413         //    the list until composite modes has as many items as property keyframes.
414         if (compositeModes.size() < parsedKeyframes.size()) {
415             size_t initialNumberOfCompositeModes = compositeModes.size();
416             for (i = initialNumberOfCompositeModes + 1; i <= parsedKeyframes.size(); ++i)
417                 compositeModes.append(compositeModes[i % initialNumberOfCompositeModes]);
418         }
419         // 3. Assign each value in composite modes to the keyframe-specific composite operation on the keyframe with the corresponding position in property keyframes until
420         //    the end of property keyframes is reached.
421         for (size_t i = 0; i < compositeModes.size() && i < parsedKeyframes.size(); ++i)
422             parsedKeyframes[i].composite = compositeModes[i];
423     }
424
425     return { };
426 }
427
428 ExceptionOr<Ref<KeyframeEffectReadOnly>> KeyframeEffectReadOnly::create(ExecState& state, Element* target, Strong<JSObject>&& keyframes, std::optional<Variant<double, KeyframeEffectOptions>>&& options)
429 {
430     auto keyframeEffect = adoptRef(*new KeyframeEffectReadOnly(KeyframeEffectReadOnlyClass, AnimationEffectTimingReadOnly::create(), target));
431
432     auto setPropertiesResult = keyframeEffect->timing()->setProperties(WTFMove(options));
433     if (setPropertiesResult.hasException())
434         return setPropertiesResult.releaseException();
435
436     auto processKeyframesResult = keyframeEffect->processKeyframes(state, WTFMove(keyframes));
437     if (processKeyframesResult.hasException())
438         return processKeyframesResult.releaseException();
439
440     return WTFMove(keyframeEffect);
441 }
442
443 ExceptionOr<Ref<KeyframeEffectReadOnly>> KeyframeEffectReadOnly::create(JSC::ExecState&, Ref<KeyframeEffectReadOnly>&& source)
444 {
445     auto keyframeEffect = adoptRef(*new KeyframeEffectReadOnly(KeyframeEffectReadOnlyClass, AnimationEffectTimingReadOnly::create(), nullptr));
446     keyframeEffect->copyPropertiesFromSource(WTFMove(source));
447     return WTFMove(keyframeEffect);
448 }
449
450 Ref<KeyframeEffectReadOnly> KeyframeEffectReadOnly::create(const Element& target)
451 {
452     return adoptRef(*new KeyframeEffectReadOnly(KeyframeEffectReadOnlyClass, AnimationEffectTimingReadOnly::create(), const_cast<Element*>(&target)));
453 }
454
455 KeyframeEffectReadOnly::KeyframeEffectReadOnly(ClassType classType, Ref<AnimationEffectTimingReadOnly>&& timing, Element* target)
456     : AnimationEffectReadOnly(classType, WTFMove(timing))
457     , m_target(target)
458     , m_blendingKeyframes(emptyString())
459 {
460 }
461
462 void KeyframeEffectReadOnly::copyPropertiesFromSource(Ref<KeyframeEffectReadOnly>&& source)
463 {
464     m_target = source->m_target;
465     m_compositeOperation = source->m_compositeOperation;
466     m_iterationCompositeOperation = source->m_iterationCompositeOperation;
467
468     Vector<ParsedKeyframe> parsedKeyframes;
469     for (auto& sourceParsedKeyframe : source->m_parsedKeyframes) {
470         ParsedKeyframe parsedKeyframe;
471         parsedKeyframe.easing = sourceParsedKeyframe.easing;
472         parsedKeyframe.offset = sourceParsedKeyframe.offset;
473         parsedKeyframe.composite = sourceParsedKeyframe.composite;
474         parsedKeyframe.unparsedStyle = sourceParsedKeyframe.unparsedStyle;
475         parsedKeyframe.computedOffset = sourceParsedKeyframe.computedOffset;
476         parsedKeyframe.timingFunction = sourceParsedKeyframe.timingFunction;
477         parsedKeyframe.style = sourceParsedKeyframe.style->mutableCopy();
478         parsedKeyframes.append(WTFMove(parsedKeyframe));
479     }
480     m_parsedKeyframes = WTFMove(parsedKeyframes);
481
482     timing()->copyPropertiesFromSource(source->timing());
483
484     KeyframeList keyframeList("keyframe-effect-" + createCanonicalUUIDString());
485     for (auto& keyframe : source->m_blendingKeyframes.keyframes()) {
486         KeyframeValue keyframeValue(keyframe.key(), RenderStyle::clonePtr(*keyframe.style()));
487         for (auto propertyId : keyframe.properties())
488             keyframeValue.addProperty(propertyId);
489         keyframeList.insert(WTFMove(keyframeValue));
490     }
491     setBlendingKeyframes(keyframeList);
492 }
493
494 Vector<Strong<JSObject>> KeyframeEffectReadOnly::getKeyframes(ExecState& state)
495 {
496     // https://drafts.csswg.org/web-animations-1/#dom-keyframeeffectreadonly-getkeyframes
497
498     auto lock = JSLockHolder { &state };
499
500     // Since keyframes are represented by a partially open-ended dictionary type that is not currently able to be expressed with WebIDL,
501     // the procedure used to prepare the result of this method is defined in prose below:
502     //
503     // 1. Let result be an empty sequence of objects.
504     Vector<Strong<JSObject>> result;
505
506     // 2. Let keyframes be the result of applying the procedure to compute missing keyframe offsets to the keyframes for this keyframe effect.
507
508     // 3. For each keyframe in keyframes perform the following steps:
509     if (is<DeclarativeAnimation>(animation())) {
510         auto computedStyleExtractor = ComputedStyleExtractor(m_target.get());
511         for (size_t i = 0; i < m_blendingKeyframes.size(); ++i) {
512             // 1. Initialize a dictionary object, output keyframe, using the following definition:
513             //
514             // dictionary BaseComputedKeyframe {
515             //      double?             offset = null;
516             //      double              computedOffset;
517             //      DOMString           easing = "linear";
518             //      CompositeOperation? composite = null;
519             // };
520
521             auto& keyframe = m_blendingKeyframes[i];
522
523             // 2. Set offset, computedOffset, easing members of output keyframe to the respective values keyframe offset, computed keyframe offset,
524             // and keyframe-specific timing function of keyframe.
525             BaseComputedKeyframe computedKeyframe;
526             computedKeyframe.offset = keyframe.key();
527             computedKeyframe.computedOffset = keyframe.key();
528             // For CSS transitions, there are only two keyframes and the second keyframe should always report "linear". In practice, this value
529             // has no bearing since, as the last keyframe, its value will never be used.
530             computedKeyframe.easing = is<CSSTransition>(animation()) && i == 1 ? "linear" : timingFunctionForKeyframeAtIndex(0)->cssText();
531
532             auto outputKeyframe = convertDictionaryToJS(state, *jsCast<JSDOMGlobalObject*>(state.lexicalGlobalObject()), computedKeyframe);
533
534             // 3. For each animation property-value pair specified on keyframe, declaration, perform the following steps:
535             auto& style = *keyframe.style();
536             for (auto cssPropertyId : keyframe.properties()) {
537                 // 1. Let property name be the result of applying the animation property name to IDL attribute name algorithm to the property name of declaration.
538                 auto propertyName = CSSPropertyIDToIDLAttributeName(cssPropertyId);
539                 // 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.
540                 String idlValue = "";
541                 if (auto cssValue = computedStyleExtractor.valueForPropertyinStyle(style, cssPropertyId))
542                     idlValue = cssValue->cssText();
543                 // 3. Let value be the result of converting IDL value to an ECMAScript String value.
544                 auto value = toJS<IDLDOMString>(state, idlValue);
545                 // 4. Call the [[DefineOwnProperty]] internal method on output keyframe with property name property name,
546                 //    Property Descriptor { [[Writable]]: true, [[Enumerable]]: true, [[Configurable]]: true, [[Value]]: value } and Boolean flag false.
547                 JSObject::defineOwnProperty(outputKeyframe, &state, AtomicString(propertyName).impl(), PropertyDescriptor(value, 0), false);
548             }
549
550             // 5. Append output keyframe to result.
551             result.append(JSC::Strong<JSC::JSObject> { state.vm(), outputKeyframe });
552         }
553     } else {
554         for (size_t i = 0; i < m_parsedKeyframes.size(); ++i) {
555             // 1. Initialize a dictionary object, output keyframe, using the following definition:
556             //
557             // dictionary BaseComputedKeyframe {
558             //      double?             offset = null;
559             //      double              computedOffset;
560             //      DOMString           easing = "linear";
561             //      CompositeOperation? composite = null;
562             // };
563
564             auto& parsedKeyframe = m_parsedKeyframes[i];
565
566             // 2. Set offset, computedOffset, easing, composite members of output keyframe to the respective values keyframe offset, computed keyframe
567             // offset, keyframe-specific timing function and keyframe-specific composite operation of keyframe.
568             BaseComputedKeyframe computedKeyframe;
569             computedKeyframe.offset = parsedKeyframe.offset;
570             computedKeyframe.computedOffset = parsedKeyframe.computedOffset;
571             computedKeyframe.easing = timingFunctionForKeyframeAtIndex(i)->cssText();
572             computedKeyframe.composite = parsedKeyframe.composite;
573
574             auto outputKeyframe = convertDictionaryToJS(state, *jsCast<JSDOMGlobalObject*>(state.lexicalGlobalObject()), computedKeyframe);
575
576             // 3. For each animation property-value pair specified on keyframe, declaration, perform the following steps:
577             for (auto it = parsedKeyframe.unparsedStyle.begin(), end = parsedKeyframe.unparsedStyle.end(); it != end; ++it) {
578                 // 1. Let property name be the result of applying the animation property name to IDL attribute name algorithm to the property name of declaration.
579                 auto propertyName = CSSPropertyIDToIDLAttributeName(it->key);
580                 // 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.
581                 // 3. Let value be the result of converting IDL value to an ECMAScript String value.
582                 auto value = toJS<IDLDOMString>(state, it->value);
583                 // 4. Call the [[DefineOwnProperty]] internal method on output keyframe with property name property name,
584                 //    Property Descriptor { [[Writable]]: true, [[Enumerable]]: true, [[Configurable]]: true, [[Value]]: value } and Boolean flag false.
585                 JSObject::defineOwnProperty(outputKeyframe, &state, AtomicString(propertyName).impl(), PropertyDescriptor(value, 0), false);
586             }
587
588             // 4. Append output keyframe to result.
589             result.append(JSC::Strong<JSC::JSObject> { state.vm(), outputKeyframe });
590         }
591     }
592
593     // 4. Return result.
594     return result;
595 }
596
597 ExceptionOr<void> KeyframeEffectReadOnly::processKeyframes(ExecState& state, Strong<JSObject>&& keyframesInput)
598 {
599     // 1. If object is null, return an empty sequence of keyframes.
600     if (!keyframesInput.get())
601         return { };
602
603     VM& vm = state.vm();
604     auto scope = DECLARE_THROW_SCOPE(vm);
605
606     // 2. Let processed keyframes be an empty sequence of keyframes.
607     Vector<ParsedKeyframe> parsedKeyframes;
608
609     // 3. Let method be the result of GetMethod(object, @@iterator).
610     auto method = keyframesInput.get()->get(&state, vm.propertyNames->iteratorSymbol);
611
612     // 4. Check the completion record of method.
613     RETURN_IF_EXCEPTION(scope, Exception { TypeError });
614
615     // 5. Perform the steps corresponding to the first matching condition from below,
616     Vector<String> unusedEasings;
617     if (!method.isUndefined())
618         processIterableKeyframes(state, WTFMove(keyframesInput), WTFMove(method), parsedKeyframes);
619     else
620         processPropertyIndexedKeyframes(state, WTFMove(keyframesInput), parsedKeyframes, unusedEasings);
621
622     // 6. If processed keyframes is not loosely sorted by offset, throw a TypeError and abort these steps.
623     // 7. If there exist any keyframe in processed keyframes whose keyframe offset is non-null and less than
624     //    zero or greater than one, throw a TypeError and abort these steps.
625     double lastNonNullOffset = -1;
626     for (auto& keyframe : parsedKeyframes) {
627         if (!keyframe.offset)
628             continue;
629         auto offset = keyframe.offset.value();
630         if (offset <= lastNonNullOffset || offset < 0 || offset > 1)
631             return Exception { TypeError };
632         lastNonNullOffset = offset;
633     }
634
635     // We take a slight detour from the spec text and compute the missing keyframe offsets right away
636     // since they can be computed up-front.
637     computeMissingKeyframeOffsets(parsedKeyframes);
638
639     // 8. For each frame in processed keyframes, perform the following steps:
640     for (auto& keyframe : parsedKeyframes) {
641         // Let the timing function of frame be the result of parsing the “easing” property on frame using the CSS syntax
642         // defined for the easing property of the AnimationEffectTimingReadOnly interface.
643         // If parsing the “easing” property fails, throw a TypeError and abort this procedure.
644         auto timingFunctionResult = TimingFunction::createFromCSSText(keyframe.easing);
645         if (timingFunctionResult.hasException())
646             return timingFunctionResult.releaseException();
647         keyframe.timingFunction = timingFunctionResult.returnValue();
648     }
649
650     // 9. Parse each of the values in unused easings using the CSS syntax defined for easing property of the
651     //    AnimationEffectTimingReadOnly interface, and if any of the values fail to parse, throw a TypeError
652     //    and abort this procedure.
653     for (auto& easing : unusedEasings) {
654         auto timingFunctionResult = TimingFunction::createFromCSSText(easing);
655         if (timingFunctionResult.hasException())
656             return timingFunctionResult.releaseException();
657     }
658
659     m_parsedKeyframes = WTFMove(parsedKeyframes);
660
661     updateBlendingKeyframes();
662
663     return { };
664 }
665
666 void KeyframeEffectReadOnly::updateBlendingKeyframes()
667 {
668     if (!m_target)
669         return;
670
671     KeyframeList keyframeList("keyframe-effect-" + createCanonicalUUIDString());
672     StyleResolver& styleResolver = m_target->styleResolver();
673
674     for (auto& keyframe : m_parsedKeyframes) {
675         KeyframeValue keyframeValue(keyframe.computedOffset, nullptr);
676         auto renderStyle = RenderStyle::createPtr();
677         // We need to call update() on the FontCascade or we'll hit an ASSERT when parsing font-related properties.
678         renderStyle->fontCascade().update(nullptr);
679
680         auto& styleProperties = keyframe.style;
681         for (unsigned i = 0; i < styleProperties->propertyCount(); ++i) {
682             auto cssPropertyId = styleProperties->propertyAt(i).id();
683             keyframeValue.addProperty(cssPropertyId);
684             keyframeList.addProperty(cssPropertyId);
685             styleResolver.applyPropertyToStyle(cssPropertyId, styleProperties->propertyAt(i).value(), WTFMove(renderStyle));
686             renderStyle = styleResolver.state().takeStyle();
687         }
688
689         keyframeValue.setStyle(RenderStyle::clonePtr(*renderStyle));
690         keyframeList.insert(WTFMove(keyframeValue));
691     }
692
693     setBlendingKeyframes(keyframeList);
694 }
695
696 void KeyframeEffectReadOnly::setBlendingKeyframes(KeyframeList& blendingKeyframes)
697 {
698     m_blendingKeyframes = WTFMove(blendingKeyframes);
699
700     computeStackingContextImpact();
701     computeShouldRunAccelerated();
702
703     checkForMatchingTransformFunctionLists();
704     checkForMatchingFilterFunctionLists();
705 #if ENABLE(FILTERS_LEVEL_2)
706     checkForMatchingBackdropFilterFunctionLists();
707 #endif
708 }
709
710 void KeyframeEffectReadOnly::checkForMatchingTransformFunctionLists()
711 {
712     m_transformFunctionListsMatch = false;
713
714     if (m_blendingKeyframes.size() < 2 || !m_blendingKeyframes.containsProperty(CSSPropertyTransform))
715         return;
716
717     // Empty transforms match anything, so find the first non-empty entry as the reference.
718     size_t numKeyframes = m_blendingKeyframes.size();
719     size_t firstNonEmptyTransformKeyframeIndex = numKeyframes;
720
721     for (size_t i = 0; i < numKeyframes; ++i) {
722         const KeyframeValue& currentKeyframe = m_blendingKeyframes[i];
723         if (currentKeyframe.style()->transform().operations().size()) {
724             firstNonEmptyTransformKeyframeIndex = i;
725             break;
726         }
727     }
728
729     if (firstNonEmptyTransformKeyframeIndex == numKeyframes)
730         return;
731
732     const TransformOperations* firstVal = &m_blendingKeyframes[firstNonEmptyTransformKeyframeIndex].style()->transform();
733     for (size_t i = firstNonEmptyTransformKeyframeIndex + 1; i < numKeyframes; ++i) {
734         const KeyframeValue& currentKeyframe = m_blendingKeyframes[i];
735         const TransformOperations* val = &currentKeyframe.style()->transform();
736
737         // An empty transform list matches anything.
738         if (val->operations().isEmpty())
739             continue;
740
741         if (!firstVal->operationsMatch(*val))
742             return;
743     }
744
745     m_transformFunctionListsMatch = true;
746 }
747
748 void KeyframeEffectReadOnly::checkForMatchingFilterFunctionLists()
749 {
750     m_filterFunctionListsMatch = false;
751
752     if (m_blendingKeyframes.size() < 2 || !m_blendingKeyframes.containsProperty(CSSPropertyFilter))
753         return;
754
755     // Empty filters match anything, so find the first non-empty entry as the reference.
756     size_t numKeyframes = m_blendingKeyframes.size();
757     size_t firstNonEmptyFilterKeyframeIndex = numKeyframes;
758
759     for (size_t i = 0; i < numKeyframes; ++i) {
760         if (m_blendingKeyframes[i].style()->filter().operations().size()) {
761             firstNonEmptyFilterKeyframeIndex = i;
762             break;
763         }
764     }
765
766     if (firstNonEmptyFilterKeyframeIndex == numKeyframes)
767         return;
768
769     auto& firstVal = m_blendingKeyframes[firstNonEmptyFilterKeyframeIndex].style()->filter();
770     for (size_t i = firstNonEmptyFilterKeyframeIndex + 1; i < numKeyframes; ++i) {
771         auto& value = m_blendingKeyframes[i].style()->filter();
772
773         // An empty filter list matches anything.
774         if (value.operations().isEmpty())
775             continue;
776
777         if (!firstVal.operationsMatch(value))
778             return;
779     }
780
781     m_filterFunctionListsMatch = true;
782 }
783
784 #if ENABLE(FILTERS_LEVEL_2)
785 void KeyframeEffectReadOnly::checkForMatchingBackdropFilterFunctionLists()
786 {
787     m_backdropFilterFunctionListsMatch = false;
788
789     if (m_blendingKeyframes.size() < 2 || !m_blendingKeyframes.containsProperty(CSSPropertyWebkitBackdropFilter))
790         return;
791
792     // Empty filters match anything, so find the first non-empty entry as the reference.
793     size_t numKeyframes = m_blendingKeyframes.size();
794     size_t firstNonEmptyFilterKeyframeIndex = numKeyframes;
795
796     for (size_t i = 0; i < numKeyframes; ++i) {
797         if (m_blendingKeyframes[i].style()->backdropFilter().operations().size()) {
798             firstNonEmptyFilterKeyframeIndex = i;
799             break;
800         }
801     }
802
803     if (firstNonEmptyFilterKeyframeIndex == numKeyframes)
804         return;
805
806     auto& firstVal = m_blendingKeyframes[firstNonEmptyFilterKeyframeIndex].style()->backdropFilter();
807     for (size_t i = firstNonEmptyFilterKeyframeIndex + 1; i < numKeyframes; ++i) {
808         auto& value = m_blendingKeyframes[i].style()->backdropFilter();
809
810         // An empty filter list matches anything.
811         if (value.operations().isEmpty())
812             continue;
813
814         if (!firstVal.operationsMatch(value))
815             return;
816     }
817
818     m_backdropFilterFunctionListsMatch = true;
819 }
820 #endif
821
822 void KeyframeEffectReadOnly::computeDeclarativeAnimationBlendingKeyframes(const RenderStyle* oldStyle, const RenderStyle& newStyle)
823 {
824     ASSERT(is<DeclarativeAnimation>(animation()));
825     if (is<CSSAnimation>(animation()))
826         computeCSSAnimationBlendingKeyframes();
827     else if (is<CSSTransition>(animation()))
828         computeCSSTransitionBlendingKeyframes(oldStyle, newStyle);
829 }
830
831 void KeyframeEffectReadOnly::computeCSSAnimationBlendingKeyframes()
832 {
833     ASSERT(is<CSSAnimation>(animation()));
834
835     auto cssAnimation = downcast<CSSAnimation>(animation());
836     auto& backingAnimation = cssAnimation->backingAnimation();
837     if (backingAnimation.name().isEmpty())
838         return;
839
840     KeyframeList keyframeList(backingAnimation.name());
841     if (auto* styleScope = Style::Scope::forOrdinal(*m_target, backingAnimation.nameStyleScopeOrdinal()))
842         styleScope->resolver().keyframeStylesForAnimation(*m_target, &cssAnimation->unanimatedStyle(), keyframeList);
843
844     // Ensure resource loads for all the frames.
845     for (auto& keyframe : keyframeList.keyframes()) {
846         if (auto* style = const_cast<RenderStyle*>(keyframe.style()))
847             Style::loadPendingResources(*style, m_target->document(), m_target.get());
848     }
849
850     setBlendingKeyframes(keyframeList);
851 }
852
853 void KeyframeEffectReadOnly::computeCSSTransitionBlendingKeyframes(const RenderStyle* oldStyle, const RenderStyle& newStyle)
854 {
855     ASSERT(is<CSSTransition>(animation()));
856
857     if (!oldStyle || m_blendingKeyframes.size())
858         return;
859
860     auto property = downcast<CSSTransition>(animation())->property();
861
862     auto toStyle = RenderStyle::clonePtr(newStyle);
863     if (m_target)
864         Style::loadPendingResources(*toStyle, m_target->document(), m_target.get());
865
866     KeyframeList keyframeList("keyframe-effect-" + createCanonicalUUIDString());
867     keyframeList.addProperty(property);
868
869     KeyframeValue fromKeyframeValue(0, RenderStyle::clonePtr(*oldStyle));
870     fromKeyframeValue.addProperty(property);
871     keyframeList.insert(WTFMove(fromKeyframeValue));
872
873     KeyframeValue toKeyframeValue(1, WTFMove(toStyle));
874     toKeyframeValue.addProperty(property);
875     keyframeList.insert(WTFMove(toKeyframeValue));
876
877     setBlendingKeyframes(keyframeList);
878 }
879
880 bool KeyframeEffectReadOnly::stylesWouldYieldNewCSSTransitionsBlendingKeyframes(const RenderStyle& oldStyle, const RenderStyle& newStyle) const
881 {
882     ASSERT(is<CSSTransition>(animation()));
883
884     // We don't yet have blending keyframes to compare with, so these wouldn't be new keyframes, but the fisrt ones.
885     if (!hasBlendingKeyframes())
886         return false;
887
888     auto property = downcast<CSSTransition>(animation())->property();
889
890     // There cannot be new keyframes if the start and to values are the same.
891     if (CSSPropertyAnimation::propertiesEqual(property, &oldStyle, &newStyle))
892         return false;
893
894     // Otherwise, we would create new blending keyframes provided the current end keyframe holds a different
895     // value than the new end style for this property.
896     return !CSSPropertyAnimation::propertiesEqual(property, m_blendingKeyframes[1].style(), &newStyle);
897 }
898
899 void KeyframeEffectReadOnly::computeStackingContextImpact()
900 {
901     m_triggersStackingContext = false;
902     for (auto cssPropertyId : m_blendingKeyframes.properties()) {
903         if (WillChangeData::propertyCreatesStackingContext(cssPropertyId)) {
904             m_triggersStackingContext = true;
905             break;
906         }
907     }
908 }
909
910 void KeyframeEffectReadOnly::setTarget(RefPtr<Element>&& newTarget)
911 {
912     if (m_target == newTarget)
913         return;
914
915     auto previousTarget = std::exchange(m_target, WTFMove(newTarget));
916
917     if (auto* effectAnimation = animation())
918         effectAnimation->effectTargetDidChange(previousTarget.get(), m_target.get());
919
920     updateBlendingKeyframes();
921
922     // We need to invalidate the effect now that the target has changed
923     // to ensure the effect's styles are applied to the new target right away.
924     invalidate();
925
926     // Likewise, we need to invalidate styles on the previous target so that
927     // any animated styles are removed immediately.
928     invalidateElement(previousTarget.get());
929 }
930
931 void KeyframeEffectReadOnly::apply(RenderStyle& targetStyle)
932 {
933     if (!m_target)
934         return;
935
936     auto progress = iterationProgress();
937     if (m_startedAccelerated && (!progress || progress.value() >= 1)) {
938         m_startedAccelerated = false;
939         animation()->acceleratedStateDidChange();
940     }
941
942     if (!progress)
943         return;
944
945     if (!m_started && !m_startedAccelerated && m_shouldRunAccelerated) {
946         m_startedAccelerated = true;
947         animation()->acceleratedStateDidChange();
948     }
949     m_started = true;
950
951     setAnimatedPropertiesInStyle(targetStyle, progress.value());
952
953     // https://w3c.github.io/web-animations/#side-effects-section
954     // For every property targeted by at least one animation effect that is current or in effect, the user agent
955     // must act as if the will-change property ([css-will-change-1]) on the target element includes the property.
956     if (m_triggersStackingContext && targetStyle.hasAutoZIndex())
957         targetStyle.setZIndex(0);
958 }
959
960 void KeyframeEffectReadOnly::invalidate()
961 {
962     invalidateElement(m_target.get());
963 }
964
965 void KeyframeEffectReadOnly::computeShouldRunAccelerated()
966 {
967     m_shouldRunAccelerated = hasBlendingKeyframes();
968     for (auto cssPropertyId : m_blendingKeyframes.properties()) {
969         if (!CSSPropertyAnimation::animationOfPropertyIsAccelerated(cssPropertyId)) {
970             m_shouldRunAccelerated = false;
971             return;
972         }
973     }
974 }
975
976 void KeyframeEffectReadOnly::getAnimatedStyle(std::unique_ptr<RenderStyle>& animatedStyle)
977 {
978     if (!animation())
979         return;
980
981     if (!m_blendingKeyframes.size())
982         return;
983
984     auto progress = iterationProgress();
985     if (!progress)
986         return;
987
988     if (!animatedStyle)
989         animatedStyle = RenderStyle::clonePtr(renderer()->style());
990
991     setAnimatedPropertiesInStyle(*animatedStyle.get(), progress.value());
992 }
993
994 void KeyframeEffectReadOnly::setAnimatedPropertiesInStyle(RenderStyle& targetStyle, double iterationProgress)
995 {
996     // 4.4.3. The effect value of a keyframe effect
997     // https://drafts.csswg.org/web-animations-1/#the-effect-value-of-a-keyframe-animation-effect
998     //
999     // The effect value of a single property referenced by a keyframe effect as one of its target properties,
1000     // for a given iteration progress, current iteration and underlying value is calculated as follows.
1001
1002     bool isCSSAnimation = is<CSSAnimation>(animation());
1003
1004     for (auto cssPropertyId : m_blendingKeyframes.properties()) {
1005         // 1. If iteration progress is unresolved abort this procedure.
1006         // 2. Let target property be the longhand property for which the effect value is to be calculated.
1007         // 3. If animation type of the target property is not animatable abort this procedure since the effect cannot be applied.
1008         // 4. Define the neutral value for composition as a value which, when combined with an underlying value using the add composite operation,
1009         //    produces the underlying value.
1010
1011         // 5. Let property-specific keyframes be the result of getting the set of computed keyframes for this keyframe effect.
1012         // 6. Remove any keyframes from property-specific keyframes that do not have a property value for target property.
1013         unsigned numberOfKeyframesWithZeroOffset = 0;
1014         unsigned numberOfKeyframesWithOneOffset = 0;
1015         Vector<std::optional<size_t>> propertySpecificKeyframes;
1016         for (size_t i = 0; i < m_blendingKeyframes.size(); ++i) {
1017             auto& keyframe = m_blendingKeyframes[i];
1018             auto offset = keyframe.key();
1019             if (!keyframe.containsProperty(cssPropertyId)) {
1020                 // If we're dealing with a CSS animation, we consider the first and last keyframes to always have the property listed
1021                 // since the underlying style was provided and should be captured.
1022                 if (!isCSSAnimation || (offset && offset < 1))
1023                     continue;
1024             }
1025             if (!offset)
1026                 numberOfKeyframesWithZeroOffset++;
1027             if (offset == 1)
1028                 numberOfKeyframesWithOneOffset++;
1029             propertySpecificKeyframes.append(i);
1030         }
1031
1032         // 7. If property-specific keyframes is empty, return underlying value.
1033         if (propertySpecificKeyframes.isEmpty())
1034             continue;
1035
1036         // 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
1037         //    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
1038         //    property-specific keyframes.
1039         if (!numberOfKeyframesWithZeroOffset) {
1040             propertySpecificKeyframes.insert(0, std::nullopt);
1041             numberOfKeyframesWithZeroOffset = 1;
1042         }
1043
1044         // 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
1045         //    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
1046         //    property-specific keyframes.
1047         if (!numberOfKeyframesWithOneOffset) {
1048             propertySpecificKeyframes.append(std::nullopt);
1049             numberOfKeyframesWithOneOffset = 1;
1050         }
1051
1052         // 10. Let interval endpoints be an empty sequence of keyframes.
1053         Vector<std::optional<size_t>> intervalEndpoints;
1054
1055         // 11. Populate interval endpoints by following the steps from the first matching condition from below:
1056         if (iterationProgress < 0 && numberOfKeyframesWithZeroOffset > 1) {
1057             // If iteration progress < 0 and there is more than one keyframe in property-specific keyframes with a computed keyframe offset of 0,
1058             // Add the first keyframe in property-specific keyframes to interval endpoints.
1059             intervalEndpoints.append(propertySpecificKeyframes.first());
1060         } else if (iterationProgress >= 1 && numberOfKeyframesWithOneOffset > 1) {
1061             // If iteration progress ≥ 1 and there is more than one keyframe in property-specific keyframes with a computed keyframe offset of 1,
1062             // Add the last keyframe in property-specific keyframes to interval endpoints.
1063             intervalEndpoints.append(propertySpecificKeyframes.last());
1064         } else {
1065             // Otherwise,
1066             // 1. Append to interval endpoints the last keyframe in property-specific keyframes whose computed keyframe offset is less than or equal
1067             //    to iteration progress and less than 1. If there is no such keyframe (because, for example, the iteration progress is negative),
1068             //    add the last keyframe whose computed keyframe offset is 0.
1069             // 2. Append to interval endpoints the next keyframe in property-specific keyframes after the one added in the previous step.
1070             size_t indexOfLastKeyframeWithZeroOffset = 0;
1071             int indexOfFirstKeyframeToAddToIntervalEndpoints = -1;
1072             for (size_t i = 0; i < propertySpecificKeyframes.size(); ++i) {
1073                 auto keyframeIndex = propertySpecificKeyframes[i];
1074                 auto offset = [&] () -> double {
1075                     if (!keyframeIndex)
1076                         return i ? 1 : 0;
1077                     return m_blendingKeyframes[keyframeIndex.value()].key();
1078                 }();
1079                 if (!offset)
1080                     indexOfLastKeyframeWithZeroOffset = i;
1081                 if (offset <= iterationProgress && offset < 1)
1082                     indexOfFirstKeyframeToAddToIntervalEndpoints = i;
1083                 else
1084                     break;
1085             }
1086
1087             if (indexOfFirstKeyframeToAddToIntervalEndpoints >= 0) {
1088                 intervalEndpoints.append(propertySpecificKeyframes[indexOfFirstKeyframeToAddToIntervalEndpoints]);
1089                 intervalEndpoints.append(propertySpecificKeyframes[indexOfFirstKeyframeToAddToIntervalEndpoints + 1]);
1090             } else {
1091                 ASSERT(indexOfLastKeyframeWithZeroOffset < propertySpecificKeyframes.size() - 1);
1092                 intervalEndpoints.append(propertySpecificKeyframes[indexOfLastKeyframeWithZeroOffset]);
1093                 intervalEndpoints.append(propertySpecificKeyframes[indexOfLastKeyframeWithZeroOffset + 1]);
1094             }
1095         }
1096
1097         // 12. For each keyframe in interval endpoints…
1098         // FIXME: we don't support this step yet since we don't deal with any composite operation other than "replace".
1099
1100         // 13. If there is only one keyframe in interval endpoints return the property value of target property on that keyframe.
1101         if (intervalEndpoints.size() == 1) {
1102             auto keyframeIndex = intervalEndpoints[0];
1103             auto keyframeStyle = !keyframeIndex ? &targetStyle : m_blendingKeyframes[keyframeIndex.value()].style();
1104             CSSPropertyAnimation::blendProperties(this, cssPropertyId, &targetStyle, keyframeStyle, keyframeStyle, 0);
1105             continue;
1106         }
1107
1108         // 14. Let start offset be the computed keyframe offset of the first keyframe in interval endpoints.
1109         auto startKeyframeIndex = intervalEndpoints.first();
1110         auto startOffset = !startKeyframeIndex ? 0 : m_blendingKeyframes[startKeyframeIndex.value()].key();
1111
1112         // 15. Let end offset be the computed keyframe offset of last keyframe in interval endpoints.
1113         auto endKeyframeIndex = intervalEndpoints.last();
1114         auto endOffset = !endKeyframeIndex ? 1 : m_blendingKeyframes[endKeyframeIndex.value()].key();
1115
1116         // 16. Let interval distance be the result of evaluating (iteration progress - start offset) / (end offset - start offset).
1117         auto intervalDistance = (iterationProgress - startOffset) / (endOffset - startOffset);
1118
1119         // 17. Let transformed distance be the result of evaluating the timing function associated with the first keyframe in interval endpoints
1120         //     passing interval distance as the input progress.
1121         auto transformedDistance = intervalDistance;
1122         if (startKeyframeIndex) {
1123             if (auto iterationDuration = timing()->iterationDuration()) {
1124                 auto rangeDuration = (endOffset - startOffset) * iterationDuration.seconds();
1125                 transformedDistance = timingFunctionForKeyframeAtIndex(startKeyframeIndex.value())->transformTime(intervalDistance, rangeDuration);
1126             }
1127         }
1128
1129         // 18. Return the result of applying the interpolation procedure defined by the animation type of the target property, to the values of the target
1130         //     property specified on the two keyframes in interval endpoints taking the first such value as Vstart and the second as Vend and using transformed
1131         //     distance as the interpolation parameter p.
1132         auto startStyle = !startKeyframeIndex ? &targetStyle : m_blendingKeyframes[startKeyframeIndex.value()].style();
1133         auto endStyle = !endKeyframeIndex ? &targetStyle : m_blendingKeyframes[endKeyframeIndex.value()].style();
1134         CSSPropertyAnimation::blendProperties(this, cssPropertyId, &targetStyle, startStyle, endStyle, transformedDistance);
1135     }
1136 }
1137
1138 TimingFunction* KeyframeEffectReadOnly::timingFunctionForKeyframeAtIndex(size_t index)
1139 {
1140     if (!m_parsedKeyframes.isEmpty())
1141         return m_parsedKeyframes[index].timingFunction.get();
1142
1143     auto effectAnimation = animation();
1144
1145     // If we didn't have parsed keyframes, we must be dealing with a declarative animation.
1146     ASSERT(is<DeclarativeAnimation>(effectAnimation));
1147
1148     // If we're dealing with a CSS Animation, the timing function is specified either on the keyframe itself,
1149     // or failing that on the backing Animation object which defines the default for all keyframes.
1150     if (is<CSSAnimation>(effectAnimation)) {
1151         if (auto* timingFunction = m_blendingKeyframes[index].timingFunction())
1152             return timingFunction;
1153     }
1154
1155     // Failing that, or for a CSS Transition, the timing function is inherited from the backing Animation object. 
1156     return downcast<DeclarativeAnimation>(effectAnimation)->backingAnimation().timingFunction();
1157 }
1158
1159 void KeyframeEffectReadOnly::animationPlayStateDidChange(WebAnimation::PlayState playState)
1160 {
1161     if (playState == WebAnimation::PlayState::Running)
1162         addPendingAcceleratedAction(AcceleratedAction::Play);
1163     else if (playState == WebAnimation::PlayState::Paused)
1164         addPendingAcceleratedAction(AcceleratedAction::Pause);
1165 };
1166
1167 void KeyframeEffectReadOnly::animationDidSeek()
1168 {
1169     addPendingAcceleratedAction(AcceleratedAction::Seek);
1170 }
1171
1172 void KeyframeEffectReadOnly::addPendingAcceleratedAction(AcceleratedAction action)
1173 {
1174     if (!m_shouldRunAccelerated)
1175         return;
1176
1177     m_pendingAcceleratedActions.append(action);
1178     animation()->acceleratedStateDidChange();
1179 }
1180
1181 void KeyframeEffectReadOnly::applyPendingAcceleratedActions()
1182 {
1183     auto* renderer = this->renderer();
1184     if (!renderer || !renderer->isComposited())
1185         return;
1186
1187     auto* compositedRenderer = downcast<RenderBoxModelObject>(renderer);
1188     if (m_startedAccelerated) {
1189         auto timeOffset = animation()->currentTime().value().seconds();
1190         if (timing()->delay() < 0_s)
1191             timeOffset = -timing()->delay().seconds();
1192
1193         for (const auto& action : m_pendingAcceleratedActions) {
1194             switch (action) {
1195             case AcceleratedAction::Play:
1196                 compositedRenderer->startAnimation(timeOffset, backingAnimationForCompositedRenderer().ptr(), m_blendingKeyframes);
1197                 break;
1198             case AcceleratedAction::Pause:
1199                 compositedRenderer->animationPaused(timeOffset, m_blendingKeyframes.animationName());
1200                 break;
1201             case AcceleratedAction::Seek:
1202                 compositedRenderer->animationSeeked(timeOffset, m_blendingKeyframes.animationName());
1203                 break;
1204             }
1205         }
1206         m_pendingAcceleratedActions.clear();
1207     } else {
1208         compositedRenderer->animationFinished(m_blendingKeyframes.animationName());
1209         if (!m_target->document().renderTreeBeingDestroyed())
1210             m_target->invalidateStyleAndLayerComposition();
1211     }
1212 }
1213
1214 Ref<const Animation> KeyframeEffectReadOnly::backingAnimationForCompositedRenderer() const
1215 {
1216     auto effectAnimation = animation();
1217     if (is<DeclarativeAnimation>(effectAnimation))
1218         return downcast<DeclarativeAnimation>(effectAnimation)->backingAnimation();
1219
1220     // FIXME: The iterationStart and endDelay AnimationEffectTimingReadOnly properties do not have
1221     // corresponding Animation properties.
1222     auto effectTiming = timing();
1223     auto animation = Animation::create();
1224     animation->setDuration(effectTiming->iterationDuration().seconds());
1225     animation->setDelay(effectTiming->delay().seconds());
1226     animation->setIterationCount(effectTiming->iterations());
1227     animation->setTimingFunction(effectTiming->timingFunction()->clone());
1228
1229     switch (effectTiming->fill()) {
1230     case FillMode::None:
1231     case FillMode::Auto:
1232         animation->setFillMode(AnimationFillModeNone);
1233         break;
1234     case FillMode::Backwards:
1235         animation->setFillMode(AnimationFillModeBackwards);
1236         break;
1237     case FillMode::Forwards:
1238         animation->setFillMode(AnimationFillModeForwards);
1239         break;
1240     case FillMode::Both:
1241         animation->setFillMode(AnimationFillModeBoth);
1242         break;
1243     }
1244
1245     switch (effectTiming->direction()) {
1246     case PlaybackDirection::Normal:
1247         animation->setDirection(Animation::AnimationDirectionNormal);
1248         break;
1249     case PlaybackDirection::Alternate:
1250         animation->setDirection(Animation::AnimationDirectionAlternate);
1251         break;
1252     case PlaybackDirection::Reverse:
1253         animation->setDirection(Animation::AnimationDirectionReverse);
1254         break;
1255     case PlaybackDirection::AlternateReverse:
1256         animation->setDirection(Animation::AnimationDirectionAlternateReverse);
1257         break;
1258     }
1259
1260     return WTFMove(animation);
1261 }
1262
1263 RenderElement* KeyframeEffectReadOnly::renderer() const
1264 {
1265     return m_target ? m_target->renderer() : nullptr;
1266 }
1267
1268 const RenderStyle& KeyframeEffectReadOnly::currentStyle() const
1269 {
1270     if (auto* renderer = this->renderer())
1271         return renderer->style();
1272     return RenderStyle::defaultStyle();
1273 }
1274
1275 bool KeyframeEffectReadOnly::computeExtentOfTransformAnimation(LayoutRect& bounds) const
1276 {
1277     ASSERT(m_blendingKeyframes.containsProperty(CSSPropertyTransform));
1278
1279     if (!is<RenderBox>(renderer()))
1280         return true; // Non-boxes don't get transformed;
1281
1282     RenderBox& box = downcast<RenderBox>(*renderer());
1283     FloatRect rendererBox = snapRectToDevicePixels(box.borderBoxRect(), box.document().deviceScaleFactor());
1284
1285     FloatRect cumulativeBounds = bounds;
1286
1287     for (const auto& keyframe : m_blendingKeyframes.keyframes()) {
1288         // FIXME: maybe for declarative animations we always say it's true for the first and last keyframe.
1289         if (!keyframe.containsProperty(CSSPropertyTransform))
1290             continue;
1291
1292         LayoutRect keyframeBounds = bounds;
1293
1294         bool canCompute;
1295         if (transformFunctionListsMatch())
1296             canCompute = computeTransformedExtentViaTransformList(rendererBox, *keyframe.style(), keyframeBounds);
1297         else
1298             canCompute = computeTransformedExtentViaMatrix(rendererBox, *keyframe.style(), keyframeBounds);
1299
1300         if (!canCompute)
1301             return false;
1302
1303         cumulativeBounds.unite(keyframeBounds);
1304     }
1305
1306     bounds = LayoutRect(cumulativeBounds);
1307     return true;
1308 }
1309
1310 static bool containsRotation(const Vector<RefPtr<TransformOperation>>& operations)
1311 {
1312     for (const auto& operation : operations) {
1313         if (operation->type() == TransformOperation::ROTATE)
1314             return true;
1315     }
1316     return false;
1317 }
1318
1319 bool KeyframeEffectReadOnly::computeTransformedExtentViaTransformList(const FloatRect& rendererBox, const RenderStyle& style, LayoutRect& bounds) const
1320 {
1321     FloatRect floatBounds = bounds;
1322     FloatPoint transformOrigin;
1323
1324     bool applyTransformOrigin = containsRotation(style.transform().operations()) || style.transform().affectedByTransformOrigin();
1325     if (applyTransformOrigin) {
1326         transformOrigin.setX(rendererBox.x() + floatValueForLength(style.transformOriginX(), rendererBox.width()));
1327         transformOrigin.setY(rendererBox.y() + floatValueForLength(style.transformOriginY(), rendererBox.height()));
1328         // Ignore transformOriginZ because we'll bail if we encounter any 3D transforms.
1329
1330         floatBounds.moveBy(-transformOrigin);
1331     }
1332
1333     for (const auto& operation : style.transform().operations()) {
1334         if (operation->type() == TransformOperation::ROTATE) {
1335             // For now, just treat this as a full rotation. This could take angle into account to reduce inflation.
1336             floatBounds = boundsOfRotatingRect(floatBounds);
1337         } else {
1338             TransformationMatrix transform;
1339             operation->apply(transform, rendererBox.size());
1340             if (!transform.isAffine())
1341                 return false;
1342
1343             if (operation->type() == TransformOperation::MATRIX || operation->type() == TransformOperation::MATRIX_3D) {
1344                 TransformationMatrix::Decomposed2Type toDecomp;
1345                 transform.decompose2(toDecomp);
1346                 // Any rotation prevents us from using a simple start/end rect union.
1347                 if (toDecomp.angle)
1348                     return false;
1349             }
1350
1351             floatBounds = transform.mapRect(floatBounds);
1352         }
1353     }
1354
1355     if (applyTransformOrigin)
1356         floatBounds.moveBy(transformOrigin);
1357
1358     bounds = LayoutRect(floatBounds);
1359     return true;
1360 }
1361
1362 bool KeyframeEffectReadOnly::computeTransformedExtentViaMatrix(const FloatRect& rendererBox, const RenderStyle& style, LayoutRect& bounds) const
1363 {
1364     TransformationMatrix transform;
1365     style.applyTransform(transform, rendererBox, RenderStyle::IncludeTransformOrigin);
1366     if (!transform.isAffine())
1367         return false;
1368
1369     TransformationMatrix::Decomposed2Type fromDecomp;
1370     transform.decompose2(fromDecomp);
1371     // Any rotation prevents us from using a simple start/end rect union.
1372     if (fromDecomp.angle)
1373         return false;
1374
1375     bounds = LayoutRect(transform.mapRect(bounds));
1376     return true;
1377 }
1378
1379 } // namespace WebCore