Align box-shadow/text-shadow additive and accumulative behavior to the spec

The spec: https://drafts.csswg.org/web-animations/#combining-shadow-lists
The bug stems from: https://bugs.chromium.org/p/chromium/issues/detail?id=1005828

Bug: 10020843
Change-Id: I48fb990d76ba0b3e6e0bfc74bd46e2391a092259
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1960887
Commit-Queue: Hao Sheng <haozhes@chromium.org>
Reviewed-by: Stephen McGruer <smcgruer@chromium.org>
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#728535}

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

@@ -102,6 +102,15 @@ InterpolationValue CSSShadowListInterpolationType::MaybeConvertInherit(
                            state.ParentStyle()->EffectiveZoom());
 }
 
+class AlwaysInvalidateChecker
+    : public CSSInterpolationType::CSSConversionChecker {
+ public:
+  bool IsValid(const StyleResolverState& state,
+               const InterpolationValue& underlying) const final {
+    return false;
+  }
+};
+
 InterpolationValue CSSShadowListInterpolationType::MaybeConvertValue(
     const CSSValue& value,
     const StyleResolverState*,
@@ -147,13 +156,9 @@ void CSSShadowListInterpolationType::Composite(
     double underlying_fraction,
     const InterpolationValue& value,
     double interpolation_fraction) const {
-  ListInterpolationFunctions::Composite(
-      underlying_value_owner, underlying_fraction, *this, value,
-      ListInterpolationFunctions::LengthMatchingStrategy::kPadToLargest,
-      WTF::BindRepeating(InterpolableShadow::CompatibleForCompositing),
-      WTF::BindRepeating(
-          ListInterpolationFunctions::VerifyNoNonInterpolableValues),
-      WTF::BindRepeating(InterpolableShadow::Composite));
+  // We do our compositing behavior in |PreInterpolationCompositeIfNeeded|; see
+  // the documentation on that method.
+  underlying_value_owner.Set(*this, value);
 }
 
 static scoped_refptr<ShadowList> CreateShadowList(
@@ -190,4 +195,86 @@ void CSSShadowListInterpolationType::ApplyStandardPropertyValue(
   }
 }
 
+InterpolationValue
+CSSShadowListInterpolationType::PreInterpolationCompositeIfNeeded(
+    InterpolationValue value,
+    const InterpolationValue& underlying,
+    EffectModel::CompositeOperation composite,
+    ConversionCheckers& conversion_checkers) const {
+  // Due to the post-interpolation composite optimization, the interpolation
+  // stack aggressively caches interpolated values. When we are doing
+  // pre-interpolation compositing, this can cause us to bake-in the composited
+  // result even when the underlying value is changing. This checker is a hack
+  // to disable that caching in this case.
+  // TODO(crbug.com/1009230): Remove this once our interpolation code isn't
+  // caching composited values.
+  conversion_checkers.push_back(std::make_unique<AlwaysInvalidateChecker>());
+  auto interpolable_list = std::unique_ptr<InterpolableList>(
+      To<InterpolableList>(value.interpolable_value.release()));
+  if (composite == EffectModel::CompositeOperation::kCompositeAdd) {
+    return PerformAdditiveComposition(std::move(interpolable_list), underlying);
+  }
+  DCHECK_EQ(composite, EffectModel::CompositeOperation::kCompositeAccumulate);
+  return PerformAccumulativeComposition(std::move(interpolable_list),
+                                        std::move(underlying));
+}
+
+InterpolationValue CSSShadowListInterpolationType::PerformAdditiveComposition(
+    std::unique_ptr<InterpolableList> interpolable_list,
+    const InterpolationValue& underlying) const {
+  // Per the spec, addition of shadow lists is defined as concatenation.
+  // https://drafts.csswg.org/web-animations/#combining-shadow-lists
+  const InterpolableList& underlying_list =
+      To<InterpolableList>(*underlying.interpolable_value);
+  auto composited_list = std::make_unique<InterpolableList>(
+      underlying_list.length() + interpolable_list->length());
+  for (wtf_size_t i = 0; i < composited_list->length(); i++) {
+    if (i < underlying_list.length()) {
+      composited_list->Set(i, underlying_list.Get(i)->Clone());
+    } else {
+      composited_list->Set(
+          i, interpolable_list->Get(i - underlying_list.length())->Clone());
+    }
+  }
+  return InterpolationValue(std::move(composited_list),
+                            underlying.non_interpolable_value);
+}
+
+InterpolationValue
+CSSShadowListInterpolationType::PerformAccumulativeComposition(
+    std::unique_ptr<InterpolableList> interpolable_list,
+    const InterpolationValue& underlying) const {
+  // Per the spec, accumulation of shadow lists operates on pairwise addition of
+  // the underlying components.
+  // https://drafts.csswg.org/web-animations/#combining-shadow-lists
+  const InterpolableList& underlying_list =
+      To<InterpolableList>(*underlying.interpolable_value);
+  wtf_size_t length = interpolable_list->length();
+  wtf_size_t underlying_length = underlying_list.length();
+  // If any of the shadow style(inset or normal) value don't match, fallback to
+  // replace behavior.
+  for (wtf_size_t i = 0; i < underlying_length && i < length; i++) {
+    if (To<InterpolableShadow>(underlying_list.Get(i))->GetShadowStyle() !=
+        To<InterpolableShadow>(interpolable_list->Get(i))->GetShadowStyle()) {
+      return InterpolationValue(std::move(interpolable_list));
+    }
+  }
+
+  // Otherwise, arithmetically combine the matching prefix of the lists then
+  // concatenate the remainder of the longer one.
+  wtf_size_t max_length = std::max(length, underlying_length);
+  auto composited_list = std::make_unique<InterpolableList>(max_length);
+  for (wtf_size_t i = 0; i < max_length; i++) {
+    if (i < underlying_length) {
+      composited_list->Set(i, underlying_list.Get(i)->Clone());
+      if (i < length)
+        composited_list->GetMutable(i)->Add(*interpolable_list->Get(i));
+    } else {
+      composited_list->Set(i, interpolable_list->Get(i)->Clone());
+    }
+  }
+  return InterpolationValue(std::move(composited_list),
+                            underlying.non_interpolable_value);
+}
+
 }  // namespace blink

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

