Add CSS Transition support to registered custom properties

third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp

Index: third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp
diff --git a/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp b/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp
index e2eb51d4618f7b030444761207e8a611c26c9805..073d8ac7772ee47c739e2aa454d51bf1ca1bd395 100644
--- a/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp
+++ b/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp
@@ -1115,8 +1115,9 @@ bool StyleResolver::applyAnimatedStandardProperties(
   CSSAnimations::calculateCompositorAnimationUpdate(
       state.animationUpdate(), animatingElement, *element, *state.style(),
       state.parentStyle(), wasViewportResized());
-  CSSAnimations::calculateTransitionUpdate(state.animationUpdate(),
-                                           animatingElement, *state.style());
+  CSSAnimations::calculateTransitionUpdate(
+      state.animationUpdate(), CSSAnimations::PropertyPass::Standard,
+      animatingElement, *state.style());
 
   CSSAnimations::snapshotCompositorKeyframes(
       *element, state.animationUpdate(), *state.style(), state.parentStyle());
@@ -1612,7 +1613,7 @@ void StyleResolver::applyMatchedPropertiesAndCustomPropertyAnimations(
     applyMatchedAnimationProperties(state, matchResult, cacheSuccess,
                                     needsApplyPass);
   }
-  if (state.style()->animations() ||
+  if (state.style()->animations() || state.style()->transitions() ||
       (animatingElement && animatingElement->hasAnimations())) {

[suzyh_UTC10 (ex-contributor), 2017/03/10 04:08:28]

Devil's advocate: What does *not* trigger this if-statement to be executed?
Would this condition be shorter / clearer to read if it was something like "if
(!nothingMoves())"?

Especially since this is repeated below.

[alancutter (OOO until 2018), 2017/03/12 23:52:07]

We can't early exit on the negation here because there's still more work to do
after the if.
I don't think double negating it:
(!(!state.style()->animations() && !state.style()->transitions() &&
(!animatingElement || !animatingElement->hasAnimations())))
is clearer than it currently is.

     calculateAnimationUpdate(state, animatingElement);
     if (state.isAnimatingCustomProperties()) {
@@ -1704,6 +1705,9 @@ void StyleResolver::applyCustomProperties(StyleResolverState& state,
   if (applyAnimations == IncludeAnimations) {
     applyAnimatedProperties<ResolveVariables>(
         state, state.animationUpdate().activeInterpolationsForAnimations());
+    applyAnimatedProperties<ResolveVariables>(
+        state,
+        state.animationUpdate().activeInterpolationsForCustomTransitions());

[suzyh_UTC10 (ex-contributor), 2017/03/10 04:08:28]

Naming: Why ...ForCustomTransitions but ...ForAnimations above?

[alancutter (OOO until 2018), 2017/03/12 23:52:07]

CSS Transitions has separate custom/standard computation passes that use
separate interpolation storage buckets, this is not the case for CSS Animations.

   }
   // TODO(leviw): stop recalculating every time
   CSSVariableResolver::resolveVariableDefinitions(state);
@@ -1720,6 +1724,9 @@ void StyleResolver::applyCustomProperties(StyleResolverState& state,
       if (applyAnimations == IncludeAnimations) {
         applyAnimatedProperties<ResolveVariables>(
             state, state.animationUpdate().activeInterpolationsForAnimations());
+        applyAnimatedProperties<ResolveVariables>(
+            state,
+            state.animationUpdate().activeInterpolationsForCustomTransitions());
       }
       CSSVariableResolver::resolveVariableDefinitions(state);
     }
@@ -1742,18 +1749,28 @@ void StyleResolver::applyMatchedAnimationProperties(
 
 void StyleResolver::calculateAnimationUpdate(StyleResolverState& state,
                                              const Element* animatingElement) {
-  DCHECK(state.style()->animations() ||
+  DCHECK(state.style()->animations() || state.style()->transitions() ||
          (animatingElement && animatingElement->hasAnimations()));
   DCHECK(!state.isAnimationInterpolationMapReady());
 
   CSSAnimations::calculateAnimationUpdate(
       state.animationUpdate(), animatingElement, *state.element(),
       *state.style(), state.parentStyle(), this);
+  CSSAnimations::calculateTransitionUpdate(state.animationUpdate(),
+                                           CSSAnimations::PropertyPass::Custom,
+                                           animatingElement, *state.style());
 
   state.setIsAnimationInterpolationMapReady();
 
-  if (state.isAnimatingCustomProperties())
+  if (state.isAnimatingCustomProperties()) {
     return;
+  }
+  if (!state.animationUpdate()
+           .activeInterpolationsForCustomTransitions()
+           .isEmpty()) {
+    state.setIsAnimatingCustomProperties(true);
+    return;
+  }
   for (const auto& propertyHandle :
        state.animationUpdate().activeInterpolationsForAnimations().keys()) {
     if (CSSAnimations::isCustomPropertyHandle(propertyHandle)) {