Apply custom property animations

third_party/WebKit/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/)
@@ skipping 619 matching lines @@
                                         Element* element) {
   StyleAdjuster::adjustComputedStyle(state.mutableStyleRef(),
                                      *state.parentStyle(), element);
 }
 
 // Start loading resources referenced by this style.
 void StyleResolver::loadPendingResources(StyleResolverState& state) {
   state.elementStyleResources().loadPendingResources(state.style());
 }
 
+static const ComputedStyle* calculateBaseComputedStyle(
+    StyleResolverState& state,
+    const Element* animatingElement) {
+  if (!animatingElement)
+    return nullptr;
+
+  ElementAnimations* elementAnimations = animatingElement->elementAnimations();
+  if (!elementAnimations)
+    return nullptr;
+
+  if (CSSAnimations::isAnimatingCustomProperties(elementAnimations)) {
+    state.setIsAnimatingCustomProperties(true);
+    // TODO(alancutter): Use the base computed style optimisation in the
+    // presence of custom property animations that don't affect pre-animated
+    // computed values.
+    return nullptr;
+  }
+
+  return elementAnimations->baseComputedStyle();
+}
+
+static void updateBaseComputedStyle(StyleResolverState& state,
+                                    Element* animatingElement) {
+  if (!animatingElement || state.isAnimatingCustomProperties())
+    return;
+
+  ElementAnimations* elementAnimations = animatingElement->elementAnimations();
+  if (elementAnimations)
+    elementAnimations->updateBaseComputedStyle(state.style());
+}
+
 PassRefPtr<ComputedStyle> StyleResolver::styleForElement(
     Element* element,
     const ComputedStyle* defaultParent,
     StyleSharingBehavior sharingBehavior,
     RuleMatchingBehavior matchingBehavior) {
   DCHECK(document().frame());
   DCHECK(document().settings());
   DCHECK(!hasPendingAuthorStyleSheets());
 
   // Once an element has a layoutObject, we don't try to destroy it, since
@@ skipping 22 matching lines @@
   if (RuntimeEnabledFeatures::styleSharingEnabled() &&
       sharingBehavior == AllowStyleSharing &&
       (defaultParent || elementContext.parentStyle())) {
     if (RefPtr<ComputedStyle> sharedStyle =
             document().styleEngine().findSharedStyle(elementContext))
       return sharedStyle.release();
   }
 
   StyleResolverState state(document(), elementContext, defaultParent);
 
-  ElementAnimations* elementAnimations = element->elementAnimations();
   const ComputedStyle* baseComputedStyle =
-      elementAnimations ? elementAnimations->baseComputedStyle() : nullptr;
+      calculateBaseComputedStyle(state, element);
 
   if (baseComputedStyle) {
     state.setStyle(ComputedStyle::clone(*baseComputedStyle));
     if (!state.parentStyle())
       state.setParentStyle(initialStyleForElement());
   } else {
     if (state.parentStyle()) {
       RefPtr<ComputedStyle> style = ComputedStyle::create();
       style->inheritFrom(*state.parentStyle(),
                          isAtShadowBoundary(element)
@@ skipping 62 matching lines @@
       // NOTE: this must occur before applyMatchedProperties for correct
       // computation of font-relative lengths.
       state.style()->setTextAutosizingMultiplier(
           element->computedStyle()->textAutosizingMultiplier());
       state.style()->setUnique();
     }
 
     if (state.hasDirAutoAttribute())
       state.style()->setSelfOrAncestorHasDirAutoAttribute(true);
 
-    applyMatchedProperties(state, collector.matchedResult());
+    applyMatchedPropertiesAndCustomPropertyAnimations(
+        state, collector.matchedResult(), element);
     applyCallbackSelectors(state);
 
     // Cache our original display.
     state.style()->setOriginalDisplay(state.style()->display());
 
     adjustComputedStyle(state, element);
 
-    if (elementAnimations)
-      elementAnimations->updateBaseComputedStyle(state.style());
+    updateBaseComputedStyle(state, element);
   } else {
     INCREMENT_STYLE_STATS_COUNTER(document().styleEngine(), baseStylesUsed, 1);
   }
 
   // FIXME: The CSSWG wants to specify that the effects of animations are
   // applied before important rules, but this currently happens here as we
   // require adjustment to have happened before deciding which properties to
   // transition.
-  if (applyAnimatedProperties(state, element)) {
+  if (applyAnimatedStandardProperties(state, element)) {
     INCREMENT_STYLE_STATS_COUNTER(document().styleEngine(), stylesAnimated, 1);
     adjustComputedStyle(state, element);
   }
 
   if (isHTMLBodyElement(*element))
     document().textLinkColors().setTextColor(state.style()->color());
 
   setAnimationUpdateIfNeeded(state, *element);
 
   if (state.style()->hasViewportUnits())
@@ skipping 89 matching lines @@
     StyleResolverState& state) {
   DCHECK(document().frame());
   DCHECK(document().settings());
   DCHECK(pseudoStyleRequest.pseudoId != PseudoIdFirstLineInherited);
   DCHECK(state.parentStyle());
 
   SelectorFilterParentScope::ensureParentStackIsPushed();
 
   Element* pseudoElement = element.pseudoElement(pseudoStyleRequest.pseudoId);
 
-  ElementAnimations* elementAnimations =
-      pseudoElement ? pseudoElement->elementAnimations() : nullptr;
   const ComputedStyle* baseComputedStyle =
-      elementAnimations ? elementAnimations->baseComputedStyle() : nullptr;
+      calculateBaseComputedStyle(state, pseudoElement);
 
   if (baseComputedStyle) {
     state.setStyle(ComputedStyle::clone(*baseComputedStyle));
   } else if (pseudoStyleRequest.allowsInheritance(state.parentStyle())) {
     RefPtr<ComputedStyle> style = ComputedStyle::create();
     style->inheritFrom(*state.parentStyle());
     state.setStyle(style.release());
   } else {
     state.setStyle(initialStyleForElement());
     state.setParentStyle(ComputedStyle::clone(*state.style()));
@@ skipping 13 matching lines @@
     matchUARules(collector);
     matchAuthorRules(*state.element(), collector);
     collector.finishAddingAuthorRulesForTreeScope();
 
     if (m_tracker)
       addMatchedRulesToTracker(collector);
 
     if (!collector.matchedResult().hasMatchedProperties())
       return false;
 
-    applyMatchedProperties(state, collector.matchedResult());
+    applyMatchedPropertiesAndCustomPropertyAnimations(
+        state, collector.matchedResult(), pseudoElement);
     applyCallbackSelectors(state);
 
     // Cache our original display.
     state.style()->setOriginalDisplay(state.style()->display());
 
     // FIXME: Passing 0 as the Element* introduces a lot of complexity
     // in the adjustComputedStyle code.
     adjustComputedStyle(state, 0);
 
-    if (elementAnimations)
-      elementAnimations->updateBaseComputedStyle(state.style());
+    updateBaseComputedStyle(state, pseudoElement);
   }
 
   // FIXME: The CSSWG wants to specify that the effects of animations are
   // applied before important rules, but this currently happens here as we
   // require adjustment to have happened before deciding which properties to
   // transition.
-  if (applyAnimatedProperties(state, pseudoElement))
+  if (applyAnimatedStandardProperties(state, pseudoElement))
     adjustComputedStyle(state, 0);
 
   document().styleEngine().incStyleForElementCount();
   INCREMENT_STYLE_STATS_COUNTER(document().styleEngine(), pseudoElementsStyled,
                                 1);
 
   if (state.style()->hasViewportUnits())
     document().setHasViewportUnits();
 
   return true;
@@ skipping 137 matching lines @@
   if (rulesToInclude & UAAndUserCSSRules)
     matchUARules(collector);
 
   if (rulesToInclude & AuthorCSSRules) {
     collector.setSameOriginOnly(!(rulesToInclude & CrossOriginCSSRules));
     collector.setIncludeEmptyRules(rulesToInclude & EmptyCSSRules);
     matchAuthorRules(element, collector);
   }
 }
 
-bool StyleResolver::applyAnimatedProperties(StyleResolverState& state,
-                                            const Element* animatingElement) {
+bool StyleResolver::applyAnimatedStandardProperties(
+    StyleResolverState& state,
+    const Element* animatingElement) {
   Element* element = state.element();
   DCHECK(element);
 
   // The animating element may be this element, or its pseudo element. It is
   // null when calculating the style for a potential pseudo element that has
   // yet to be created.
   DCHECK(animatingElement == element || !animatingElement ||
          animatingElement->parentOrShadowHostElement() == element);
 
-  if (!(animatingElement && animatingElement->hasAnimations()) &&
-      !state.style()->transitions() && !state.style()->animations())
+  if (state.style()->animations() ||
+      (animatingElement && animatingElement->hasAnimations())) {
+    if (!state.isAnimationInterpolationMapReady())
+      calculateAnimationUpdate(state, animatingElement);
+  } else if (!state.style()->transitions()) {
     return false;
+  }
 
-  CSSAnimations::calculateUpdate(animatingElement, *element, *state.style(),
-                                 state.parentStyle(), state.animationUpdate(),
-                                 this);
+  CSSAnimations::calculateCompositorAndTransitionUpdate(
+      animatingElement, *element, *state.style(), state.parentStyle(),
+      state.animationUpdate());
 
   CSSAnimations::snapshotCompositorKeyframes(
       *element, state.animationUpdate(), *state.style(), state.parentStyle());
 
   if (state.animationUpdate().isEmpty())
     return false;
 
   if (state.style()->insideLink() != NotInsideLink) {
     DCHECK(state.applyPropertyToRegularStyle());
     state.setApplyPropertyToVisitedLinkStyle(true);
@@ skipping 447 matching lines @@
 }
 
 void StyleResolver::invalidateMatchedPropertiesCache() {
   m_matchedPropertiesCache.clear();
 }
 
 void StyleResolver::notifyResizeForViewportUnits() {
   m_matchedPropertiesCache.clearViewportDependent();
 }
 
-void StyleResolver::applyMatchedProperties(StyleResolverState& state,
-                                           const MatchResult& matchResult) {
+void StyleResolver::applyMatchedPropertiesAndCustomPropertyAnimations(
+    StyleResolverState& state,
+    const MatchResult& matchResult,
+    const Element* animatingElement) {
+  CacheSuccess cacheSuccess = applyMatchedCache(state, matchResult);
+  NeedsApplyPass needsApplyPass;
+  if (!cacheSuccess.isFullCacheHit()) {
+    applyCustomProperties(state, matchResult, false, cacheSuccess,
+                          needsApplyPass);
+    applyMatchedAnimationProperties(state, matchResult, cacheSuccess,
+                                    needsApplyPass);
+  }
+  if (state.style()->animations() ||
+      (animatingElement && animatingElement->hasAnimations())) {
+    calculateAnimationUpdate(state, animatingElement);
+    if (state.isAnimatingCustomProperties()) {
+      cacheSuccess.setFailed();
+      applyCustomProperties(state, matchResult, true, cacheSuccess,
+                            needsApplyPass);
+    }
+  }
+  if (!cacheSuccess.isFullCacheHit()) {
+    applyMatchedStandardProperties(state, matchResult, cacheSuccess,
+                                   needsApplyPass);
+  }
+}
+
+StyleResolver::CacheSuccess StyleResolver::applyMatchedCache(
+    StyleResolverState& state,
+    const MatchResult& matchResult) {
   const Element* element = state.element();
   DCHECK(element);
 
-  INCREMENT_STYLE_STATS_COUNTER(document().styleEngine(), matchedPropertyApply,
-                                1);
-
   unsigned cacheHash =
       matchResult.isCacheable()
           ? computeMatchedPropertiesHash(matchResult.matchedProperties().data(),
                                          matchResult.matchedProperties().size())
           : 0;
-  bool applyInheritedOnly = false;
+  bool isInheritedCacheHit = false;
+  bool isNonInheritedCacheHit = false;
   const CachedMatchedProperties* cachedMatchedProperties =
       cacheHash
           ? m_matchedPropertiesCache.find(cacheHash, state,
                                           matchResult.matchedProperties())
           : nullptr;
 
   if (cachedMatchedProperties && MatchedPropertiesCache::isCacheable(state)) {
     INCREMENT_STYLE_STATS_COUNTER(document().styleEngine(),
                                   matchedPropertyCacheHit, 1);
     // We can build up the style by copying non-inherited properties from an
@@ skipping 15 matching lines @@
       // If the cache item parent style has identical inherited properties to
       // the current parent style then the resulting style will be identical
       // too. We copy the inherited properties over from the cache and are done.
       state.style()->inheritFrom(*cachedMatchedProperties->computedStyle);
 
       // Unfortunately the link status is treated like an inherited property. We
       // need to explicitly restore it.
       state.style()->setInsideLink(linkStatus);
 
       updateFont(state);
+      isInheritedCacheHit = true;
+    }
 
-      return;
-    }
-    applyInheritedOnly = true;
+    isNonInheritedCacheHit = true;
   }
 
-  NeedsApplyPass needsApplyPass;
+  return CacheSuccess(isInheritedCacheHit, isNonInheritedCacheHit, cacheHash,
+                      cachedMatchedProperties);
+}
 
-  // TODO(leviw): We need the proper bit for tracking whether we need to do this
-  // work.
+void StyleResolver::applyCustomProperties(StyleResolverState& state,
+                                          const MatchResult& matchResult,
+                                          bool applyAnimations,
+                                          const CacheSuccess& cacheSuccess,
+                                          NeedsApplyPass& needsApplyPass) {
+  DCHECK(!cacheSuccess.isFullCacheHit());
+  bool applyInheritedOnly = cacheSuccess.shouldApplyInheritedOnly();
+
+  // TODO(leviw): We need the proper bit for tracking whether we need to do
+  // this work.
   applyMatchedProperties<ResolveVariables, UpdateNeedsApplyPass>(
       state, matchResult.authorRules(), false, applyInheritedOnly,
       needsApplyPass);
   applyMatchedProperties<ResolveVariables, CheckNeedsApplyPass>(
       state, matchResult.authorRules(), true, applyInheritedOnly,
       needsApplyPass);
+  if (applyAnimations) {
+    applyAnimatedProperties<ResolveVariables>(
+        state, state.animationUpdate().activeInterpolationsForAnimations());
+  }
   // TODO(leviw): stop recalculating every time
   CSSVariableResolver::resolveVariableDefinitions(state);
 
   if (RuntimeEnabledFeatures::cssApplyAtRulesEnabled()) {
     if (cacheCustomPropertiesForApplyAtRules(state,
                                              matchResult.authorRules())) {
       applyMatchedProperties<ResolveVariables, UpdateNeedsApplyPass>(
           state, matchResult.authorRules(), false, applyInheritedOnly,
           needsApplyPass);
       applyMatchedProperties<ResolveVariables, CheckNeedsApplyPass>(
           state, matchResult.authorRules(), true, applyInheritedOnly,
           needsApplyPass);
+      if (applyAnimations) {
+        applyAnimatedProperties<ResolveVariables>(
+            state, state.animationUpdate().activeInterpolationsForAnimations());
+      }
       CSSVariableResolver::resolveVariableDefinitions(state);
     }
   }
+}
 
-  // Apply animation affecting properties.
+void StyleResolver::applyMatchedAnimationProperties(
+    StyleResolverState& state,
+    const MatchResult& matchResult,
+    const CacheSuccess& cacheSuccess,
+    NeedsApplyPass& needsApplyPass) {
+  DCHECK(!cacheSuccess.isFullCacheHit());
+  bool applyInheritedOnly = cacheSuccess.shouldApplyInheritedOnly();
+
   applyMatchedProperties<AnimationPropertyPriority, UpdateNeedsApplyPass>(
       state, matchResult.allRules(), false, applyInheritedOnly, needsApplyPass);
   applyMatchedProperties<AnimationPropertyPriority, CheckNeedsApplyPass>(
       state, matchResult.allRules(), true, applyInheritedOnly, needsApplyPass);
+}
+
+void StyleResolver::calculateAnimationUpdate(StyleResolverState& state,
+                                             const Element* animatingElement) {
+  DCHECK(state.style()->animations() ||
+         (animatingElement && animatingElement->hasAnimations()));
+  DCHECK(!state.isAnimationInterpolationMapReady());
+
+  CSSAnimations::calculateAnimationUpdate(
+      state.animationUpdate(), animatingElement, *state.element(),
+      *state.style(), state.parentStyle(), this);
+
+  state.setIsAnimationInterpolationMapReady();
+
+  if (state.isAnimatingCustomProperties())
+    return;
+  for (const auto& propertyHandle :
+       state.animationUpdate().activeInterpolationsForAnimations().keys()) {
+    if (CSSAnimations::isCustomPropertyHandle(propertyHandle)) {
+      state.setIsAnimatingCustomProperties(true);
+      return;
+    }
+  }
+}
+
+void StyleResolver::applyMatchedStandardProperties(
+    StyleResolverState& state,
+    const MatchResult& matchResult,
+    const CacheSuccess& cacheSuccess,
+    NeedsApplyPass& needsApplyPass) {
+  INCREMENT_STYLE_STATS_COUNTER(document().styleEngine(), matchedPropertyApply,
+                                1);
+
+  DCHECK(!cacheSuccess.isFullCacheHit());
+  bool applyInheritedOnly = cacheSuccess.shouldApplyInheritedOnly();
 
   // 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.
   applyMatchedProperties<HighPropertyPriority, CheckNeedsApplyPass>(
       state, matchResult.allRules(), false, applyInheritedOnly, needsApplyPass);
   for (auto range : ImportantAuthorRanges(matchResult)) {
     applyMatchedProperties<HighPropertyPriority, CheckNeedsApplyPass>(
         state, range, true, applyInheritedOnly, needsApplyPass);
   }
   applyMatchedProperties<HighPropertyPriority, CheckNeedsApplyPass>(
       state, matchResult.uaRules(), true, applyInheritedOnly, needsApplyPass);
 
-  if (UNLIKELY(isSVGForeignObjectElement(element))) {
+  if (UNLIKELY(isSVGForeignObjectElement(state.element()))) {
     // LayoutSVGRoot handles zooming for the whole SVG subtree, so foreignObject
     // content should not be scaled again.
     //
     // FIXME: The following hijacks the zoom property for foreignObject so that
     // children of foreignObject get the correct font-size in case of zooming.
     // 'zoom' has HighPropertyPriority, along with other font-related properties
     // used as input to the FontBuilder, so resetting it here may cause the
     // FontBuilder to recompute the font used as inheritable font for
     // foreignObject content. If we want to support zoom on foreignObject we'll
     // need to find another way of handling the SVG zoom model.
     state.setEffectiveZoom(ComputedStyle::initialZoom());
   }
 
-  if (cachedMatchedProperties &&
-      cachedMatchedProperties->computedStyle->effectiveZoom() !=
+  if (cacheSuccess.cachedMatchedProperties &&
+      cacheSuccess.cachedMatchedProperties->computedStyle->effectiveZoom() !=
           state.style()->effectiveZoom()) {
     state.fontBuilder().didChangeEffectiveZoom();
     applyInheritedOnly = false;
   }
 
   // If our font got dirtied, go ahead and update it now.
   updateFont(state);
 
   // Many properties depend on the font. If it changes we just apply all
   // properties.
-  if (cachedMatchedProperties &&
-      cachedMatchedProperties->computedStyle->getFontDescription() !=
-          state.style()->getFontDescription())
+  if (cacheSuccess.cachedMatchedProperties &&
+      cacheSuccess.cachedMatchedProperties->computedStyle
+              ->getFontDescription() != state.style()->getFontDescription())
     applyInheritedOnly = false;
 
   // Registered custom properties are computed after high priority properties.
   CSSVariableResolver::computeRegisteredVariables(state);
 
   // Now do the normal priority UA properties.
   applyMatchedProperties<LowPropertyPriority, CheckNeedsApplyPass>(
       state, matchResult.uaRules(), false, applyInheritedOnly, needsApplyPass);
 
   // Cache the UA properties to pass them to LayoutTheme in adjustComputedStyle.
@@ skipping 16 matching lines @@
     // ones.  When there is a partial match in the MatchedPropertiesCache, these
     // flags will already be set correctly and the value stored in
     // cacheUserAgentBorderAndBackground is incorrect, so doing this check again
     // would give the wrong answer.
     state.style()->setHasAuthorBackground(hasAuthorBackground(state));
     state.style()->setHasAuthorBorder(hasAuthorBorder(state));
   }
 
   loadPendingResources(state);
 
-  if (!cachedMatchedProperties && cacheHash &&
+  if (!state.isAnimatingCustomProperties() &&
+      !cacheSuccess.cachedMatchedProperties && cacheSuccess.cacheHash &&
       MatchedPropertiesCache::isCacheable(state)) {
     INCREMENT_STYLE_STATS_COUNTER(document().styleEngine(),
                                   matchedPropertyCacheAdded, 1);
     m_matchedPropertiesCache.add(*state.style(), *state.parentStyle(),
-                                 cacheHash, matchResult.matchedProperties());
+                                 cacheSuccess.cacheHash,
+                                 matchResult.matchedProperties());
   }
 
   DCHECK(!state.fontBuilder().fontDirty());
 }
 
 bool StyleResolver::hasAuthorBackground(const StyleResolverState& state) {
   const CachedUAStyle* cachedUAStyle = state.cachedUAStyle();
   if (!cachedUAStyle)
     return false;
 
@@ skipping 70 matching lines @@
 DEFINE_TRACE(StyleResolver) {
   visitor->trace(m_matchedPropertiesCache);
   visitor->trace(m_selectorFilter);
   visitor->trace(m_styleSharingLists);
   visitor->trace(m_pendingStyleSheets);
   visitor->trace(m_document);
   visitor->trace(m_tracker);
 }
 
 }  // namespace blink