Web Animations CSS: Implement CSS Transitions backed on 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 1230 matching lines @@
     const Element* element = state.element();
     const CSSAnimationUpdate* update = state.animationUpdate();
     AnimationStack* animationStack = timeline->animationStack(element);
     if (!animationStack)
         return false;
     bool didApply = false;
 
     const Vector<Animation*>& animations = animationStack->activeAnimations(element);
     for (size_t i = 0; i < animations.size(); ++i) {
         RefPtr<Animation> animation = animations.at(i);
-        if (update && update->isCancelled(animation->player()))
+        if (update && update->isCancelledAnimation(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;
             RELEASE_ASSERT_WITH_MESSAGE(!iter->value->dependsOnUnderlyingValue(), "Not yet implemented: An interface for compositing onto the underlying value.");
             RefPtr<AnimatableValue> animatableValue = iter->value->compositeOnto(0);
             if (pass == HighPriorityProperties && property == CSSPropertyLineHeight)
                 state.setLineHeightValue(toAnimatableLength(animatableValue.get())->toCSSValue().get());
@@ skipping 26 matching lines @@
                     state.setLineHeightValue(toAnimatableLength(animatableValue.get())->toCSSValue().get());
                 else
                     AnimatedStyleBuilder::applyProperty(property, state, animatableValue.get());
                 didApply = true;
             }
         }
     }
     return didApply;
 }
 
+void StyleResolver::applyTransitionedProperties(StyleResolverState& state)
+{
+    ASSERT(RuntimeEnabledFeatures::webAnimationsCSSEnabled());
+    const CSSAnimationUpdate* update = state.animationUpdate();
+    ActiveAnimations* activeAnimations = state.element()->activeAnimations();
+    const CSSAnimations* cssAnimations = activeAnimations ? activeAnimations->cssAnimations() : 0;
+
+    const AnimationEffect::CompositableValueMap& compositableValues = CSSAnimations::compositableValuesForTransitions(cssAnimations, update);
+
+    for (AnimationEffect::CompositableValueMap::const_iterator iter = compositableValues.begin(); iter != compositableValues.end(); ++iter) {
+        CSSPropertyID id = iter->key;
+        AnimatedStyleBuilder::applyProperty(iter->key, state, iter->value->compositeOnto(AnimatableValue::neutralValue()).get());
+    }
+}
+
 // http://dev.w3.org/csswg/css3-regions/#the-at-region-style-rule
 // FIXME: add incremental support for other region styling properties.
 static inline bool isValidRegionStyleProperty(CSSPropertyID id)
 {
     switch (id) {
     case CSSPropertyBackgroundColor:
     case CSSPropertyColor:
         return true;
     default:
         break;
@@ skipping 138 matching lines @@
 static unsigned computeMatchedPropertiesHash(const MatchedProperties* properties, unsigned size)
 {
     return StringHasher::hashMemory(properties, sizeof(MatchedProperties) * size);
 }
 
 void StyleResolver::invalidateMatchedPropertiesCache()
 {
     m_matchedPropertiesCache.clear();
 }
 
-void StyleResolver::calculateCSSAnimationUpdate(StyleResolverState& state)
-{
-    if (!RuntimeEnabledFeatures::webAnimationsCSSEnabled())
-        return;
-
-    Element* element = state.element();
-    ASSERT(element);
-
-    if (!CSSAnimations::needsUpdate(element, state.style()))
-        return;
-
-    ActiveAnimations* activeAnimations = element->activeAnimations();
-    const CSSAnimationDataList* animations = state.style()->animations();
-    const CSSAnimations* cssAnimations = activeAnimations ? activeAnimations->cssAnimations() : 0;
-    state.setAnimationUpdate(CSSAnimations::calculateUpdate(element, state.style(), 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 24 matching lines @@
     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);
 
+    // Match transition-property / animation-name length by trimming and
+    // lengthening other transition / animation property lists
+    // FIXME: This is wrong because we shouldn't affect the computed values
+    state.style()->adjustAnimations();

[dstockwell, 2013/10/08 21:02:59]

should be guarded by if enable web-animations-css

[Timothy Loh, 2013/10/09 01:33:07]

same as above; moving this should be fine for the old impl too.

+    state.style()->adjustTransitions();
+
     // 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);
     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);
 
@@ skipping 19 matching lines @@
     // 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);
     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);
 
     if (RuntimeEnabledFeatures::webAnimationsEnabled() && !applyInheritedOnly) {
-        calculateCSSAnimationUpdate(state);
+        state.setAnimationUpdate(CSSAnimations::calculateUpdate(state.element(), state.style(), this));
         // Apply animated properties, then reapply any rules marked important.
         if (applyAnimatedProperties<HighPriorityProperties>(state, element->document().timeline())) {
             bool important = true;
             applyMatchedProperties<HighPriorityProperties>(state, matchResult, important, matchResult.ranges.firstAuthorRule, matchResult.ranges.lastAuthorRule, applyInheritedOnly);
             applyMatchedProperties<HighPriorityProperties>(state, matchResult, important, matchResult.ranges.firstUserRule, matchResult.ranges.lastUserRule, applyInheritedOnly);
             applyMatchedProperties<HighPriorityProperties>(state, matchResult, important, matchResult.ranges.firstUARule, matchResult.ranges.lastUARule, applyInheritedOnly);
         }
         if (applyAnimatedProperties<LowPriorityProperties>(state, element->document().timeline())) {
             bool important = true;
             applyMatchedProperties<LowPriorityProperties>(state, matchResult, important, matchResult.ranges.firstAuthorRule, matchResult.ranges.lastAuthorRule, applyInheritedOnly);
             applyMatchedProperties<LowPriorityProperties>(state, matchResult, important, matchResult.ranges.firstUserRule, matchResult.ranges.lastUserRule, applyInheritedOnly);
             applyMatchedProperties<LowPriorityProperties>(state, matchResult, important, matchResult.ranges.firstUARule, matchResult.ranges.lastUARule, applyInheritedOnly);
         }
+
+        applyTransitionedProperties(state);
     }
 
     // Start loading resources referenced by this style.
     m_styleResourceLoader.loadPendingResources(state.style(), state.elementStyleResources());
 
     ASSERT(!state.fontBuilder().fontDirty());
 
 #ifdef STYLE_STATS
     if (!cachedMatchedProperties)
         STYLE_STATS_ADD_MATCHED_PROPERTIES_TO_CACHE();
@@ skipping 75 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