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