Support interpolation of animatable shorthand properties containing var()

This change adds support for handling pending substitution values to CSS
animations to allow for smooth interpolation between shorthand values
with var() references in them.

BUG=647123

Review-Url: https://codereview.chromium.org/2340893003
Cr-Commit-Position: refs/heads/master@{#419096}

third_party/WebKit/LayoutTests/animations/animate-shorthand-var.html

+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+<style>
+body {
+  --x: green;
+  --y: lime;
+}
+@keyframes test {
+  from { background: var(--x); }
+  to { background: var(--y); }
+}
+#cssAnimations {
+  animation: test 1s -0.5s linear paused;
+}
+</style>
+<div id="cssAnimations"></div>
+<div id="webAnimations"></div>
+<script>
+test(() => {
+  assert_equals(getComputedStyle(cssAnimations).backgroundColor, 'rgb(0, 192, 0)');
+}, 'CSS Animations should interpolate shorthand properties with variable references in them.');
+
+test(() => {
+  var animation = webAnimations.animate({background: ['var(--x)', 'var(--y)']}, 1);
+  animation.currentTime = 0.5;
+  assert_equals(getComputedStyle(webAnimations).backgroundColor, 'rgb(0, 192, 0)');
+}, 'Web Animations should interpolate shorthand properties with variable references in them.');
+</script>

third_party/WebKit/Source/core/animation/CSSInterpolationType.cpp

@@ -17,13 +17,13 @@ namespace blink {
 
 class ResolvedVariableChecker : public InterpolationType::ConversionChecker {
 public:
-    static std::unique_ptr<ResolvedVariableChecker> create(CSSPropertyID property, const CSSVariableReferenceValue* variableReference, const CSSValue* resolvedValue)
+    static std::unique_ptr<ResolvedVariableChecker> create(CSSPropertyID property, const CSSValue* variableReference, const CSSValue* resolvedValue)
     {
         return wrapUnique(new ResolvedVariableChecker(property, variableReference, resolvedValue));
     }
 
 private:
-    ResolvedVariableChecker(CSSPropertyID property, const CSSVariableReferenceValue* variableReference, const CSSValue* resolvedValue)
+    ResolvedVariableChecker(CSSPropertyID property, const CSSValue* variableReference, const CSSValue* resolvedValue)
         : m_property(property)
         , m_variableReference(variableReference)
         , m_resolvedValue(resolvedValue)
@@ -37,10 +37,16 @@ private:
     }
 
     CSSPropertyID m_property;
-    Persistent<const CSSVariableReferenceValue> m_variableReference;
+    Persistent<const CSSValue> m_variableReference;
     Persistent<const CSSValue> m_resolvedValue;
 };
 
