Add interpolation for font-stretch

Uses font-weight as a template for the implementation as the value is
also a scalar with keywords.

Bug: 924353
Change-Id: If635e279f369f7b1433b98d9cfb7f6423fbcb3f0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2209389Reviewed-by: Kevin Ellis <kevers@chromium.org>
Reviewed-by: Robert Flack <flackr@chromium.org>
Commit-Queue: George Steel <gtsteel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#772767}

third_party/blink/renderer/core/animation/BUILD.gn

@@ -86,6 +86,8 @@ blink_core_sources("animation") {
     "css_filter_list_interpolation_type.h",
     "css_font_size_interpolation_type.cc",
     "css_font_size_interpolation_type.h",
+    "css_font_stretch_interpolation_type.cc",
+    "css_font_stretch_interpolation_type.h",
     "css_font_variation_settings_interpolation_type.cc",
     "css_font_variation_settings_interpolation_type.h",
     "css_font_weight_interpolation_type.cc",

third_party/blink/renderer/core/animation/css_font_stretch_interpolation_type.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_font_stretch_interpolation_type.h"
+
+#include <memory>
+
+#include "base/memory/ptr_util.h"
+#include "third_party/blink/renderer/core/css/css_primitive_value_mappings.h"
+#include "third_party/blink/renderer/core/css/resolver/style_resolver_state.h"
+#include "third_party/blink/renderer/core/style/computed_style.h"
+#include "third_party/blink/renderer/platform/wtf/math_extras.h"
+
+namespace blink {
+
+class InheritedFontStretchChecker
+    : public CSSInterpolationType::CSSConversionChecker {
+ public:
+  explicit InheritedFontStretchChecker(FontSelectionValue font_stretch)
+      : font_stretch_(font_stretch) {}
+
+ private:
+  bool IsValid(const StyleResolverState& state,
+               const InterpolationValue&) const final {
+    return font_stretch_ == state.ParentStyle()->GetFontStretch();
+  }
+
+  const double font_stretch_;
+};
+
+InterpolationValue CSSFontStretchInterpolationType::CreateFontStretchValue(
+    FontSelectionValue font_stretch) const {
+  return InterpolationValue(std::make_unique<InterpolableNumber>(font_stretch));
+}
+
+InterpolationValue CSSFontStretchInterpolationType::MaybeConvertNeutral(
+    const InterpolationValue&,
+    ConversionCheckers&) const {
+  return InterpolationValue(std::make_unique<InterpolableNumber>(0));
+}
+
+InterpolationValue CSSFontStretchInterpolationType::MaybeConvertInitial(
+    const StyleResolverState&,
+    ConversionCheckers& conversion_checkers) const {
+  return CreateFontStretchValue(NormalWidthValue());
+}
+
+InterpolationValue CSSFontStretchInterpolationType::MaybeConvertInherit(
+    const StyleResolverState& state,
+    ConversionCheckers& conversion_checkers) const {
+  if (!state.ParentStyle())
+    return nullptr;
+  FontSelectionValue inherited_font_stretch =
+      state.ParentStyle()->GetFontStretch();
+  conversion_checkers.push_back(
+      std::make_unique<InheritedFontStretchChecker>(inherited_font_stretch));
+  return CreateFontStretchValue(inherited_font_stretch);
+}
+
+InterpolationValue CSSFontStretchInterpolationType::MaybeConvertValue(
+    const CSSValue& value,
+    const StyleResolverState* state,
+    ConversionCheckers& conversion_checkers) const {
+  if (auto* primitive_value = DynamicTo<CSSPrimitiveValue>(value)) {
+    return CreateFontStretchValue(
+        FontSelectionValue(primitive_value->GetFloatValue()));
+  }
+
+  const auto& identifier_value = To<CSSIdentifierValue>(value);
+  CSSValueID keyword = identifier_value.GetValueID();
+
+  switch (keyword) {
+    case CSSValueID::kInvalid:
+      return nullptr;
+    case CSSValueID::kUltraCondensed:
+      return CreateFontStretchValue(UltraCondensedWidthValue());
+    case CSSValueID::kExtraCondensed:
+      return CreateFontStretchValue(ExtraCondensedWidthValue());
+    case CSSValueID::kCondensed:
+      return CreateFontStretchValue(CondensedWidthValue());
+    case CSSValueID::kSemiCondensed:
+      return CreateFontStretchValue(SemiCondensedWidthValue());
+    case CSSValueID::kNormal:
+      return CreateFontStretchValue(NormalWidthValue());
+    case CSSValueID::kSemiExpanded:
+      return CreateFontStretchValue(SemiExpandedWidthValue());
+    case CSSValueID::kExpanded:
+      return CreateFontStretchValue(ExpandedWidthValue());
+    case CSSValueID::kExtraExpanded:
+      return CreateFontStretchValue(ExtraExpandedWidthValue());
+    case CSSValueID::kUltraExpanded:
+      return CreateFontStretchValue(UltraExpandedWidthValue());
+    default:
+      NOTREACHED();
+      return nullptr;
+  }
+}
+
+InterpolationValue
+CSSFontStretchInterpolationType::MaybeConvertStandardPropertyUnderlyingValue(
+    const ComputedStyle& style) const {
+  return CreateFontStretchValue(style.GetFontStretch());
+}
+
+void CSSFontStretchInterpolationType::ApplyStandardPropertyValue(
+    const InterpolableValue& interpolable_value,
+    const NonInterpolableValue*,
+    StyleResolverState& state) const {
+  state.GetFontBuilder().SetStretch(FontSelectionValue(
+      clampTo(To<InterpolableNumber>(interpolable_value).Value(), 0.0)));
+}
+
+}  // namespace blink

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

+// 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.
+
+#ifndef THIRD_PARTY_BLINK_RENDERER_CORE_ANIMATION_CSS_FONT_STRETCH_INTERPOLATION_TYPE_H_
+#define THIRD_PARTY_BLINK_RENDERER_CORE_ANIMATION_CSS_FONT_STRETCH_INTERPOLATION_TYPE_H_
+
+#include "third_party/blink/renderer/core/animation/css_interpolation_type.h"
+
+namespace blink {
+
+class CSSFontStretchInterpolationType : public CSSInterpolationType {
+ public:
+  explicit CSSFontStretchInterpolationType(PropertyHandle property)
+      : CSSInterpolationType(property) {
+    DCHECK_EQ(CssProperty().PropertyID(), CSSPropertyID::kFontStretch);
+  }
+
+  InterpolationValue MaybeConvertStandardPropertyUnderlyingValue(
+      const ComputedStyle&) const final;
+  void ApplyStandardPropertyValue(const InterpolableValue&,
+                                  const NonInterpolableValue*,
+                                  StyleResolverState&) const final;
+
+ private:
+  InterpolationValue CreateFontStretchValue(FontSelectionValue) const;
+  InterpolationValue MaybeConvertNeutral(const InterpolationValue& underlying,
+                                         ConversionCheckers&) const final;
+  InterpolationValue MaybeConvertInitial(const StyleResolverState&,
+                                         ConversionCheckers&) const final;
+  InterpolationValue MaybeConvertInherit(const StyleResolverState&,
+                                         ConversionCheckers&) const final;
+  InterpolationValue MaybeConvertValue(const CSSValue&,
+                                       const StyleResolverState*,
+                                       ConversionCheckers&) const final;
+};
+
+}  // namespace blink
+
+#endif  // THIRD_PARTY_BLINK_RENDERER_CORE_ANIMATION_CSS_FONT_STRETCH_INTERPOLATION_TYPE_H_

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

@@ -18,6 +18,7 @@
 #include "third_party/blink/renderer/core/animation/css_default_interpolation_type.h"
 #include "third_party/blink/renderer/core/animation/css_filter_list_interpolation_type.h"
 #include "third_party/blink/renderer/core/animation/css_font_size_interpolation_type.h"
+#include "third_party/blink/renderer/core/animation/css_font_stretch_interpolation_type.h"
 #include "third_party/blink/renderer/core/animation/css_font_variation_settings_interpolation_type.h"
 #include "third_party/blink/renderer/core/animation/css_font_weight_interpolation_type.h"
 #include "third_party/blink/renderer/core/animation/css_image_interpolation_type.h"
@@ -46,6 +47,7 @@
 #include "third_party/blink/renderer/core/animation/css_translate_interpolation_type.h"
 #include "third_party/blink/renderer/core/animation/css_var_cycle_interpolation_type.h"
 #include "third_party/blink/renderer/core/animation/css_visibility_interpolation_type.h"
+#include "third_party/blink/renderer/core/css/css_property_names.h"
 #include "third_party/blink/renderer/core/css/css_syntax_definition.h"
 #include "third_party/blink/renderer/core/css/properties/css_property.h"
 #include "third_party/blink/renderer/core/css/property_registry.h"
@@ -254,6 +256,10 @@ const InterpolationTypes& CSSInterpolationTypesMap::Get(
         applicable_types->push_back(
             std::make_unique<CSSFontWeightInterpolationType>(used_property));
         break;
+      case CSSPropertyID::kFontStretch:
+        applicable_types->push_back(
+            std::make_unique<CSSFontStretchInterpolationType>(used_property));
+        break;
       case CSSPropertyID::kFontVariationSettings:
         applicable_types->push_back(
             std::make_unique<CSSFontVariationSettingsInterpolationType>(

third_party/blink/renderer/core/css/css_properties.json5

@@ -797,6 +797,7 @@
       name: "font-stretch",
       property_methods: ["ParseSingleValue", "CSSValueFromComputedStyleInternal"],
       is_descriptor: true,
+      interpolable: true,
       inherited: true,
       font: true,
       name_for_methods: "Stretch",

third_party/blink/web_tests/external/wpt/css/css-fonts/animations/font-stretch-interpolation.html

+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>font-size interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size">
+<meta name="assert" content="font-size supports animation as length">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.container {
+  font-stretch: ultra-expanded;
+}
+.container2 {
+  font-stretch: ultra-condensed;
+}
+.target {
+  display: inline-block;
+  font: 100px sans-serif;
+  font-stretch: normal;
+}
+.expected {
+  color: green;
+  margin-right: 30px;
+}
+</style>
+
+<body>
+<template id="target-template">
+  <span class="container">
+    <div class="target">TT</div>
+  </span>
+</template>
+
+<span id="inv-container" class="container">
+  <div id="inv-target" class="target">TT</div>
+</span>
+</body>
+
+<script>
+test_interpolation({
+  property: 'font-stretch',
+  from: '100%',
+  to: '200%'
+}, [
+  {at: -2, expect: '0%'},  // CSS font-stretch can't be negative.
+  {at: -0.25, expect: '75%'},
+  {at: 0, expect: '100%'},
+  {at: 0.3, expect: '130%'},
+  {at: 0.6, expect: '160%'},
+  {at: 1, expect: '200%'},
+  {at: 1.5, expect: '250%'},
+]);
+
+test_interpolation({
+  property: 'font-stretch',
+  from: neutralKeyframe,
+  to: '200%'
+}, [
+  {at: -2, expect: '0%'},
+  {at: -0.25, expect: '75%'},
+  {at: 0, expect: '100%'},
+  {at: 0.3, expect: '130%'},
+  {at: 0.6, expect: '160%'},
+  {at: 1, expect: '200%'},
+  {at: 1.5, expect: '250%'},
+]);
+
+test_interpolation({
+  property: 'font-stretch',
+  from: 'initial',
+  to: 'inherit'
+}, [
+  {at: -2, expect: '0%'},
+  {at: -0.25, expect: '75%'},
+  {at: 0, expect: '100%'},
+  {at: 0.3, expect: '130%'},
+  {at: 0.6, expect: '160%'},
+  {at: 1, expect: '200%'},
+  {at: 1.5, expect: '250%'},
+]);
+
+// Test interpolation from keywords.
+test_interpolation({
+  property: 'font-stretch',
+  from: 'normal',
+  to: 'ultra-expanded'
+}, [
+  {at: -0.25, expect: 'condensed'},
+  {at: 0, expect: 'normal'},
+  {at: 0.125, expect: 'semi-expanded'},
+  {at: 0.25, expect: 'expanded'},
+  {at: 0.5, expect: 'extra-expanded'},
+  {at: 0.75, expect: '175%'},
+  {at: 1, expect: 'ultra-expanded'},
+]);
+
+test_interpolation({
+  property: 'font-stretch',
+  from: 'ultra-condensed',
+  to: 'condensed'
+}, [
+  {at: 0, expect: 'ultra-condensed'},
+  {at: 0.5, expect: 'extra-condensed'},
+  {at: 1, expect: 'condensed'},
+]);
+
+test_interpolation({
+  property: 'font-stretch',
+  from: 'extra-condensed',
+  to: 'semi-condensed'
+}, [
+  {at: 0, expect: 'extra-condensed'},
+  {at: 0.5, expect: 'condensed'},
+  {at: 1, expect: 'semi-condensed'},
+]);
+
+test_interpolation({
+  property: 'font-stretch',
+  from: 'condensed',
+  to: 'expanded'
+}, [
+  {at: 0, expect: 'condensed'},
+  {at: 0.25, expect: 'semi-condensed'},
+  {at: 0.5, expect: 'normal'},
+  {at: 0.75, expect: 'semi-expanded'},
+  {at: 1, expect: 'expanded'},
+]);
+
+test_interpolation({
+  property: 'font-stretch',
+  from: 'semi-condensed',
+  to: 'semi-expanded'
+}, [
+  {at: 0, expect: 'semi-condensed'},
+  {at: 0.5, expect: 'normal'},
+  {at: 1, expect: 'semi-expanded'},
+]);
+
+test_interpolation({
+  property: 'font-stretch',
+  from: 'normal',
+  to: 'extra-expanded'
+}, [
+  {at: 0, expect: 'normal'},
+  {at: 0.25, expect: 'semi-expanded'},
+  {at: 0.5, expect: 'expanded'},
+  {at: 1, expect: 'extra-expanded'},
+]);
+
+test(t => {
+  var container = document.getElementById('inv-container');
+  var target = document.getElementById('inv-target');
+  var anim = target.animate({fontStretch: ['normal', 'inherit']}, 1000);
+  anim.pause();
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(target).fontStretch, '150%');
+
+  container.setAttribute('class', 'container2');
+  assert_equals(getComputedStyle(target).fontStretch, '75%');
+}, "An interpolation to inherit updates correctly on a parent style change.");
+
+</script>

third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation-expected.txt

 This is a testharness.js-based test.
-Found 60 tests; 49 PASS, 11 FAIL, 0 TIMEOUT, 0 NOTRUN.
-FAIL Animation of font in ::marker assert_in_array: value "italic small-caps 500 ultra-expanded 15px Ahem" not in array ["italic small-caps 500 expanded 15px Ahem", "italic small-caps 500 expanded 15px/normal Ahem"]
+Found 60 tests; 53 PASS, 7 FAIL, 0 TIMEOUT, 0 NOTRUN.
+PASS Animation of font in ::marker
 PASS Animation of font-family in ::marker
 PASS Animation of font-feature-settings in ::marker
 PASS Animation of font-kerning in ::marker
 PASS Animation of font-size in ::marker
 PASS Animation of font-size-adjust in ::marker
-FAIL Animation of font-stretch in ::marker assert_in_array: value "200%" not in array ["expanded", "125%"]
+PASS Animation of font-stretch in ::marker
 PASS Animation of font-style in ::marker
 FAIL Animation of font-synthesis in ::marker assert_true: font-synthesis doesn't seem to be supported in the computed style expected true got false
 PASS Animation of font-variant in ::marker
@@ -30,13 +30,13 @@ PASS Animation of list-style-image in ::marker
 PASS Animation of list-style-position in ::marker
 PASS Animation of list-style-type in ::marker
 PASS Animation of line-height in ::marker
-FAIL Transition of font in ::marker assert_in_array: value "italic small-caps 500 ultra-expanded 15px Ahem" not in array ["italic small-caps 500 expanded 15px Ahem", "italic small-caps 500 expanded 15px/normal Ahem"]
+PASS Transition of font in ::marker
 PASS Transition of font-family in ::marker
 PASS Transition of font-feature-settings in ::marker
 PASS Transition of font-kerning in ::marker
 PASS Transition of font-size in ::marker
 PASS Transition of font-size-adjust in ::marker
-FAIL Transition of font-stretch in ::marker assert_in_array: value "200%" not in array ["expanded", "125%"]
+PASS Transition of font-stretch in ::marker
 PASS Transition of font-style in ::marker
 FAIL Transition of font-synthesis in ::marker assert_true: font-synthesis doesn't seem to be supported in the computed style expected true got false
 PASS Transition of font-variant in ::marker

third_party/blink/web_tests/external/wpt/css/css-transitions/properties-value-003-expected.txt

 This is a testharness.js-based test.
-Found 192 tests; 84 PASS, 108 FAIL, 0 TIMEOUT, 0 NOTRUN.
+Found 192 tests; 86 PASS, 106 FAIL, 0 TIMEOUT, 0 NOTRUN.
 PASS border-top-left-radius border-radius(px) / values
 PASS border-top-left-radius border-radius(px) / events
 PASS border-top-left-radius border-radius(px-px) / values
@@ -30,8 +30,8 @@ PASS font-size-adjust number(integer) / values
 PASS font-size-adjust number(integer) / events
 PASS font-size-adjust number(decimal) / values
 PASS font-size-adjust number(decimal) / events
-FAIL font-stretch font-stretch(keyword) / values assert_not_equals: must not be target value after start got disallowed value "125%"
-FAIL font-stretch font-stretch(keyword) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "font-stretch:2s" but got ""
+PASS font-stretch font-stretch(keyword) / values
+PASS font-stretch font-stretch(keyword) / events
 FAIL marker-offset length(pt) / values assert_not_equals: initial and target values may not match got disallowed value ""
 FAIL marker-offset length(pt) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "marker-offset:2s" but got ""
 FAIL marker-offset length(pc) / values assert_not_equals: initial and target values may not match got disallowed value ""

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

 This is a testharness.js-based test.
-Found 301 tests; 298 PASS, 3 FAIL, 0 TIMEOUT, 0 NOTRUN.
+Found 301 tests; 299 PASS, 2 FAIL, 0 TIMEOUT, 0 NOTRUN.
 PASS Setup
 PASS align-content (type: discrete) has testAccumulation function
 PASS align-content: "flex-end" onto "flex-start"
@@ -236,7 +236,7 @@ PASS flood-opacity (type: opacity) has testAccumulation function
 PASS flood-opacity: [0, 1] number
 PASS flood-opacity: [0, 1] number (clamped)
 PASS font-stretch (type: percentage) has testAccumulation function
-FAIL font-stretch: percentage assert_equals: The value should be 130% at 0ms expected "130%" but got "70%"
+PASS font-stretch: percentage
 PASS font-style (type: discrete) has testAccumulation function
 FAIL font-style: "oblique" onto "italic" assert_equals: The value should be oblique at 0ms expected "oblique" but got "italic"
 PASS font-style: "italic" onto "oblique"

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

 This is a testharness.js-based test.
-Found 301 tests; 298 PASS, 3 FAIL, 0 TIMEOUT, 0 NOTRUN.
+Found 301 tests; 299 PASS, 2 FAIL, 0 TIMEOUT, 0 NOTRUN.
 PASS Setup
 PASS align-content (type: discrete) has testAddition function
 PASS align-content: "flex-end" onto "flex-start"
@@ -236,7 +236,7 @@ PASS flood-opacity (type: opacity) has testAddition function
 PASS flood-opacity: [0, 1] number
 PASS flood-opacity: [0, 1] number (clamped)
 PASS font-stretch (type: percentage) has testAddition function
-FAIL font-stretch: percentage assert_equals: The value should be 130% at 0ms expected "130%" but got "70%"
+PASS font-stretch: percentage
 PASS font-style (type: discrete) has testAddition function
 FAIL font-style: "oblique" onto "italic" assert_equals: The value should be oblique at 0ms expected "oblique" but got "italic"
 PASS font-style: "italic" onto "oblique"

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

 This is a testharness.js-based test.
-Found 373 tests; 358 PASS, 15 FAIL, 0 TIMEOUT, 0 NOTRUN.
+Found 373 tests; 359 PASS, 14 FAIL, 0 TIMEOUT, 0 NOTRUN.
 PASS Setup
 PASS align-content (type: discrete) has testInterpolation function
 PASS align-content uses discrete animation when animating between "flex-start" and "flex-end" with linear easing
@@ -285,7 +285,7 @@ PASS flood-color supports animating as color of hsla()
 PASS flood-opacity (type: opacity) has testInterpolation function
 PASS flood-opacity supports animating as a [0, 1] number
 PASS font-stretch (type: percentage) has testInterpolation function
-FAIL font-stretch supports animating as a percentage assert_equals: The value should be 30% at 500ms expected "30%" but got "50%"
+PASS font-stretch supports animating as a percentage
 PASS font-style (type: discrete) has testInterpolation function
 FAIL font-style uses discrete animation when animating between "italic" and "oblique" with linear easing assert_equals: The value should be oblique at 500ms expected "oblique" but got "italic"
 FAIL font-style uses discrete animation when animating between "italic" and "oblique" with effect easing assert_equals: The value should be oblique at 960ms expected "oblique" but got "italic"