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