Handle transition keyframes in composite bg color animation

This CL handles transition keyframes when we composite background
color animation.

Bug: 1153670
Change-Id: I9252db7f7344472d8fc9f1866d1f5b2a038dd2f2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2589114
Commit-Queue: Xida Chen <xidachen@chromium.org>
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#840297}

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

@@ -78,6 +78,8 @@ class CORE_EXPORT TransitionKeyframe : public Keyframe {
 
     bool IsTransitionPropertySpecificKeyframe() const final { return true; }
 
+    const TypedInterpolationValue* GetValue() const { return value_.get(); }
+
     void Trace(Visitor*) const override;
 
    private:

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

@@ -88,12 +88,11 @@ class BackgroundColorPaintWorkletProxyClient
   }
 };
 
-void GetAnimatedColorsFromKeyframes(const PropertySpecificKeyframe* frame,
-                                    Vector<Color>* animated_colors,
-                                    const Element* element) {
+void GetColorsFromStringKeyframe(const PropertySpecificKeyframe* frame,
+                                 Vector<Color>* animated_colors,
+                                 const Element* element) {
   DCHECK(frame->IsCSSPropertySpecificKeyframe());
-  const CSSValue* value =
-      static_cast<const CSSPropertySpecificKeyframe*>(frame)->Value();
+  const CSSValue* value = To<CSSPropertySpecificKeyframe>(frame)->Value();
   const CSSPropertyName property_name =
       CSSPropertyName(CSSPropertyID::kBackgroundColor);
   const CSSValue* computed_value = StyleResolver::ComputeValue(
@@ -104,6 +103,20 @@ void GetAnimatedColorsFromKeyframes(const PropertySpecificKeyframe* frame,
   animated_colors->push_back(color_value->Value());
 }
 
+void GetColorsFromTransitionKeyframe(const PropertySpecificKeyframe* frame,
+                                     Vector<Color>* animated_colors,
+                                     const Element* element) {
+  DCHECK(frame->IsTransitionPropertySpecificKeyframe());
+  const TransitionKeyframe::PropertySpecificKeyframe* keyframe =
+      To<TransitionKeyframe::PropertySpecificKeyframe>(frame);
+  InterpolableValue* value =
+      keyframe->GetValue()->Value().interpolable_value.get();
+  const InterpolableList& list = To<InterpolableList>(*value);
+  // Only the first one has the real value.
+  Color rgba = CSSColorInterpolationType::GetRGBA(*(list.Get(0)));
+  animated_colors->push_back(rgba);
+}
+
 }  // namespace
 
 // static
@@ -137,17 +150,21 @@ scoped_refptr<Image> BackgroundColorPaintWorklet::Paint(
       continue;
     const KeyframeEffectModelBase* model =
         static_cast<const KeyframeEffect*>(effect)->Model();
-    // TODO(crbug.com/1153670): handle transition keyframes here.
-    if (!model->IsStringKeyframeEffectModel())
-      continue;
     const PropertySpecificKeyframeVector* frames =
         model->GetPropertySpecificKeyframes(
             PropertyHandle(GetCSSPropertyBackgroundColor()));
     DCHECK_GE(frames->size(), 2u);
     // TODO(crbug.com/1153671): right now we keep the first and last keyframe
     // values only, we need to keep all keyframe values.
-    GetAnimatedColorsFromKeyframes(frames->front(), &animated_colors, element);
-    GetAnimatedColorsFromKeyframes(frames->back(), &animated_colors, element);
+    if (model->IsStringKeyframeEffectModel()) {
+      GetColorsFromStringKeyframe(frames->front(), &animated_colors, element);
+      GetColorsFromStringKeyframe(frames->back(), &animated_colors, element);
+    } else {
+      GetColorsFromTransitionKeyframe(frames->front(), &animated_colors,
+                                      element);
+      GetColorsFromTransitionKeyframe(frames->back(), &animated_colors,
+                                      element);
+    }
   }
 
   node->GetLayoutObject()->GetMutableForPainting().EnsureId();

third_party/blink/web_tests/FlagExpectations/composite-after-paint

@@ -64,6 +64,7 @@ crbug.com/1123189 virtual/threaded-composited-iframes/external/wpt/is-input-pend
 crbug.com/1124979 compositing/video/video-controls-layer-creation.html [ Pass Failure ]
 
 crbug.com/1150468 virtual/composite-bgcolor-animation/external/wpt/css/css-backgrounds/animations/one-element-animation.html [ Crash ]
+crbug.com/1150468 virtual/composite-bgcolor-animation/external/wpt/css/css-backgrounds/animations/one-element-transition.html [ Crash ]
 
 crbug.com/1157199 external/wpt/css/css-paint-api/column-count-crash.https.html [ Crash ]
 crbug.com/1157199 virtual/off-main-thread-css-paint/external/wpt/css/css-paint-api/column-count-crash.https.html [ Crash ]
@@ -72,4 +73,3 @@ crbug.com/1157199 virtual/off-main-thread-css-paint/external/wpt/css/css-paint-a
 # Need to implement predefined counter style 'simp-chinese-informal' as a
 # custom counter style.
 crbug.com/687225 fast/css/content-counter-large-negative-cjk.html [ Failure ]
-

third_party/blink/web_tests/external/wpt/css/css-backgrounds/animations/one-element-transition.html

+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color">
+<link rel="match" href="one-element-animation-ref.html">
+<style>
+.container {
+  width: 100px;
+  height: 100px;
+  background-color: rgb(0, 200, 0);
+  transition-property: background-color;
+  /* Use a long animation that start at 50% progress where the slope of the
+     selected timing function is zero. By setting up the animation in this way,
+     we accommodate lengthy delays in running the test without a potential drift
+     in the animated property value. This is important for avoiding flakes,
+     especially on debug builds. The screenshots are taken as soon as the
+     animation is ready, thus the long animation duration has no bearing on
+     the actual duration of the test. */
+  transition-duration: 1000000s;
+  transition-timing-function: cubic-bezier(0,1,1,0);
+  transition-delay: -500000s;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<body>
+<div class="container" id="target"></div>
+
+<script>
+function update() {
+  document.getElementById('target').style.backgroundColor = "rgb(200, 0, 0)";
+  requestAnimationFrame(() => {
+    takeScreenshot();
+  });
+}
+requestAnimationFrame(function() {
+  requestAnimationFrame(update);
+});
+</script>
+</body>
+</html>