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 60 matching lines @@
     if (stack.isEmpty())
         return 0;
 
     for (size_t i = 0; i < stack.size(); ++i) {
         if (const StyleRuleKeyframes* keyframesRule = stack.at(i)->keyframeStylesForAnimation(animationName))
             return keyframesRule;
     }
     return 0;
 }
 
+void StyleResolver::keyframeStylesForAnimation(Element* element, const StringImpl* name, KeyframeAnimationEffect::KeyframeVector& keyframes)

[dglazkov, 2013/07/29 18:15:39]

Not for this patch, but just curious: does this have to live on StyleResolver?
Could the logic that builds keyframes (and I am assuming later interpolates
styles between them) live in a separate class?

[dstockwell, 2013/07/30 01:12:48]

I think most of the logic can move out and I can work on that later. We'll just
need matchScopedKeyframesRule.

+{
+    ASSERT(RuntimeEnabledFeatures::webAnimationsCSSEnabled());
+
+    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]);
+            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)
+}
+
 void StyleResolver::keyframeStylesForAnimation(Element* e, const RenderStyle* elementStyle, KeyframeList& list)
 {
     list.clear();
 
     // Get the keyframesRule for this name
     if (!e || list.animationName().isEmpty())
         return;
 
     const StyleRuleKeyframes* keyframesRule = matchScopedKeyframesRule(e, list.animationName().impl());
     if (!keyframesRule)
@@ skipping 467 matching lines @@
     return StringHasher::hashMemory(properties, sizeof(MatchedProperties) * size);
 }
 
 void StyleResolver::invalidateMatchedPropertiesCache()
 {
     m_matchedPropertiesCache.clear();
 }
 
 void StyleResolver::applyMatchedProperties(StyleResolverState& state, const MatchResult& matchResult)
 {
-    const Element* element = state.element();
+    Element* element = state.element();

[dglazkov, 2013/07/29 18:15:39]

Whoops. This seems wrong. We _just_ did a pass at trying to make Element
unaffected while resolving its style, and now we're mutating the element again?

[dstockwell, 2013/07/30 01:12:48]

The only mutation here is the call to ensureActiveAnimations. Perhaps making
that method const, or a cast on #1274 would be more palatable? 

     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;
 
     if (cacheHash && (cachedMatchedProperties = m_matchedPropertiesCache.find(cacheHash, state, matchResult))
         && MatchedPropertiesCache::isCacheable(element, state.style(), state.parentStyle())) {
         STYLE_STATS_ADD_MATCHED_PROPERTIES_HIT();
@@ skipping 20 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
+
+    if (RuntimeEnabledFeatures::webAnimationsCSSEnabled()) {
+        const CSSAnimationDataList* animations = state.style()->animations();
+        EDisplay display = state.style()->display();
+        if ((display != NONE && animations && animations->size()) || element->hasActiveAnimations()) {
+            element->ensureActiveAnimations()->cssAnimations()->update(element, display, this, animations);

[dglazkov, 2013/07/29 18:15:39]

Curious: why does a DOM element hold information about animations? Doesn't this
belong in style-land somewhere?

[dstockwell, 2013/07/30 01:12:48]

I was going to store it in animation-land in a Map, but Elliott had concerns
(see https://codereview.chromium.org/19266007/)

For lifetime reasons Element seems like the next best place. CSS Animations are
started during style resolution, but end based on time, or element
detach/destruction.

In the current animation system this state lives in a Map from RenderObject, but
that fails to handle reattachment correctly.

ActiveAnimations currently only stores animations that are applied to the
RenderStyle, however it's likely that we will use it to store other DOM related
animation data (see
http://dev.w3.org/fxtf/web-animations/#extensions-to-the-element-interface).

Note also that in Web Animations, animations created by script (not CSS
Animations) will progress/fire events regardless of whether they have any effect
on the style of the element or even when the element is display:none (see
http://dev.w3.org/fxtf/web-animations/#timing-events). Animations or rather
Timed Items are not simply part of the style system.

[dglazkov, 2013/07/30 22:07:27]

I just spoke with shans@ about this, and I think we can fix this quite easily.
Let's break this into two phases:

1) constructing a new animation
2) adding this animation to element->activeAnimations.

If we do the first one at the applyProperties time, then queue it up, then pour
the queue into element->activeAnimations.

Queue would be stored on StyleResolverState

This would allow us to:
1) retain Element constness in applyProperties
2) clearly inform style machinery about effects of property application (a
similar thing happens for images, for example).
3) provide a path for future refactorings that may include multiple threads,
etc.

WDYT?

+        }
+    }
 
     // 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());
@@ skipping 215 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