@@ -42,6 +42,17 @@ class CSSShadowListInterpolationType : public CSSInterpolationType {
   PairwiseInterpolationValue MaybeMergeSingles(
       InterpolationValue&& start,
       InterpolationValue&& end) const final;
+  InterpolationValue PreInterpolationCompositeIfNeeded(
+      InterpolationValue value,
+      const InterpolationValue& underlying,
+      EffectModel::CompositeOperation,
+      ConversionCheckers&) const final;
+  InterpolationValue PerformAdditiveComposition(
+      std::unique_ptr<InterpolableList> interpolable_list,
+      const InterpolationValue& underlying) const;
+  InterpolationValue PerformAccumulativeComposition(
+      std::unique_ptr<InterpolableList> interpolable_list,
+      const InterpolationValue& underlying) const;
 };
 
 }  // namespace blink

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

@@ -50,7 +50,7 @@ class InterpolableShadow : public InterpolableValue {
                         double underlying_fraction,
                         const InterpolableValue&,
                         const NonInterpolableValue*);
-
+  ShadowStyle GetShadowStyle() const { return shadow_style_; }
   // Convert this InterpolableShadow back into a ShadowData class, usually to be
   // applied to the style after interpolating it.
   ShadowData CreateShadowData(const StyleResolverState&) const;

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

