Implement interpolation logic for bgcolor animation

This CL implements the interpolation logic for composited background
color animation. As a result, its associated layout test passes.

Bug: 1153668
Change-Id: Ibefe0d440d6966dbbd408ee1b011d0b8e6609050
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2585838Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Stephen McGruer <smcgruer@chromium.org>
Commit-Queue: Xida Chen <xidachen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837360}

third_party/blink/renderer/core/animation/build.gni

@@ -15,6 +15,7 @@ blink_core_tests_animation = [
   "css/css_animations_test.cc",
   "css/css_scroll_timeline_test.cc",
   "css/css_transition_data_test.cc",
+  "css_color_interpolation_type_test.cc",
   "document_animations_test.cc",
   "document_timeline_test.cc",
   "effect_input_test.cc",

third_party/blink/renderer/core/animation/css_color_interpolation_type.cc

@@ -96,6 +96,20 @@ CSSColorInterpolationType::MaybeCreateInterpolableColor(const CSSValue& value) {
   return CreateInterpolableColor(identifier_value->GetValueID());
 }
 
+Color CSSColorInterpolationType::GetRGBA(const InterpolableValue& value) {
+  const InterpolableList& list = To<InterpolableList>(value);
+  DCHECK_GE(list.length(), kAlpha);
+  double color[kAlpha + 1];
+  for (unsigned i = kRed; i <= kAlpha; i++) {
+    const InterpolableValue& current_value = *(list.Get(i));
+    color[i] = To<InterpolableNumber>(current_value).Value();
+  }
+  return Color(MakeRGBA(std::round(color[kRed] / color[kAlpha]),
+                        std::round(color[kGreen] / color[kAlpha]),
+                        std::round(color[kBlue] / color[kAlpha]),
+                        color[kAlpha]));
+}
+
 static void AddPremultipliedColor(double& red,
                                   double& green,
                                   double& blue,

third_party/blink/renderer/core/animation/css_color_interpolation_type.h

@@ -15,7 +15,7 @@ namespace blink {
 class StyleColor;
 struct OptionalStyleColor;
 
-class CSSColorInterpolationType : public CSSInterpolationType {
+class CORE_EXPORT CSSColorInterpolationType : public CSSInterpolationType {
  public:
   CSSColorInterpolationType(PropertyHandle property,
                             const PropertyRegistration* registration = nullptr)
@@ -44,6 +44,10 @@ class CSSColorInterpolationType : public CSSInterpolationType {
       bool is_visited = false,
       bool is_text_decoration = false);
 
+  // Extract color info from a InterpolableValue-result, the input value must be
+  // a InterpolableList.
+  static Color GetRGBA(const InterpolableValue&);
+
  private:
   InterpolationValue MaybeConvertNeutral(const InterpolationValue& underlying,
                                          ConversionCheckers&) const final;

third_party/blink/renderer/core/animation/css_color_interpolation_type_test.cc

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "third_party/blink/renderer/core/animation/css_color_interpolation_type.h"
+#include "testing/gtest/include/gtest/gtest.h"
+#include "third_party/blink/renderer/platform/graphics/color.h"
+
+namespace blink {
+
+TEST(CSSColorInterpolationTypeTest, GetRGBA1) {
+  Color color(230, 120, 0, 255);
+  EXPECT_EQ(color,
+            CSSColorInterpolationType::GetRGBA(
+                *CSSColorInterpolationType::CreateInterpolableColor(color)));
+}
+
+TEST(CSSColorInterpolationTypeTest, GetRGBA2) {
+  Color color(100, 190, 0, 1);
+  EXPECT_EQ(color,
+            CSSColorInterpolationType::GetRGBA(
+                *CSSColorInterpolationType::CreateInterpolableColor(color)));
+}
+
+TEST(CSSColorInterpolationTypeTest, GetRGBA3) {
+  Color color(35, 140, 10, 10);
+  EXPECT_EQ(color,
+            CSSColorInterpolationType::GetRGBA(
+                *CSSColorInterpolationType::CreateInterpolableColor(color)));
+}
+
+}  // namespace blink

third_party/blink/renderer/modules/csspaint/background_color_paint_worklet.cc

@@ -5,6 +5,7 @@
 #include "third_party/blink/renderer/modules/csspaint/background_color_paint_worklet.h"
 
 #include "third_party/blink/renderer/core/animation/animation_effect.h"
+#include "third_party/blink/renderer/core/animation/css_color_interpolation_type.h"
 #include "third_party/blink/renderer/core/animation/element_animations.h"
 #include "third_party/blink/renderer/core/css/css_color_value.h"
 #include "third_party/blink/renderer/core/css/cssom/paint_worklet_deferred_image.h"
@@ -68,10 +69,15 @@ class BackgroundColorPaintWorkletProxyClient
     DCHECK_EQ(animated_property_values.size(), 1u);
     const auto& entry = animated_property_values.begin();
     float progress = entry->second.float_value.value();
-    // TODO(crbug.com/1153668): implement interpolation here, instead of hard
-    // coding.
-    SkColor current_color = progress < 0.5 ? SkColor(animated_colors[0])
-                                           : SkColor(animated_colors[1]);
+    std::unique_ptr<InterpolableValue> from =
+        CSSColorInterpolationType::CreateInterpolableColor(animated_colors[0]);
+    std::unique_ptr<InterpolableValue> to =
+        CSSColorInterpolationType::CreateInterpolableColor(animated_colors[1]);
+    std::unique_ptr<InterpolableValue> result =
+        CSSColorInterpolationType::CreateInterpolableColor(animated_colors[1]);
+    from->Interpolate(*to, progress, *result);
+    Color rgba = CSSColorInterpolationType::GetRGBA(*(result.get()));
+    SkColor current_color = static_cast<SkColor>(rgba);
 
     PaintRenderingContext2DSettings* context_settings =
         PaintRenderingContext2DSettings::Create();

third_party/blink/web_tests/TestExpectations

@@ -3263,7 +3263,6 @@ crbug.com/697971 [ Mac10.12 ] virtual/text-antialias/selection/flexbox-selection
 crbug.com/697971 [ Mac10.12 ] virtual/text-antialias/selection/flexbox-selection.html [ Skip ]
 
 # [composite-bgcolor-animation]
-crbug.com/1139008 virtual/composite-bgcolor-animation/external/wpt/css/css-backgrounds/animations/one-element-animation.html [ Failure ]
 crbug.com/1148369 virtual/composite-bgcolor-animation/external/wpt/css/css-backgrounds/border-bottom-left-radius-010.xht [ Failure Pass ]
 crbug.com/1148369 virtual/composite-bgcolor-animation/external/wpt/css/css-backgrounds/border-bottom-right-radius-010.xht [ Failure Pass ]
 crbug.com/1148369 virtual/composite-bgcolor-animation/external/wpt/css/css-backgrounds/border-radius-clip-001.html [ Failure Pass ]