Web Animations: Trigger and update CSS Animations backed by the Web Animations model

Source/core/css/resolver/StyleResolver.cpp

 /*
  * Copyright (C) 1999 Lars Knoll (knoll@kde.org)
  *           (C) 2004-2005 Allan Sandfeld Jensen (kde@carewolf.com)
  * Copyright (C) 2006, 2007 Nicholas Shanks (webkit@nickshanks.com)
  * Copyright (C) 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013 Apple Inc. All rights reserved.
  * Copyright (C) 2007 Alexey Proskuryakov <ap@webkit.org>
  * Copyright (C) 2007, 2008 Eric Seidel <eric@webkit.org>
  * Copyright (C) 2008, 2009 Torch Mobile Inc. All rights reserved. (http://www.torchmobile.com/)
  * Copyright (c) 2011, Code Aurora Forum. All rights reserved.
  * Copyright (C) Research In Motion Limited 2011. All rights reserved.
@@ skipping 18 matching lines @@
 #include "config.h"
 #include "core/css/resolver/StyleResolver.h"
 
 #include "CSSPropertyNames.h"
 #include "HTMLNames.h"
 #include "RuntimeEnabledFeatures.h"
 #include "StylePropertyShorthand.h"
 #include "core/animation/AnimatableValue.h"
 #include "core/animation/Animation.h"
 #include "core/animation/DocumentTimeline.h"
+#include "core/animation/css/CSSAnimations.h"
 #include "core/css/CSSCalculationValue.h"
 #include "core/css/CSSDefaultStyleSheets.h"
 #include "core/css/CSSFontSelector.h"
 #include "core/css/CSSKeyframeRule.h"
 #include "core/css/CSSKeyframesRule.h"
 #include "core/css/CSSParser.h"
 #include "core/css/CSSReflectValue.h"
 #include "core/css/CSSRuleList.h"
 #include "core/css/CSSSelector.h"
 #include "core/css/CSSStyleRule.h"
@@ skipping 567 matching lines @@
     // FIXME: Shouldn't this be on RenderBody::styleDidChange?
     if (element->hasTagName(bodyTag))
         document()->textLinkColors().setTextColor(state.style()->visitedDependentColor(CSSPropertyColor));
 
     // Now return the style.
     return state.takeStyle();
 }
 
 PassRefPtr<RenderStyle> StyleResolver::styleForKeyframe(Element* e, const RenderStyle* elementStyle, const StyleKeyframe* keyframe, KeyframeValue& keyframeValue)
 {
+    ASSERT(!RuntimeEnabledFeatures::webAnimationsCSSEnabled());
     ASSERT(document()->frame());
     ASSERT(documentSettings());
 
     if (e == document()->documentElement())
         resetDirectionAndWritingModeOnDocument(document());
     StyleResolverState state(document(), e);
 
     MatchResult result;
     if (keyframe->properties())
         result.addMatchedProperties(keyframe->properties());
@@ skipping 43 matching lines @@
             if (property != CSSPropertyWebkitAnimationTimingFunction)
                 keyframeValue.addProperty(property);
         }
     }
 
     document()->didAccessStyleResolver();
 
     return state.takeStyle();
 }
 
-const StyleRuleKeyframes* StyleResolver::matchScopedKeyframesRule(Element* e, const StringImpl* animationName)
+const StyleRuleKeyframes* StyleResolver::matchScopedKeyframesRule(const Element* e, const StringImpl* animationName)
 {
     if (m_styleTree.hasOnlyScopedResolverForDocument())
         return m_styleTree.scopedStyleResolverForDocument()->keyframeStylesForAnimation(animationName);
 
     Vector<ScopedStyleResolver*, 8> stack;
     m_styleTree.resolveScopedKeyframesRules(e, stack);
     if (stack.isEmpty())
         return 0;
 
     for (size_t i = 0; i < stack.size(); ++i) {
@@ skipping 52 matching lines @@
         if (!hundredPercentKeyframe) {
             hundredPercentKeyframe = StyleKeyframe::create().leakRef();
             hundredPercentKeyframe->setKeyText("100%");
         }
         KeyframeValue keyframeValue(1, 0);
         keyframeValue.setStyle(styleForKeyframe(e, elementStyle, hundredPercentKeyframe, keyframeValue));
         list.insert(keyframeValue);
     }
 }
 
+void StyleResolver::resolveKeyframes(Element* element, const StringImpl* name, KeyframeAnimationEffect::KeyframeVector& keyframes)
+{

[Steve Block, 2013/08/06 03:57:01]

Can we add an ASSERT to make clear that this is used only with WebAnimations?

[dstockwell, 2013/08/06 05:43:25]

Done.

+    const StyleRuleKeyframes* keyframesRule = matchScopedKeyframesRule(element, name);
+    if (!keyframesRule)
+        return;
+
+    // Construct and populate the style for each keyframe
+    const Vector<RefPtr<StyleKeyframe> >& styleKeyframes = keyframesRule->keyframes();
+    for (unsigned i = 0; i < styleKeyframes.size(); ++i) {
+        const StyleKeyframe* styleKeyframe = styleKeyframes[i].get();
+
+        Vector<float> offsets;
+        styleKeyframe->getKeys(offsets);
+        for (size_t j = 0; j < offsets.size(); ++j) {
+            RefPtr<Keyframe> keyframe = Keyframe::create();
+            keyframe->setOffset(offsets[j]);

[Steve Block, 2013/08/06 03:57:01]

It looks like we don't handle multiple keyframes at the same offset. CSS
requires us to use the last specified keyframe for that offset, whereas
KeyframeAnimationEffect allows multiple keyframes at the same offset and uses a
'step' behavior. So we need to remove duplicates here I think.

[dstockwell, 2013/08/06 05:43:25]

I was addressing this in: https://codereview.chromium.org/21779003/

+            const StylePropertySet* properties = styleKeyframe->properties();
+            // FIXME: AnimatableValues should be shared between the keyframes at different offsets.
+            for (unsigned k = 0; k < properties->propertyCount(); k++) {
+                CSSPropertyID property = properties->propertyAt(k).id();
+                // FIXME: CSSValue needs to be resolved.
+                keyframe->setPropertyValue(property, AnimatableValue::create(properties->getPropertyCSSValue(property).get()).get());
+            }
+            keyframes.append(keyframe);
+        }
+    }
+
+    // FIXME: If the 0% keyframe is missing, create it (but only if there is at least one other keyframe)
+    // FIXME: If the 100% keyframe is missing, create it (but only if there is at least one other keyframe)
+}
+
+const StylePropertySet* StyleResolver::firstKeyframeStyles(const Element* element, const StringImpl* animationName)
+{

[Steve Block, 2013/08/06 03:57:01]

Can we add an ASSERT to make clear that this is used only with WebAnimations?

[dstockwell, 2013/08/06 05:43:25]

Done.

+    const StyleRuleKeyframes* keyframesRule = matchScopedKeyframesRule(element, animationName);
+    if (!keyframesRule)
+        return 0;
+
+    // Find the last keyframe at offset 0
+    const StyleKeyframe* firstKeyframe = 0;
+    const Vector<RefPtr<StyleKeyframe> >& styleKeyframes = keyframesRule->keyframes();
+    for (unsigned i = 0; i < styleKeyframes.size(); ++i) {
+        const StyleKeyframe* styleKeyframe = styleKeyframes[i].get();
+
+        Vector<float> offsets;
+        styleKeyframe->getKeys(offsets);
+        for (size_t j = 0; j < offsets.size(); ++j) {
+            if (!offsets[j]) {
+                firstKeyframe = styleKeyframe;
+                break;
+            }
+        }
+    }
+
+    return firstKeyframe ? firstKeyframe->properties() : 0;
+}
+
+
 PassRefPtr<RenderStyle> StyleResolver::pseudoStyleForElement(Element* e, const PseudoStyleRequest& pseudoStyleRequest, RenderStyle* parentStyle)
 {
     ASSERT(document()->frame());
     ASSERT(documentSettings());
     ASSERT(parentStyle);
     if (!e)
         return 0;
 
     if (e == document()->documentElement())
         resetDirectionAndWritingModeOnDocument(document());
@@ skipping 197 matching lines @@
         matchAuthorRules(state.element(), collector, rulesToInclude & EmptyCSSRules);
     }
 
     return collector.matchedRuleList();
 }
 
 // -------------------------------------------------------------------------------------
 // this is mostly boring stuff on how to apply a certain rule to the renderstyle...
 
 template <StyleResolver::StyleApplicationPass pass>
-void StyleResolver::applyAnimatedProperties(StyleResolverState& state, const Element* target, const DocumentTimeline* timeline)
+void StyleResolver::applyAnimatedProperties(StyleResolverState& state, const Element* target, const DocumentTimeline* timeline, const CSSAnimationUpdate* update)
 {

[Steve Block, 2013/08/06 03:57:01]

Can we add an ASSERT to make clear that this is used only with WebAnimations?

[dstockwell, 2013/08/06 05:43:25]

Done.

     ASSERT(pass != VariableDefinitions);
     ASSERT(pass != AnimationProperties);
+    if (update && update->styles()) {
+        bool applyInheritedOnly = false;
+        bool isImportant = false;
+        StyleRule* rule = 0;
+        applyProperties<pass>(state, update->styles(), rule, isImportant, applyInheritedOnly, PropertyWhitelistNone);
+        isImportant = true;
+        applyProperties<pass>(state, update->styles(), rule, isImportant, applyInheritedOnly, PropertyWhitelistNone);
+    }
     AnimationStack* animationStack = timeline->animationStack(target);
     if (!animationStack)
         return;
     const Vector<Animation*>& animations = animationStack->activeAnimations(target);
 
     for (size_t i = 0; i < animations.size(); ++i) {
         RefPtr<Animation> animation = animations.at(i);
+        if (update && update->isFiltered(animation->player()))
+            continue;
         const AnimationEffect::CompositableValueMap* compositableValues = animation->compositableValues();
         for (AnimationEffect::CompositableValueMap::const_iterator iter = compositableValues->begin(); iter != compositableValues->end(); ++iter) {
             CSSPropertyID property = iter->key;
             if (!isPropertyForPass<pass>(property))
                 continue;
             RefPtr<AnimatableValue> animatableValue = iter->value->compositeOnto(AnimatableValue::neutralValue());
             if (animatableValue->isDeferredSnapshot())
                 continue;
             RefPtr<CSSValue> cssValue = animatableValue->toCSSValue();
             if (pass == HighPriorityProperties && property == CSSPropertyLineHeight)
@@ skipping 181 matching lines @@
 static unsigned computeMatchedPropertiesHash(const MatchedProperties* properties, unsigned size)
 {
     return StringHasher::hashMemory(properties, sizeof(MatchedProperties) * size);
 }
 
 void StyleResolver::invalidateMatchedPropertiesCache()
 {
     m_matchedPropertiesCache.clear();
 }
 
+PassOwnPtr<CSSAnimationUpdate> StyleResolver::calculateCSSAnimationUpdate(StyleResolverState& state)
+{
+    if (!RuntimeEnabledFeatures::webAnimationsCSSEnabled())
+        return nullptr;
+
+    const Element* element = state.element();
+    ASSERT(element);
+
+    if (!CSSAnimations::needsUpdate(element, state.style()))
+        return nullptr;
+
+    ActiveAnimations* activeAnimations = element->activeAnimations();
+    const CSSAnimationDataList* animations = state.style()->animations();
+    const CSSAnimations* cssAnimations = activeAnimations ? activeAnimations->cssAnimations() : 0;
+    EDisplay display = state.style()->display();
+    return CSSAnimations::calculateUpdate(element, display, cssAnimations, animations, this);
+}
+
 void StyleResolver::applyMatchedProperties(StyleResolverState& state, const MatchResult& matchResult)
 {
     const Element* element = state.element();
     ASSERT(element);
     STYLE_STATS_ADD_MATCHED_PROPERTIES_SEARCH();
 
     unsigned cacheHash = matchResult.isCacheable ? computeMatchedPropertiesHash(matchResult.matchedProperties.data(), matchResult.matchedProperties.size()) : 0;
     bool applyInheritedOnly = false;
     const CachedMatchedProperties* cachedMatchedProperties = 0;
 
@@ skipping 23 matching lines @@
     applyMatchedProperties<VariableDefinitions>(state, matchResult, false, 0, matchResult.matchedProperties.size() - 1, applyInheritedOnly);
     applyMatchedProperties<VariableDefinitions>(state, matchResult, true, matchResult.ranges.firstAuthorRule, matchResult.ranges.lastAuthorRule, applyInheritedOnly);
     applyMatchedProperties<VariableDefinitions>(state, matchResult, true, matchResult.ranges.firstUserRule, matchResult.ranges.lastUserRule, applyInheritedOnly);
     applyMatchedProperties<VariableDefinitions>(state, matchResult, true, matchResult.ranges.firstUARule, matchResult.ranges.lastUARule, applyInheritedOnly);
 
     // Apply animation properties in order to apply animation results and trigger transitions below.
     applyMatchedProperties<AnimationProperties>(state, matchResult, false, 0, matchResult.matchedProperties.size() - 1, applyInheritedOnly);
     applyMatchedProperties<AnimationProperties>(state, matchResult, true, matchResult.ranges.firstAuthorRule, matchResult.ranges.lastAuthorRule, applyInheritedOnly);
     applyMatchedProperties<AnimationProperties>(state, matchResult, true, matchResult.ranges.firstUserRule, matchResult.ranges.lastUserRule, applyInheritedOnly);
     applyMatchedProperties<AnimationProperties>(state, matchResult, true, matchResult.ranges.firstUARule, matchResult.ranges.lastUARule, applyInheritedOnly);
-    // FIXME: animations should be triggered here
+
+    OwnPtr<CSSAnimationUpdate> cssAnimationUpdate = calculateCSSAnimationUpdate(state);
 
     // Now we have all of the matched rules in the appropriate order. Walk the rules and apply
     // high-priority properties first, i.e., those properties that other properties depend on.
     // The order is (1) high-priority not important, (2) high-priority important, (3) normal not important
     // and (4) normal important.
     state.setLineHeightValue(0);
     applyMatchedProperties<HighPriorityProperties>(state, matchResult, false, 0, matchResult.matchedProperties.size() - 1, applyInheritedOnly);
     // Animation contributions are processed here because CSS Animations are overridable by user !important rules.
-    if (RuntimeEnabledFeatures::webAnimationsEnabled())
-        applyAnimatedProperties<HighPriorityProperties>(state, element, element->document()->timeline());
+    if (RuntimeEnabledFeatures::webAnimationsEnabled() && !applyInheritedOnly)
+        applyAnimatedProperties<HighPriorityProperties>(state, element, element->document()->timeline(), cssAnimationUpdate.get());
     applyMatchedProperties<HighPriorityProperties>(state, matchResult, true, matchResult.ranges.firstAuthorRule, matchResult.ranges.lastAuthorRule, applyInheritedOnly);
     applyMatchedProperties<HighPriorityProperties>(state, matchResult, true, matchResult.ranges.firstUserRule, matchResult.ranges.lastUserRule, applyInheritedOnly);
     applyMatchedProperties<HighPriorityProperties>(state, matchResult, true, matchResult.ranges.firstUARule, matchResult.ranges.lastUARule, applyInheritedOnly);
 
     if (cachedMatchedProperties && cachedMatchedProperties->renderStyle->effectiveZoom() != state.style()->effectiveZoom()) {
         state.fontBuilder().setFontDirty(true);
         applyInheritedOnly = false;
     }
 
     // If our font got dirtied, go ahead and update it now.
     updateFont(state);
 
     // Line-height is set when we are sure we decided on the font-size.
     if (state.lineHeightValue())
         applyProperty(state, CSSPropertyLineHeight, state.lineHeightValue());
 
     // Many properties depend on the font. If it changes we just apply all properties.
     if (cachedMatchedProperties && cachedMatchedProperties->renderStyle->fontDescription() != state.style()->fontDescription())
         applyInheritedOnly = false;
 
     // Now do the normal priority UA properties.
     applyMatchedProperties<LowPriorityProperties>(state, matchResult, false, matchResult.ranges.firstUARule, matchResult.ranges.lastUARule, applyInheritedOnly);
 
     // Cache the UA properties to pass them to RenderTheme in adjustRenderStyle.
     state.cacheUserAgentBorderAndBackground();
 
     // Now do the author and user normal priority properties and all the !important properties.
     applyMatchedProperties<LowPriorityProperties>(state, matchResult, false, matchResult.ranges.lastUARule + 1, matchResult.matchedProperties.size() - 1, applyInheritedOnly);
-    if (RuntimeEnabledFeatures::webAnimationsEnabled())
-        applyAnimatedProperties<LowPriorityProperties>(state, element, element->document()->timeline());
+    if (RuntimeEnabledFeatures::webAnimationsEnabled() && !applyInheritedOnly)
+        applyAnimatedProperties<LowPriorityProperties>(state, element, element->document()->timeline(), cssAnimationUpdate.get());
     applyMatchedProperties<LowPriorityProperties>(state, matchResult, true, matchResult.ranges.firstAuthorRule, matchResult.ranges.lastAuthorRule, applyInheritedOnly);
     applyMatchedProperties<LowPriorityProperties>(state, matchResult, true, matchResult.ranges.firstUserRule, matchResult.ranges.lastUserRule, applyInheritedOnly);
     applyMatchedProperties<LowPriorityProperties>(state, matchResult, true, matchResult.ranges.firstUARule, matchResult.ranges.lastUARule, applyInheritedOnly);
 
     // Start loading resources referenced by this style.
     m_styleResourceLoader.loadPendingResources(state.style(), state.elementStyleResources());
 
     ASSERT(!state.fontBuilder().fontDirty());
 
 #ifdef STYLE_STATS
@@ skipping 175 matching lines @@
         m_matchedPropertiesSearches, m_matchedPropertiesHit, m_matchedPropertiesSharedInheritedHit, m_matchedPropertiesToCache, m_matchedPropertiesEnteredIntoCache);
 
     fprintf(stderr, "Total:\n");
     printStyleStats(m_totalSearches, m_totalElementsEligibleForSharing, m_totalStylesShared, m_totalSearchFoundSiblingForSharing, m_totalSearchesMissedSharing,
         m_totalMatchedPropertiesSearches, m_totalMatchedPropertiesHit, m_totalMatchedPropertiesSharedInheritedHit, m_totalMatchedPropertiesToCache, m_totalMatchedPropertiesEnteredIntoCache);
     fprintf(stderr, "--------------------------------------------------------------------------------\n");
 }
 #endif
 
 } // namespace WebCore