+CSSInterpolationType::CSSInterpolationType(CSSPropertyID property)
+    : InterpolationType(PropertyHandle(property))
+{
+    DCHECK(!isShorthandProperty(cssProperty()));
+}
+
 InterpolationValue CSSInterpolationType::maybeConvertSingle(const PropertySpecificKeyframe& keyframe, const InterpolationEnvironment& environment, const InterpolationValue& underlying, ConversionCheckers& conversionCheckers) const
 {
     const CSSValue* resolvedCSSValueOwner;
@@ -49,13 +55,9 @@ InterpolationValue CSSInterpolationType::maybeConvertSingle(const PropertySpecif
     if (!value)
         return maybeConvertNeutral(underlying, conversionCheckers);
 
-    // TODO(alancutter): Support animation of var() in shorthand properties.
-    if (value->isPendingSubstitutionValue())
-        return nullptr;
-
-    if (value->isVariableReferenceValue() && !isShorthandProperty(cssProperty())) {
-        resolvedCSSValueOwner = CSSVariableResolver::resolveVariableReferences(environment.state(), cssProperty(), toCSSVariableReferenceValue(*value));
-        conversionCheckers.append(ResolvedVariableChecker::create(cssProperty(), toCSSVariableReferenceValue(value), resolvedCSSValueOwner));
+    if (value->isVariableReferenceValue() || value->isPendingSubstitutionValue()) {
+        resolvedCSSValueOwner = CSSVariableResolver::resolveVariableReferences(environment.state(), cssProperty(), *value);
+        conversionCheckers.append(ResolvedVariableChecker::create(cssProperty(), value, resolvedCSSValueOwner));
         value = resolvedCSSValueOwner;
     }
 

third_party/WebKit/Source/core/animation/CSSInterpolationType.h

@@ -7,15 +7,12 @@
 
 #include "core/animation/InterpolationEnvironment.h"
 #include "core/animation/InterpolationType.h"
-#include "core/css/CSSPropertyMetadata.h"
 
 namespace blink {
 
 class CSSInterpolationType : public InterpolationType {
 protected:
-    CSSInterpolationType(CSSPropertyID property)
-        : InterpolationType(PropertyHandle(property))
-    { }
+    CSSInterpolationType(CSSPropertyID);
 
     CSSPropertyID cssProperty() const { return getProperty().cssProperty(); }
 

third_party/WebKit/Source/core/animation/PropertyInterpolationTypesMapping.cpp

@@ -48,6 +48,7 @@
 #include "core/animation/SVGRectInterpolationType.h"
 #include "core/animation/SVGTransformListInterpolationType.h"
 #include "core/animation/SVGValueInterpolationType.h"
+#include "core/css/CSSPropertyMetadata.h"
 #include "wtf/PtrUtil.h"
 #include <memory>
 

third_party/WebKit/Source/core/animation/StringKeyframe.cpp

@@ -55,8 +55,7 @@ PropertyHandleSet StringKeyframe::properties() const
     PropertyHandleSet properties;
     for (unsigned i = 0; i < m_cssPropertyMap->propertyCount(); ++i) {
         StylePropertySet::PropertyReference propertyReference = m_cssPropertyMap->propertyAt(i);
-        DCHECK(
-            !isShorthandProperty(propertyReference.id()) || propertyReference.value().isVariableReferenceValue())
+        DCHECK(!isShorthandProperty(propertyReference.id()))
             << "Web Animations: Encountered unexpanded shorthand CSS property (" << propertyReference.id() << ").";
         properties.add(PropertyHandle(propertyReference.id(), false));
     }

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

@@ -153,10 +153,22 @@ bool CSSVariableResolver::resolveTokenRange(CSSParserTokenRange range,
     return success;
 }
 
-const CSSValue* CSSVariableResolver::resolveVariableReferences(const StyleResolverState& state, CSSPropertyID id, const CSSVariableReferenceValue& value)
+const CSSValue* CSSVariableResolver::resolveVariableReferences(const StyleResolverState& state, CSSPropertyID id, const CSSValue& value)
 {
     ASSERT(!isShorthandProperty(id));
 
+    if (value.isPendingSubstitutionValue())
+        return resolvePendingSubstitutions(state, id, toCSSPendingSubstitutionValue(value));
+
+    if (value.isVariableReferenceValue())
+        return resolveVariableReferences(state, id, toCSSVariableReferenceValue(value));
+
+    NOTREACHED();
+    return nullptr;
+}
+
+const CSSValue* CSSVariableResolver::resolveVariableReferences(const StyleResolverState& state, CSSPropertyID id, const CSSVariableReferenceValue& value)
+{
     CSSVariableResolver resolver(state);
     Vector<CSSParserToken> tokens;
     if (!resolver.resolveTokenRange(value.variableDataValue()->tokens(), tokens))
@@ -167,10 +179,10 @@ const CSSValue* CSSVariableResolver::resolveVariableReferences(const StyleResolv
     return result;
 }
 
-const CSSValue* CSSVariableResolver::resolvePendingSubstitutions(StyleResolverState& state, CSSPropertyID id, const CSSPendingSubstitutionValue& pendingValue)
+const CSSValue* CSSVariableResolver::resolvePendingSubstitutions(const StyleResolverState& state, CSSPropertyID id, const CSSPendingSubstitutionValue& pendingValue)
 {
     // Longhands from shorthand references follow this path.
-    HeapHashMap<CSSPropertyID, Member<const CSSValue>>& propertyCache = state.parsedPropertiesForPendingSubstitution(pendingValue);
+    HeapHashMap<CSSPropertyID, Member<const CSSValue>>& propertyCache = state.parsedPropertiesForPendingSubstitutionCache(pendingValue);
 
     const CSSValue* value = propertyCache.get(id);
     if (!value) {

third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.h

@@ -25,16 +25,18 @@ class CSSVariableResolver {
     STACK_ALLOCATED();
 public:
     static void resolveVariableDefinitions(const StyleResolverState&);
-    static const CSSValue* resolvePendingSubstitutions(StyleResolverState&, CSSPropertyID, const CSSPendingSubstitutionValue&);
 
     // Shorthand properties are not supported.
-    static const CSSValue* resolveVariableReferences(const StyleResolverState&, CSSPropertyID, const CSSVariableReferenceValue&);
+    static const CSSValue* resolveVariableReferences(const StyleResolverState&, CSSPropertyID, const CSSValue&);
 
     DECLARE_TRACE();
 
 private:
     CSSVariableResolver(const StyleResolverState&);
 
+    static const CSSValue* resolvePendingSubstitutions(const StyleResolverState&, CSSPropertyID, const CSSPendingSubstitutionValue&);
+    static const CSSValue* resolveVariableReferences(const StyleResolverState&, CSSPropertyID, const CSSVariableReferenceValue&);
+
     // These return false if we encounter a reference to an invalid variable with no fallback
 
     // Resolves a range which may contain var() references or @apply rules

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

@@ -112,9 +112,7 @@ void StyleBuilder::applyProperty(CSSPropertyID id, StyleResolverState& state, co
     if (id != CSSPropertyVariable
         && (value.isVariableReferenceValue() || value.isPendingSubstitutionValue())) {
 
-        const CSSValue* resolvedValue = value.isVariableReferenceValue() ?
-            CSSVariableResolver::resolveVariableReferences(state, id, toCSSVariableReferenceValue(value)) :
-            CSSVariableResolver::resolvePendingSubstitutions(state, id, toCSSPendingSubstitutionValue(value));
+        const CSSValue* resolvedValue = CSSVariableResolver::resolveVariableReferences(state, id, value);
         applyProperty(id, state, *resolvedValue);
 
         if (!state.style()->hasVariableReferenceFromNonInheritedProperty() && !CSSPropertyMetadata::isInheritedProperty(id))

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

@@ -84,12 +84,12 @@ StylePropertySet* StyleResolverState::customPropertySetForApplyAtRule(const Stri
     return m_customPropertySetsForApplyAtRule.get(string);
 }
 
-HeapHashMap<CSSPropertyID, Member<const CSSValue>>& StyleResolverState::parsedPropertiesForPendingSubstitution(const CSSPendingSubstitutionValue& value)
+HeapHashMap<CSSPropertyID, Member<const CSSValue>>& StyleResolverState::parsedPropertiesForPendingSubstitutionCache(const CSSPendingSubstitutionValue& value) const
 {
-    HeapHashMap<CSSPropertyID, Member<const CSSValue>>* map = m_parsedPropertiesForPendingSubstitution.get(&value);
+    HeapHashMap<CSSPropertyID, Member<const CSSValue>>* map = m_parsedPropertiesForPendingSubstitutionCache.get(&value);
     if (!map) {
         map = new HeapHashMap<CSSPropertyID, Member<const CSSValue>>;
-        m_parsedPropertiesForPendingSubstitution.set(&value, map);
+        m_parsedPropertiesForPendingSubstitutionCache.set(&value, map);
     }
     return *map;
 }

third_party/WebKit/Source/core/css/resolver/StyleResolverState.h

@@ -161,7 +161,7 @@ public:
     void setCustomPropertySetForApplyAtRule(const String&, StylePropertySet*);
     StylePropertySet* customPropertySetForApplyAtRule(const String&);
 
-    HeapHashMap<CSSPropertyID, Member<const CSSValue>>& parsedPropertiesForPendingSubstitution(const CSSPendingSubstitutionValue&);
+    HeapHashMap<CSSPropertyID, Member<const CSSValue>>& parsedPropertiesForPendingSubstitutionCache(const CSSPendingSubstitutionValue&) const;
 
 private:
     ElementResolveContext m_elementContext;
@@ -190,7 +190,7 @@ private:
 
     HeapHashMap<String, Member<StylePropertySet>> m_customPropertySetsForApplyAtRule;
 
-    HeapHashMap<Member<const CSSPendingSubstitutionValue>, Member<HeapHashMap<CSSPropertyID, Member<const CSSValue>>>> m_parsedPropertiesForPendingSubstitution;
+    mutable HeapHashMap<Member<const CSSPendingSubstitutionValue>, Member<HeapHashMap<CSSPropertyID, Member<const CSSValue>>>> m_parsedPropertiesForPendingSubstitutionCache;
 
 };