@@ -169,17 +169,20 @@ PairwiseInterpolationValue ListInterpolationFunctions::MaybeMergeSingles(
       ToNonInterpolableList(*start.non_interpolable_value);
   const NonInterpolableList& end_non_interpolable_list =
       ToNonInterpolableList(*end.non_interpolable_value);
-
+  const wtf_size_t start_non_interpolable_length =
+      ToNonInterpolableList(*start.non_interpolable_value).length();
+  const wtf_size_t end_non_interpolable_length =
+      ToNonInterpolableList(*end.non_interpolable_value).length();
   for (wtf_size_t i = 0; i < final_length; i++) {
     if (length_matching_strategy ==
             LengthMatchingStrategy::kLowestCommonMultiple ||
         (i < start_length && i < end_length)) {
       InterpolationValue start_merge(
           start_interpolable_list.Get(i % start_length)->Clone(),
-          start_non_interpolable_list.Get(i % start_length));
+          start_non_interpolable_list.Get(i % start_non_interpolable_length));
       InterpolationValue end_merge(
           end_interpolable_list.Get(i % end_length)->Clone(),
-          end_non_interpolable_list.Get(i % end_length));
+          end_non_interpolable_list.Get(i % end_non_interpolable_length));
       PairwiseInterpolationValue result = merge_single_item_conversions.Run(
           std::move(start_merge), std::move(end_merge));
       if (!result)
@@ -198,18 +201,22 @@ PairwiseInterpolationValue ListInterpolationFunctions::MaybeMergeSingles(
             i, start_interpolable_list.Get(i)->Clone());
         result_end_interpolable_list->Set(
             i, start_interpolable_list.Get(i)->CloneAndZero());
-        result_non_interpolable_values[i] = start_non_interpolable_list.Get(i);
+        result_non_interpolable_values[i] =
+            (i < start_non_interpolable_length)
+                ? start_non_interpolable_list.Get(i)
+                : nullptr;
       } else {
         DCHECK_LT(i, end_length);
         result_start_interpolable_list->Set(
             i, end_interpolable_list.Get(i)->CloneAndZero());
         result_end_interpolable_list->Set(
             i, end_interpolable_list.Get(i)->Clone());
-        result_non_interpolable_values[i] = end_non_interpolable_list.Get(i);
+        result_non_interpolable_values[i] =
+            (i < end_non_interpolable_length) ? end_non_interpolable_list.Get(i)
+                                              : nullptr;
       }
     }
   }
-
   return PairwiseInterpolationValue(
       std::move(result_start_interpolable_list),
       std::move(result_end_interpolable_list),

third_party/blink/web_tests/animations/composition/box-shadow-composition.html

@@ -19,11 +19,11 @@ assertComposition({
   addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
   addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
 }, [
-  {at: -0.3, is: 'rgb(80, 90, 100) 8px 16px 24px 32px'},
-  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px'},
-  {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px 64px'},
-  {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px 84px'},
-  {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px 104px'},
+  {at: -0.3, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(70, 70, 70) 7px 14px 21px 28px'},
+  {at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(100, 100, 100) 10px 20px 30px 40px'},
+  {at: 0.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(150, 150, 150) 15px 30px 45px 60px'},
+  {at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(200, 200, 200) 20px 40px 60px 80px'},
+  {at: 1.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(250, 250, 250) 25px 50px 75px 100px'},
 ]);
 
 assertComposition({
@@ -32,11 +32,11 @@ assertComposition({
   addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px inset',
   addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px inset',
 }, [
-  {at: -0.3, is: 'rgb(70, 70, 70) 7px 14px 21px 28px inset'},
-  {at: 0, is: 'rgb(100, 100, 100) 10px 20px 30px 40px inset'},
-  {at: 0.5, is: 'rgb(150, 150, 150) 15px 30px 45px 60px inset'},
-  {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px 80px inset'},
-  {at: 1.5, is: 'rgb(250, 250, 250) 25px 50px 75px 100px inset'},
+  {at: -0.3, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(70, 70, 70) 7px 14px 21px 28px inset'},
+  {at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(100, 100, 100) 10px 20px 30px 40px inset'},
+  {at: 0.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(150, 150, 150) 15px 30px 45px 60px inset'},
+  {at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(200, 200, 200) 20px 40px 60px 80px inset'},
+  {at: 1.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(250, 250, 250) 25px 50px 75px 100px inset'},
 ]);
 
 assertComposition({
@@ -45,11 +45,11 @@ assertComposition({
   addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
   addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
 }, [
-  {at: -0.3, is: 'rgb(80, 90, 100) 8px 16px 24px 32px, rgb(20, 40, 60) 2px 4px 6px 8px'},
-  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px, rgb(20, 40, 60) 2px 4px 6px 8px'},
-  {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px 64px, rgb(20, 40, 60) 2px 4px 6px 8px'},
-  {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px 84px, rgb(20, 40, 60) 2px 4px 6px 8px'},
-  {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px 104px, rgb(20, 40, 60) 2px 4px 6px 8px'},
+  {at: -0.3, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(70, 70, 70) 7px 14px 21px 28px'},
+  {at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(100, 100, 100) 10px 20px 30px 40px'},
+  {at: 0.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(150, 150, 150) 15px 30px 45px 60px'},
+  {at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(200, 200, 200) 20px 40px 60px 80px'},
+  {at: 1.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(250, 250, 250) 25px 50px 75px 100px'},
 ]);
 
 assertComposition({
@@ -58,11 +58,11 @@ assertComposition({
   addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgb(100, 100, 100) 10px 20px 30px 40px inset',
   addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px, rgb(200, 200, 200) 20px 40px 60px 80px inset',
 }, [
-  {at: -0.3, is: 'rgb(80, 90, 100) 8px 16px 24px 32px, rgb(70, 70, 70) 7px 14px 21px 28px inset'},
-  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px, rgb(100, 100, 100) 10px 20px 30px 40px inset'},
-  {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px 64px, rgb(150, 150, 150) 15px 30px 45px 60px inset'},
-  {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px 84px, rgb(200, 200, 200) 20px 40px 60px 80px inset'},
-  {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px 104px, rgb(250, 250, 250) 25px 50px 75px 100px inset'},
+  {at: -0.3, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(70, 70, 70) 7px 14px 21px 28px, rgb(70, 70, 70) 7px 14px 21px 28px inset'},
+  {at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(100, 100, 100) 10px 20px 30px 40px, rgb(100, 100, 100) 10px 20px 30px 40px inset'},
+  {at: 0.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(150, 150, 150) 15px 30px 45px 60px, rgb(150, 150, 150) 15px 30px 45px 60px inset'},
+  {at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(200, 200, 200) 20px 40px 60px 80px, rgb(200, 200, 200) 20px 40px 60px 80px inset'},
+  {at: 1.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(250, 250, 250) 25px 50px 75px 100px, rgb(250, 250, 250) 25px 50px 75px 100px inset'},
 ]);
 
 assertComposition({
@@ -71,11 +71,11 @@ assertComposition({
   addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
   replaceTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
 }, [
-  {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px 33.2px, rgb(26, 52, 78) 2.6px 5.2px 7.8px 10.4px'},
-  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px, rgb(20, 40, 60) 2px 4px 6px 8px'},
-  {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px 62px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px'},
+  {at: -0.3, is: 'rgb(0, 0, 0) -4.7px -9.4px 0px -18.8px, rgb(26, 52, 78) 2.6px 5.2px 7.8px 10.4px, rgb(130, 130, 130) 13px 26px 39px 52px'},
+  {at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(100, 100, 100) 10px 20px 30px 40px'},
+  {at: 0.5, is: 'rgb(105, 110, 115) 10.5px 21px 31.5px 42px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(100, 100, 100, 0.5) 5px 10px 15px 20px'},
   {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px 80px'},
-  {at: 1.5, is: 'rgba(255, 255, 255, 0.5) 24.5px 49px 73.5px 98px, rgba(0, 0, 0, 0) -1px -2px 0px -4px'},
+  {at: 1.5, is: 'rgb(255, 255, 255) 29.5px 59px 88.5px 118px, rgba(0, 0, 0, 0) -1px -2px 0px -4px, rgba(0, 0, 0, 0) -5px -10px 0px -20px'},
 ]);
 
 assertComposition({
@@ -84,11 +84,11 @@ assertComposition({
   replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
   addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
 }, [
-  {at: -0.3, is: 'rgba(96, 91, 87, 0.7) 6.7px 13.4px 20.1px 26.8px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px -2.4px'},
+  {at: -0.3, is: 'rgb(127, 124, 121) 12.7px 25.4px 38.1px 50.8px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px -2.4px, rgba(0, 0, 0, 0) -6px -12px 0px -24px'},
   {at: 0, is: 'rgb(100, 100, 100) 10px 20px 30px 40px'},
-  {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px 62px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px'},
-  {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px 84px, rgb(20, 40, 60) 2px 4px 6px 8px'},
-  {at: 1.5, is: 'rgb(255, 255, 255) 26.5px 53px 79.5px 106px, rgb(30, 60, 90) 3px 6px 9px 12px'},
+  {at: 0.5, is: 'rgb(55, 60, 65) 5.5px 11px 16.5px 22px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(200, 200, 200, 0.5) 10px 20px 30px 40px'},
+  {at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(200, 200, 200) 20px 40px 60px 80px'},
+  {at: 1.5, is: 'rgb(0, 0, 0) -3.5px -7px 0px -14px, rgb(30, 60, 90) 3px 6px 9px 12px, rgb(255, 255, 255) 30px 60px 90px 120px'},
 ]);
 
 assertComposition({
@@ -97,11 +97,11 @@ assertComposition({
   addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgb(200, 200, 200) 20px 40px 60px 80px',
   replaceTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
 }, [
-  {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px 33.2px, rgb(255, 255, 255) 28.6px 57.2px 85.8px 114.4px, rgb(52, 104, 156) 5.2px 10.4px 15.6px 20.8px'},
-  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px, rgb(220, 240, 255) 22px 44px 66px 88px, rgb(40, 80, 120) 4px 8px 12px 16px'},
-  {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px 62px, rgb(110, 120, 130) 11px 22px 33px 44px, rgba(40, 80, 120, 0.5) 2px 4px 6px 8px'},
+  {at: -0.3, is: 'rgb(0, 0, 0) -4.7px -9.4px 0px -18.8px, rgb(26, 52, 78) 2.6px 5.2px 7.8px 10.4px, rgb(52, 104, 156) 5.2px 10.4px 15.6px 20.8px, rgb(130, 130, 130) 13px 26px 39px 52px, rgb(255, 255, 255) 26px 52px 78px 104px'},
+  {at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(40, 80, 120) 4px 8px 12px 16px, rgb(100, 100, 100) 10px 20px 30px 40px, rgb(200, 200, 200) 20px 40px 60px 80px'},
+  {at: 0.5, is: 'rgb(105, 110, 115) 10.5px 21px 31.5px 42px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(40, 80, 120, 0.5) 2px 4px 6px 8px, rgba(100, 100, 100, 0.5) 5px 10px 15px 20px, rgba(200, 200, 200, 0.5) 10px 20px 30px 40px'},
   {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px 80px'},
-  {at: 1.5, is: 'rgba(255, 255, 255, 0.5) 24.5px 49px 73.5px 98px, rgba(0, 0, 0, 0) -11px -22px 0px -44px, rgba(0, 0, 0, 0) -2px -4px 0px -8px'},
+  {at: 1.5, is: 'rgb(255, 255, 255) 29.5px 59px 88.5px 118px, rgba(0, 0, 0, 0) -1px -2px 0px -4px, rgba(0, 0, 0, 0) -2px -4px 0px -8px, rgba(0, 0, 0, 0) -5px -10px 0px -20px, rgba(0, 0, 0, 0) -10px -20px 0px -40px'},
 ]);
 </script>
 </body>

third_party/blink/web_tests/animations/composition/text-shadow-composition.html

@@ -19,11 +19,11 @@ assertComposition({
   addFrom: 'rgb(100, 100, 100) 10px 20px 30px',
   addTo: 'rgb(200, 200, 200) 20px 40px 60px',
 }, [
-  {at: -0.3, is: 'rgb(80, 90, 100) 8px 16px 24px'},
-  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px'},
-  {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px'},
-  {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px'},
-  {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px'},
+  {at: -0.3, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(70, 70, 70) 7px 14px 21px'},
+  {at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(100, 100, 100) 10px 20px 30px'},
+  {at: 0.5, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(150, 150, 150) 15px 30px 45px'},
+  {at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(200, 200, 200) 20px 40px 60px'},
+  {at: 1.5, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(250, 250, 250) 25px 50px 75px'},
 ]);
 
 assertComposition({
@@ -32,11 +32,11 @@ assertComposition({
   addFrom: 'rgb(100, 100, 100) 10px 20px 30px',
   addTo: 'rgb(200, 200, 200) 20px 40px 60px',
 }, [
-  {at: -0.3, is: 'rgb(80, 90, 100) 8px 16px 24px, rgb(20, 40, 60) 2px 4px 6px'},
-  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px, rgb(20, 40, 60) 2px 4px 6px'},
-  {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px, rgb(20, 40, 60) 2px 4px 6px'},
-  {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px, rgb(20, 40, 60) 2px 4px 6px'},
-  {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px, rgb(20, 40, 60) 2px 4px 6px'},
+  {at: -0.3, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(70, 70, 70) 7px 14px 21px'},
+  {at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(100, 100, 100) 10px 20px 30px'},
+  {at: 0.5, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(150, 150, 150) 15px 30px 45px'},
+  {at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(200, 200, 200) 20px 40px 60px'},
+  {at: 1.5, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(250, 250, 250) 25px 50px 75px'},
 ]);
 
 assertComposition({
@@ -45,11 +45,11 @@ assertComposition({
   addFrom: 'rgb(100, 100, 100) 10px 20px 30px',
   replaceTo: 'rgb(200, 200, 200) 20px 40px 60px',
 }, [
-  {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px, rgb(26, 52, 78) 2.6px 5.2px 7.8px'},
-  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px, rgb(20, 40, 60) 2px 4px 6px'},
-  {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px'},
+  {at: -0.3, is: 'rgb(0, 0, 0) -4.7px -9.4px 0px, rgb(26, 52, 78) 2.6px 5.2px 7.8px, rgb(130, 130, 130) 13px 26px 39px'},
+  {at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(100, 100, 100) 10px 20px 30px'},
+  {at: 0.5, is: 'rgb(105, 110, 115) 10.5px 21px 31.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(100, 100, 100, 0.5) 5px 10px 15px'},
   {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px'},
-  {at: 1.5, is: 'rgba(255, 255, 255, 0.5) 24.5px 49px 73.5px, rgba(0, 0, 0, 0) -1px -2px 0px'},
+  {at: 1.5, is: 'rgb(255, 255, 255) 29.5px 59px 88.5px, rgba(0, 0, 0, 0) -1px -2px 0px, rgba(0, 0, 0, 0) -5px -10px 0px'},
 ]);
 
 assertComposition({
@@ -58,11 +58,11 @@ assertComposition({
   replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px',
   addTo: 'rgb(200, 200, 200) 20px 40px 60px',
 }, [
-  {at: -0.3, is: 'rgba(96, 91, 87, 0.7) 6.7px 13.4px 20.1px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px'},
+  {at: -0.3, is: 'rgb(127, 124, 121) 12.7px 25.4px 38.1px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px, rgba(0, 0, 0, 0) -6px -12px 0px'},
   {at: 0, is: 'rgb(100, 100, 100) 10px 20px 30px'},
-  {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px'},
-  {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px, rgb(20, 40, 60) 2px 4px 6px'},
-  {at: 1.5, is: 'rgb(255, 255, 255) 26.5px 53px 79.5px, rgb(30, 60, 90) 3px 6px 9px'},
+  {at: 0.5, is: 'rgb(55, 60, 65) 5.5px 11px 16.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(200, 200, 200, 0.5) 10px 20px 30px'},
+  {at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(200, 200, 200) 20px 40px 60px'},
+  {at: 1.5, is: 'rgb(0, 0, 0) -3.5px -7px 0px, rgb(30, 60, 90) 3px 6px 9px, rgb(255, 255, 255) 30px 60px 90px'},
 ]);
 
 assertComposition({
@@ -71,11 +71,11 @@ assertComposition({
   addFrom: 'rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px',
   replaceTo: 'rgb(200, 200, 200) 20px 40px 60px',
 }, [
-  {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px, rgb(255, 255, 255) 28.6px 57.2px 85.8px, rgb(52, 104, 156) 5.2px 10.4px 15.6px'},
-  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px, rgb(220, 240, 255) 22px 44px 66px, rgb(40, 80, 120) 4px 8px 12px'},
-  {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px, rgb(110, 120, 130) 11px 22px 33px, rgba(40, 80, 120, 0.5) 2px 4px 6px'},
+  {at: -0.3, is: 'rgb(0, 0, 0) -4.7px -9.4px 0px, rgb(26, 52, 78) 2.6px 5.2px 7.8px, rgb(52, 104, 156) 5.2px 10.4px 15.6px, rgb(130, 130, 130) 13px 26px 39px, rgb(255, 255, 255) 26px 52px 78px'},
+  {at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px, rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px'},
+  {at: 0.5, is: 'rgb(105, 110, 115) 10.5px 21px 31.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(40, 80, 120, 0.5) 2px 4px 6px, rgba(100, 100, 100, 0.5) 5px 10px 15px, rgba(200, 200, 200, 0.5) 10px 20px 30px'},
   {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px'},
-  {at: 1.5, is: 'rgba(255, 255, 255, 0.5) 24.5px 49px 73.5px, rgba(0, 0, 0, 0) -11px -22px 0px, rgba(0, 0, 0, 0) -2px -4px 0px'},
+  {at: 1.5, is: 'rgb(255, 255, 255) 29.5px 59px 88.5px, rgba(0, 0, 0, 0) -1px -2px 0px, rgba(0, 0, 0, 0) -2px -4px 0px, rgba(0, 0, 0, 0) -5px -10px 0px, rgba(0, 0, 0, 0) -10px -20px 0px'},
 ]);
 </script>
 </body>

third_party/blink/web_tests/external/wpt/web-animations/animation-model/animation-types/addition-per-property-expected.txt

 This is a testharness.js-based test.
-Found 556 tests; 539 PASS, 17 FAIL, 0 TIMEOUT, 0 NOTRUN.
+Found 556 tests; 541 PASS, 15 FAIL, 0 TIMEOUT, 0 NOTRUN.
 PASS Setup
 PASS align-content (type: discrete) has testAddition function
 PASS align-content: "flex-end" onto "flex-start"
@@ -103,7 +103,7 @@ PASS border-top-width (type: length) has testAddition function
 PASS border-top-width: length
 PASS border-top-width: length of rem
 PASS box-shadow (type: boxShadowList) has testAddition function
-FAIL box-shadow: shadow assert_equals: The value should be rgb(0, 0, 0) 0px 0px 0px 0px, rgb(120, 120, 120) 10px 10px 10px 0px at 0ms expected "rgb(0, 0, 0) 0px 0px 0px 0px, rgb(120, 120, 120) 10px 10px 10px 0px" but got "rgb(120, 120, 120) 10px 10px 10px 0px"
+PASS box-shadow: shadow
 PASS box-sizing (type: discrete) has testAddition function
 PASS box-sizing: "border-box" onto "content-box"
 PASS box-sizing: "content-box" onto "border-box"
@@ -493,7 +493,7 @@ PASS text-rendering (type: discrete) has testAddition function
 PASS text-rendering: "optimizeLegibility" onto "optimizeSpeed"
 PASS text-rendering: "optimizeSpeed" onto "optimizeLegibility"
 PASS text-shadow (type: textShadowList) has testAddition function
-FAIL text-shadow: shadow assert_equals: The value should be rgb(0, 0, 0) 0px 0px 0px, rgb(120, 120, 120) 10px 10px 10px at 0ms expected "rgb(0, 0, 0) 0px 0px 0px, rgb(120, 120, 120) 10px 10px 10px" but got "rgb(120, 120, 120) 10px 10px 10px"
+PASS text-shadow: shadow
 PASS text-transform (type: discrete) has testAddition function
 PASS text-transform: "uppercase" onto "capitalize"
 PASS text-transform: "capitalize" onto "uppercase"