Implement the font-optical-sizing property

Implement the CSS fonts property font-optical-sizing [1]. Typographic
optical sizing means that a font has slight variations in glyph contrast
to better optimize for legibility at different font sizes: The glyph
shapes vary between for example a headline font size and a body text
font size. The CSS font-optical-sizing property with its default value
of auto exists to automatically apply the current font size value to a
variable font's 'opsz' axis. This means, if a variable font supports the
'opsz' axis and optical sizing, the right value is automatically applied
without the need for an explicit font-variation-settings styling.

Intend to implement and ship:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/Y3lhEykjfV0

Chromestatus entry:
https://www.chromestatus.com/feature/5685958032752640

[1] https://drafts.csswg.org/css-fonts-4/#font-optical-sizing-def

Bug: 773697
Change-Id: Ifa4b6e042204a3fbf172b8cfe232821d8691283b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1795244
Commit-Queue: Dominik Röttsches <drott@chromium.org>
Reviewed-by: Robert Sesek <rsesek@chromium.org>
Reviewed-by: Koji Ishii <kojii@chromium.org>
Reviewed-by: Emil A Eklund <eae@chromium.org>
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#697197}

third_party/blink/public/mojom/use_counter/css_property_id.mojom

@@ -689,6 +689,7 @@ enum CSSSampleId {
     kOverscrollBehaviorInline = 644,
     kOverscrollBehaviorBlock = 645,
     kContentSize = 646,
+    kFontOpticalSizing = 647
     // 1. Add new features above this line (don't change the assigned numbers of
     // the existing items).
     // 2. Run the update_use_counter_css.py script in

third_party/blink/renderer/core/css/binary_data_font_face_source.cc

@@ -31,8 +31,8 @@ scoped_refptr<SimpleFontData> BinaryDataFontFaceSource::CreateFontData(
           font_description.IsSyntheticBold(),
           font_description.IsSyntheticItalic(),
           font_description.GetFontSelectionRequest(),
-          font_selection_capabilities, font_description.Orientation(),
-          font_description.VariationSettings()),
+          font_selection_capabilities, font_description.FontOpticalSizing(),
+          font_description.Orientation(), font_description.VariationSettings()),
       CustomFontData::Create());
 }
 

third_party/blink/renderer/core/css/css_computed_style_declaration.cc

@@ -85,34 +85,35 @@ const CSSPropertyID kComputedPropertyArray[] = {
     CSSPropertyID::kDirection, CSSPropertyID::kDisplay,
     CSSPropertyID::kEmptyCells, CSSPropertyID::kFloat,
     CSSPropertyID::kFontFamily, CSSPropertyID::kFontKerning,
-    CSSPropertyID::kFontSize, CSSPropertyID::kFontSizeAdjust,
-    CSSPropertyID::kFontStretch, CSSPropertyID::kFontStyle,
-    CSSPropertyID::kFontVariant, CSSPropertyID::kFontVariantLigatures,
-    CSSPropertyID::kFontVariantCaps, CSSPropertyID::kFontVariantNumeric,
-    CSSPropertyID::kFontVariantEastAsian, CSSPropertyID::kFontWeight,
-    CSSPropertyID::kHeight, CSSPropertyID::kImageOrientation,
-    CSSPropertyID::kImageRendering, CSSPropertyID::kIsolation,
-    CSSPropertyID::kJustifyItems, CSSPropertyID::kJustifySelf,
-    CSSPropertyID::kLeft, CSSPropertyID::kLetterSpacing,
-    CSSPropertyID::kLineHeight, CSSPropertyID::kLineHeightStep,
-    CSSPropertyID::kListStyleImage, CSSPropertyID::kListStylePosition,
-    CSSPropertyID::kListStyleType, CSSPropertyID::kMarginBottom,
-    CSSPropertyID::kMarginLeft, CSSPropertyID::kMarginRight,
-    CSSPropertyID::kMarginTop, CSSPropertyID::kMaxHeight,
-    CSSPropertyID::kMaxWidth, CSSPropertyID::kMinHeight,
-    CSSPropertyID::kMinWidth, CSSPropertyID::kMixBlendMode,
-    CSSPropertyID::kObjectFit, CSSPropertyID::kObjectPosition,
-    CSSPropertyID::kOffsetAnchor, CSSPropertyID::kOffsetDistance,
-    CSSPropertyID::kOffsetPath, CSSPropertyID::kOffsetPosition,
-    CSSPropertyID::kOffsetRotate, CSSPropertyID::kOpacity,
-    CSSPropertyID::kOrphans, CSSPropertyID::kOutlineColor,
-    CSSPropertyID::kOutlineOffset, CSSPropertyID::kOutlineStyle,
-    CSSPropertyID::kOutlineWidth, CSSPropertyID::kOverflowAnchor,
-    CSSPropertyID::kOverflowWrap, CSSPropertyID::kOverflowX,
-    CSSPropertyID::kOverflowY, CSSPropertyID::kPaddingBottom,
-    CSSPropertyID::kPaddingLeft, CSSPropertyID::kPaddingRight,
-    CSSPropertyID::kPaddingTop, CSSPropertyID::kPointerEvents,
-    CSSPropertyID::kPosition, CSSPropertyID::kResize, CSSPropertyID::kRight,
+    CSSPropertyID::kFontOpticalSizing, CSSPropertyID::kFontSize,
+    CSSPropertyID::kFontSizeAdjust, CSSPropertyID::kFontStretch,
+    CSSPropertyID::kFontStyle, CSSPropertyID::kFontVariant,
+    CSSPropertyID::kFontVariantLigatures, CSSPropertyID::kFontVariantCaps,
+    CSSPropertyID::kFontVariantNumeric, CSSPropertyID::kFontVariantEastAsian,
+    CSSPropertyID::kFontWeight, CSSPropertyID::kHeight,
+    CSSPropertyID::kImageOrientation, CSSPropertyID::kImageRendering,
+    CSSPropertyID::kIsolation, CSSPropertyID::kJustifyItems,
+    CSSPropertyID::kJustifySelf, CSSPropertyID::kLeft,
+    CSSPropertyID::kLetterSpacing, CSSPropertyID::kLineHeight,
+    CSSPropertyID::kLineHeightStep, CSSPropertyID::kListStyleImage,
+    CSSPropertyID::kListStylePosition, CSSPropertyID::kListStyleType,
+    CSSPropertyID::kMarginBottom, CSSPropertyID::kMarginLeft,
+    CSSPropertyID::kMarginRight, CSSPropertyID::kMarginTop,
+    CSSPropertyID::kMaxHeight, CSSPropertyID::kMaxWidth,
+    CSSPropertyID::kMinHeight, CSSPropertyID::kMinWidth,
+    CSSPropertyID::kMixBlendMode, CSSPropertyID::kObjectFit,
+    CSSPropertyID::kObjectPosition, CSSPropertyID::kOffsetAnchor,
+    CSSPropertyID::kOffsetDistance, CSSPropertyID::kOffsetPath,
+    CSSPropertyID::kOffsetPosition, CSSPropertyID::kOffsetRotate,
+    CSSPropertyID::kOpacity, CSSPropertyID::kOrphans,
+    CSSPropertyID::kOutlineColor, CSSPropertyID::kOutlineOffset,
+    CSSPropertyID::kOutlineStyle, CSSPropertyID::kOutlineWidth,
+    CSSPropertyID::kOverflowAnchor, CSSPropertyID::kOverflowWrap,
+    CSSPropertyID::kOverflowX, CSSPropertyID::kOverflowY,
+    CSSPropertyID::kPaddingBottom, CSSPropertyID::kPaddingLeft,
+    CSSPropertyID::kPaddingRight, CSSPropertyID::kPaddingTop,
+    CSSPropertyID::kPointerEvents, CSSPropertyID::kPosition,
+    CSSPropertyID::kResize, CSSPropertyID::kRight,
     CSSPropertyID::kScrollBehavior, CSSPropertyID::kScrollCustomization,
     CSSPropertyID::kSpeak, CSSPropertyID::kTableLayout, CSSPropertyID::kTabSize,
     CSSPropertyID::kTextAlign, CSSPropertyID::kTextAlignLast,

third_party/blink/renderer/core/css/css_font_face_source_test.cc

@@ -51,10 +51,10 @@ unsigned SimulateHashCalculation(float size) {
 TEST(CSSFontFaceSourceTest, HashCollision) {
   DummyFontFaceSource font_face_source;
   // Even if the hash value collide, fontface cache should return different
-  // value for different fonts.
-  EXPECT_EQ(SimulateHashCalculation(6009), SimulateHashCalculation(8634));
-  EXPECT_NE(font_face_source.GetFontDataForSize(6009),
-            font_face_source.GetFontDataForSize(8634));
+  // value for different fonts, values determined experimentally.
+  EXPECT_EQ(SimulateHashCalculation(10280), SimulateHashCalculation(9875));
+  EXPECT_NE(font_face_source.GetFontDataForSize(10280),
+            font_face_source.GetFontDataForSize(9875));
 }
 
 // Exercises the size font_data_table_ assertions in CSSFontFaceSource.

third_party/blink/renderer/core/css/css_primitive_value_mappings.h

@@ -753,6 +753,37 @@ inline FontDescription::Kerning CSSIdentifierValue::ConvertTo() const {
   return FontDescription::kAutoKerning;
 }
 
+template <>
+inline CSSIdentifierValue::CSSIdentifierValue(OpticalSizing optical_sizing)
+    : CSSValue(kIdentifierClass) {
+  switch (optical_sizing) {
+    case kAutoOpticalSizing:
+      value_id_ = CSSValueID::kAuto;
+      return;
+    case kNoneOpticalSizing:
+      value_id_ = CSSValueID::kNone;
+      return;
+  }
+
+  NOTREACHED();
+  value_id_ = CSSValueID::kAuto;
+}
+
+template <>
+inline OpticalSizing CSSIdentifierValue::ConvertTo() const {
+  switch (value_id_) {
+    case CSSValueID::kAuto:
+      return kAutoOpticalSizing;
+    case CSSValueID::kNone:
+      return kNoneOpticalSizing;
+    default:
+      break;
+  }
+
+  NOTREACHED();
+  return kAutoOpticalSizing;
+}
+
 template <>
 inline CSSIdentifierValue::CSSIdentifierValue(EFillSizeType fill_size)
     : CSSValue(kIdentifierClass) {

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

@@ -635,6 +635,17 @@
       keywords: ["auto", "normal", "none"],
       typedom_types: ["Keyword"],
     },
+    {
+      name: "font-optical-sizing",
+      property_methods: ["CSSValueFromComputedStyleInternal"],
+      inherited: true,
+      font: true,
+      name_for_methods: "FontOpticalSizing",
+      type_name: "OpticalSizing",
+      priority: "High",
+      keywords: ["auto", "none"],
+      typedom_types: ["Keyword"]
+    },
     {
       name: "font-size",
       property_methods: ["ParseSingleValue", "CSSValueFromComputedStyleInternal"],

third_party/blink/renderer/core/css/parser/css_parser_fast_paths.cc

@@ -886,6 +886,8 @@ bool CSSParserFastPaths::IsValidKeywordPropertyAndValue(
     case CSSPropertyID::kFontKerning:
       return value_id == CSSValueID::kAuto || value_id == CSSValueID::kNormal ||
              value_id == CSSValueID::kNone;
+    case CSSPropertyID::kFontOpticalSizing:
+      return value_id == CSSValueID::kAuto || value_id == CSSValueID::kNone;
     case CSSPropertyID::kWebkitFontSmoothing:
       return value_id == CSSValueID::kAuto || value_id == CSSValueID::kNone ||
              value_id == CSSValueID::kAntialiased ||
@@ -1061,6 +1063,7 @@ bool CSSParserFastPaths::IsKeywordPropertyID(CSSPropertyID property_id) {
     case CSSPropertyID::kFlexDirection:
     case CSSPropertyID::kFlexWrap:
     case CSSPropertyID::kFontKerning:
+    case CSSPropertyID::kFontOpticalSizing:
     case CSSPropertyID::kWebkitFontSmoothing:
     case CSSPropertyID::kLineBreak:
     case CSSPropertyID::kWebkitLineBreak:

third_party/blink/renderer/core/css/properties/longhands/longhands_custom.cc

@@ -2560,6 +2560,15 @@ const CSSValue* FontKerning::CSSValueFromComputedStyleInternal(
   return CSSIdentifierValue::Create(style.GetFontDescription().GetKerning());
 }
 
+const CSSValue* FontOpticalSizing::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject*,
+    bool allow_visited_style) const {
+  return CSSIdentifierValue::Create(
+      style.GetFontDescription().FontOpticalSizing());
+}
+
 const CSSValue* FontSizeAdjust::ParseSingleValue(
     CSSParserTokenRange& range,
     const CSSParserContext& context,

third_party/blink/renderer/core/css/remote_font_face_source.cc

@@ -252,8 +252,8 @@ scoped_refptr<SimpleFontData> RemoteFontFaceSource::CreateFontData(
           font_description.IsSyntheticBold(),
           font_description.IsSyntheticItalic(),
           font_description.GetFontSelectionRequest(),
-          font_selection_capabilities, font_description.Orientation(),
-          font_description.VariationSettings()),
+          font_selection_capabilities, font_description.FontOpticalSizing(),
+          font_description.Orientation(), font_description.VariationSettings()),
       CustomFontData::Create());
 }
 

third_party/blink/renderer/core/css/resolver/css_property_priority.h

@@ -87,7 +87,7 @@ inline CSSPropertyID CSSPropertyPriorityData<kHighPropertyPriority>::First() {
 template <>
 inline CSSPropertyID CSSPropertyPriorityData<kHighPropertyPriority>::Last() {
   static_assert(static_cast<int>(CSSPropertyID::kZoom) ==
-                    static_cast<int>(CSSPropertyID::kColor) + 26,
+                    static_cast<int>(CSSPropertyID::kColor) + 27,
                 "CSSPropertyID::kZoom should be the end of the high priority "
                 "property range");
   static_assert(static_cast<int>(CSSPropertyID::kWritingMode) ==

third_party/blink/renderer/core/css/resolver/font_builder.cc

@@ -182,6 +182,12 @@ void FontBuilder::SetKerning(FontDescription::Kerning kerning) {
   font_description_.SetKerning(kerning);
 }
 
+void FontBuilder::SetFontOpticalSizing(OpticalSizing font_optical_sizing) {
+  Set(PropertySetFlag::kFontOpticalSizing);
+
+  font_description_.SetFontOpticalSizing(font_optical_sizing);
+}
+
 void FontBuilder::SetFontSmoothing(FontSmoothingMode foont_smoothing_mode) {
   Set(PropertySetFlag::kFontSmoothing);
 
@@ -380,6 +386,8 @@ void FontBuilder::UpdateFontDescription(FontDescription& description,
     description.SetTextRendering(font_description_.TextRendering());
   if (IsSet(PropertySetFlag::kKerning))
     description.SetKerning(font_description_.GetKerning());
+  if (IsSet(PropertySetFlag::kFontOpticalSizing))
+    description.SetFontOpticalSizing(font_description_.FontOpticalSizing());
   if (IsSet(PropertySetFlag::kFontSmoothing))
     description.SetFontSmoothing(font_description_.FontSmoothing());
   if (IsSet(PropertySetFlag::kTextOrientation) ||

third_party/blink/renderer/core/css/resolver/font_builder.h

@@ -72,6 +72,7 @@ class CORE_EXPORT FontBuilder {
   void SetVariantNumeric(const FontVariantNumeric&);
   void SetTextRendering(TextRenderingMode);
   void SetKerning(FontDescription::Kerning);
+  void SetFontOpticalSizing(OpticalSizing);
   void SetFontSmoothing(FontSmoothingMode);
   void SetVariationSettings(scoped_refptr<FontVariationSettings>);
 
@@ -114,6 +115,7 @@ class CORE_EXPORT FontBuilder {
   static FontDescription::Kerning InitialKerning() {
     return FontDescription::kAutoKerning;
   }
+  static OpticalSizing InitialFontOpticalSizing() { return kAutoOpticalSizing; }
   static FontSmoothingMode InitialFontSmoothing() { return kAutoSmoothing; }
 
   static FontSelectionValue InitialStretch() { return NormalWidthValue(); }
@@ -156,6 +158,7 @@ class CORE_EXPORT FontBuilder {
     kVariationSettings,
     kTextRendering,
     kKerning,
+    kFontOpticalSizing,
     kFontSmoothing,
 
     kEffectiveZoom,

third_party/blink/renderer/core/css/resolver/font_builder_test.cc

@@ -167,6 +167,13 @@ static void FontKerningValue(FontBuilder& b) {
   b.SetKerning(FontDescription::kNoneKerning);
 }
 
+static void FontOpticalSizingBase(FontDescription& d) {
+  d.SetFontOpticalSizing(kAutoOpticalSizing);
+}
+static void FontOpticalSizingValue(FontBuilder& b) {
+  b.SetFontOpticalSizing(kNoneOpticalSizing);
+}
+
 static void FontFontSmoothingBase(FontDescription& d) {
   d.SetFontSmoothing(kAntialiased);
 }
@@ -207,6 +214,7 @@ INSTANTIATE_TEST_SUITE_P(
         FunctionPair(FontKerningBase, FontKerningValue),
         FunctionPair(FontFontSmoothingBase, FontFontSmoothingValue),
         FunctionPair(FontSizeBase, FontSizeValue),
-        FunctionPair(FontScriptBase, FontScriptValue)));
+        FunctionPair(FontScriptBase, FontScriptValue),
+        FunctionPair(FontOpticalSizingBase, FontOpticalSizingValue)));
 
 }  // namespace blink

third_party/blink/renderer/core/css/resolver/style_resolver.cc

@@ -1402,6 +1402,7 @@ static inline bool IsValidFirstLetterStyleProperty(CSSPropertyID id) {
     case CSSPropertyID::kFontFamily:
     case CSSPropertyID::kFontFeatureSettings:
     case CSSPropertyID::kFontKerning:
+    case CSSPropertyID::kFontOpticalSizing:
     case CSSPropertyID::kFontSize:
     case CSSPropertyID::kFontSizeAdjust:
     case CSSPropertyID::kFontStretch:

third_party/blink/renderer/platform/BUILD.gn

@@ -607,6 +607,8 @@ jumbo_component("platform") {
     "fonts/font_global_context.h",
     "fonts/font_metrics.cc",
     "fonts/font_metrics.h",
+    "fonts/font_optical_sizing.cc",
+    "fonts/font_optical_sizing.h",
     "fonts/font_orientation.cc",
     "fonts/font_orientation.h",
     "fonts/font_platform_data.cc",

third_party/blink/renderer/platform/fonts/font_custom_platform_data.cc

@@ -67,6 +67,7 @@ FontPlatformData FontCustomPlatformData::GetFontPlatformData(
     bool italic,
     const FontSelectionRequest& selection_request,
     const FontSelectionCapabilities& selection_capabilities,
+    const OpticalSizing& optical_sizing,
     FontOrientation orientation,
     const FontVariationSettings* variation_settings) {
   DCHECK(base_typeface_);
@@ -105,15 +106,24 @@ FontPlatformData FontCustomPlatformData::GetFontPlatformData(
     axes.push_back(width_axis);
     axes.push_back(slant_axis);
 
+    bool explicit_opsz_configured = false;
     if (variation_settings && variation_settings->size() < UINT16_MAX) {
       axes.ReserveCapacity(variation_settings->size() + axes.size());
       for (const auto& setting : *variation_settings) {
+        if (setting.Tag() == AtomicString("opsz"))
+          explicit_opsz_configured = true;
         SkFontArguments::Axis axis = {AtomicStringToFourByteTag(setting.Tag()),
                                       SkFloatToScalar(setting.Value())};
         axes.push_back(axis);
       }
     }
 
+    if (optical_sizing == kAutoOpticalSizing && !explicit_opsz_configured) {
+      SkFontArguments::Axis opsz_axis = {SkSetFourByteTag('o', 'p', 's', 'z'),
+                                         SkFloatToScalar(size)};
+      axes.push_back(opsz_axis);
+    }
+
     int index;
     std::unique_ptr<SkStreamAsset> stream(base_typeface_->openStream(&index));
     sk_sp<SkTypeface> sk_variation_font(FontManagerForSubType(font_sub_type)

third_party/blink/renderer/platform/fonts/font_custom_platform_data.h

@@ -33,6 +33,7 @@
 #define THIRD_PARTY_BLINK_RENDERER_PLATFORM_FONTS_FONT_CUSTOM_PLATFORM_DATA_H_
 
 #include "base/macros.h"
+#include "third_party/blink/renderer/platform/fonts/font_optical_sizing.h"
 #include "third_party/blink/renderer/platform/fonts/font_orientation.h"
 #include "third_party/blink/renderer/platform/fonts/font_selection_types.h"
 #include "third_party/blink/renderer/platform/platform_export.h"
@@ -64,6 +65,7 @@ class PLATFORM_EXPORT FontCustomPlatformData
       bool italic,
       const FontSelectionRequest&,
       const FontSelectionCapabilities&,
+      const OpticalSizing& optical_sizing,
       FontOrientation = FontOrientation::kHorizontal,
       const FontVariationSettings* = nullptr);
 

third_party/blink/renderer/platform/fonts/font_description.cc

@@ -93,6 +93,7 @@ FontDescription::FontDescription()
   fields_.typesetting_features_ = default_typesetting_features_;
   fields_.variant_numeric_ = FontVariantNumeric().fields_as_unsigned_;
   fields_.subpixel_ascent_descent_ = false;
+  fields_.font_optical_sizing_ = OpticalSizing::kAutoOpticalSizing;
 }
 
 FontDescription::FontDescription(const FontDescription&) = default;
@@ -217,11 +218,12 @@ FontCacheKey FontDescription::CacheKey(
     bool is_unique_match,
     const FontSelectionRequest& font_selection_request) const {
   unsigned options =
-      static_cast<unsigned>(fields_.synthetic_italic_) << 6 |  // bit 7
-      static_cast<unsigned>(fields_.synthetic_bold_) << 5 |    // bit 6
-      static_cast<unsigned>(fields_.text_rendering_) << 3 |    // bits 4-5
-      static_cast<unsigned>(fields_.orientation_) << 1 |       // bit 2-3
-      static_cast<unsigned>(fields_.subpixel_text_position_);  // bit 1
+      static_cast<unsigned>(fields_.font_optical_sizing_) << 7 |  // bit 8
+      static_cast<unsigned>(fields_.synthetic_italic_) << 6 |     // bit 7
+      static_cast<unsigned>(fields_.synthetic_bold_) << 5 |       // bit 6
+      static_cast<unsigned>(fields_.text_rendering_) << 3 |       // bits 4-5
+      static_cast<unsigned>(fields_.orientation_) << 1 |          // bit 2-3
+      static_cast<unsigned>(fields_.subpixel_text_position_);     // bit 1
 
 #if defined(OS_LINUX) || defined(OS_CHROMEOS)
   float device_scale_factor_for_key = FontCache::DeviceScaleFactor();
@@ -229,7 +231,7 @@ FontCacheKey FontDescription::CacheKey(
   float device_scale_factor_for_key = 1.0f;
 #endif
   FontCacheKey cache_key(creation_params, EffectiveFontSize(),
-                         options | font_selection_request_.GetHash() << 8,
+                         options | font_selection_request_.GetHash() << 9,
                          device_scale_factor_for_key, variation_settings_,
                          is_unique_match);
   return cache_key;
@@ -496,7 +498,7 @@ String FontDescription::ToString() const {
       "keyword_size=%u, font_smoothing=%s, text_rendering=%s, "
       "synthetic_bold=%s, synthetic_italic=%s, subpixel_positioning=%s, "
       "subpixel_ascent_descent=%s, variant_numeric=[%s], "
-      "variant_east_asian=[%s]",
+      "variant_east_asian=[%s], font_optical_sizing=%s",
       family_list_.ToString().Ascii().c_str(),
       (feature_settings_ ? feature_settings_->ToString().Ascii().c_str() : ""),
       (variation_settings_ ? variation_settings_->ToString().Ascii().c_str()
@@ -524,7 +526,8 @@ String FontDescription::ToString() const {
       ToBooleanString(UseSubpixelPositioning()),
       ToBooleanString(SubpixelAscentDescent()),
       VariantNumeric().ToString().Ascii().c_str(),
-      VariantEastAsian().ToString().Ascii().c_str());
+      VariantEastAsian().ToString().Ascii().c_str(),
+      blink::ToString(FontOpticalSizing()).Ascii().c_str());
 }
 
 }  // namespace blink

third_party/blink/renderer/platform/fonts/font_description.h

@@ -32,6 +32,7 @@
 #include "third_party/blink/renderer/platform/font_family_names.h"
 #include "third_party/blink/renderer/platform/fonts/font_cache_key.h"
 #include "third_party/blink/renderer/platform/fonts/font_family.h"
+#include "third_party/blink/renderer/platform/fonts/font_optical_sizing.h"
 #include "third_party/blink/renderer/platform/fonts/font_orientation.h"
 #include "third_party/blink/renderer/platform/fonts/font_selection_types.h"
 #include "third_party/blink/renderer/platform/fonts/font_smoothing_mode.h"
@@ -206,6 +207,9 @@ class PLATFORM_EXPORT FontDescription {
   FontSmoothingMode FontSmoothing() const {
     return static_cast<FontSmoothingMode>(fields_.font_smoothing_);
   }
+  OpticalSizing FontOpticalSizing() const {
+    return static_cast<OpticalSizing>(fields_.font_optical_sizing_);
+  }
   TextRenderingMode TextRendering() const {
     return static_cast<TextRenderingMode>(fields_.text_rendering_);
   }
@@ -282,6 +286,9 @@ class PLATFORM_EXPORT FontDescription {
   void SetFontSmoothing(FontSmoothingMode smoothing) {
     fields_.font_smoothing_ = smoothing;
   }
+  void SetFontOpticalSizing(OpticalSizing font_optical_sizing) {
+    fields_.font_optical_sizing_ = font_optical_sizing;
+  }
   void SetTextRendering(TextRenderingMode rendering) {
     fields_.text_rendering_ = rendering;
     UpdateTypesettingFeatures();
@@ -413,6 +420,7 @@ class PLATFORM_EXPORT FontDescription {
     unsigned variant_numeric_ : 8;
     unsigned variant_east_asian_ : 6;
     mutable unsigned subpixel_ascent_descent_ : 1;
+    unsigned font_optical_sizing_ : 1;
   };
 
   static_assert(sizeof(BitFields) == sizeof(FieldsAsUnsignedType),

third_party/blink/renderer/platform/fonts/font_description_test.cc

@@ -116,7 +116,7 @@ TEST(FontDescriptionTest, ToString) {
       "variant_numeric=[numeric_figure=NormalFigure, "
       "numeric_spacing=NormalSpacing, numeric_fraction=Normal, ordinal=Off, "
       "slashed_zero=Off], variant_east_asian=[form=Normal, width=Normal, "
-      "ruby=false]",
+      "ruby=false], font_optical_sizing=Auto",
       description.ToString());
 }
 

third_party/blink/renderer/platform/fonts/font_optical_sizing.cc

+// Copyright 2019 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/platform/fonts/font_optical_sizing.h"
+
+namespace blink {
+
+String ToString(OpticalSizing font_optical_sizing) {
+  switch (font_optical_sizing) {
+    case OpticalSizing::kAutoOpticalSizing:
+      return "Auto";
+    case OpticalSizing::kNoneOpticalSizing:
+      return "None";
+  }
+  return "Unknown";
+}
+
+}  // namespace blink

third_party/blink/renderer/platform/fonts/font_optical_sizing.h

+// Copyright 2019 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_PLATFORM_FONTS_FONT_OPTICAL_SIZING_H_
+#define THIRD_PARTY_BLINK_RENDERER_PLATFORM_FONTS_FONT_OPTICAL_SIZING_H_
+
+#include "third_party/blink/renderer/platform/platform_export.h"
+#include "third_party/blink/renderer/platform/wtf/text/wtf_string.h"
+
+namespace blink {
+enum OpticalSizing { kAutoOpticalSizing, kNoneOpticalSizing };
+
+PLATFORM_EXPORT String ToString(OpticalSizing);
+}  // namespace blink
+
+#endif  // THIRD_PARTY_BLINK_RENDERER_PLATFORM_FONTS_FONT_OPTICAL_SIZING_H_

third_party/blink/renderer/platform/testing/font_test_helpers.cc

@@ -43,7 +43,7 @@ class TestFontSelector : public FontSelector {
         font_description.IsSyntheticBold(),
         font_description.IsSyntheticItalic(),
         font_description.GetFontSelectionRequest(), normal_capabilities,
-        font_description.Orientation());
+        font_description.FontOpticalSizing(), font_description.Orientation());
     return SimpleFontData::Create(platform_data, CustomFontData::Create());
   }
 

third_party/blink/web_tests/external/wpt/css/css-fonts/variations/variable-opsz-ref.html

+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<style>
+    @font-face {
+    font-family: variabletest_box;
+    src: url(resources/variabletest_box.ttf);
+    }
+
+    body {
+    font-family: variabletest_box, sans-serif;
+    font-optical-sizing: none;
+    }
+</style>
+<div style="font-size:   6px; font-variation-settings: 'opsz'    6;">B</div>
+<div style="font-size:  12px; font-variation-settings: 'opsz'   12;">B</div>
+<div style="font-size:  24px; font-variation-settings: 'opsz'   24;">B</div>
+<div style="font-size:  48px; font-variation-settings: 'opsz'   48;">B</div>
+<div style="font-size:  64px; font-variation-settings: 'opsz'   64;">B</div>
+<div style="font-size: 128px; font-variation-settings: 'opsz'  128;">B</div>
+<div style="font-size:  24px; font-variation-settings: 'opsz'  128;">B</div>
+<div style="font-size:  48px; font-variation-settings: 'opsz'   12;">B</div>
+<script>
+    document.fonts.ready.then(
+        () => { document.documentElement.classList.remove("reftest-wait"); });
+</script>
+</html>

third_party/blink/web_tests/external/wpt/css/css-fonts/variations/variable-opsz.html

+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="author" title="Dominik Röttsches" href="drott@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-optical-sizing-def"/>
+<meta name="assert" content="Ensures that optical size is automatically applied."/>
+<link rel="match" href="variable-opsz-ref.html">
+<meta charset="utf-8">
+<style>
+    @font-face {
+    font-family: variabletest_box;
+    src: url(resources/variabletest_box.ttf);
+    }
+
+    body {
+    font-family: variabletest_box, sans-serif;
+    }
+</style>
+<!-- The variabletest_box font file contains a glyph for letter B which moves a
+  horizontal bar up from the middle for opsz > 12 and moves it down for opsz >
+  12 where the opsz axis ranges from 12 to 128. -->
+<div style="font-size:   6px;">B</div>
+<div style="font-size:  12px;">B</div>
+<div style="font-size:  24px;">B</div>
+<div style="font-size:  48px;">B</div>
+<div style="font-size:  64px;">B</div>
+<div style="font-size: 128px;">B</div>
+<!-- Explicit value overrides auto. -->
+<div style="font-size:  24px; font-variation-settings: 'opsz' 128;">B</div>
+<div style="font-size:  48px; font-optical-sizing: none;">B</div>
+<script>
+    document.fonts.ready.then(
+        () => { document.documentElement.classList.remove("reftest-wait"); });
+</script>
+</html>

third_party/blink/web_tests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/font-optical-sizing-expected.txt

-This is a testharness.js-based test.
-FAIL Can set 'font-optical-sizing' to CSS-wide keywords Failed to execute 'set' on 'StylePropertyMap': Invalid propertyName: font-optical-sizing
-FAIL Can set 'font-optical-sizing' to var() references Failed to execute 'set' on 'StylePropertyMap': Invalid propertyName: font-optical-sizing
-FAIL Can set 'font-optical-sizing' to the 'auto' keyword Failed to execute 'set' on 'StylePropertyMap': Invalid propertyName: font-optical-sizing
-FAIL Can set 'font-optical-sizing' to the 'none' keyword Failed to execute 'set' on 'StylePropertyMap': Invalid propertyName: font-optical-sizing
-PASS Setting 'font-optical-sizing' to a length throws TypeError
-PASS Setting 'font-optical-sizing' to a percent throws TypeError
-PASS Setting 'font-optical-sizing' to a time throws TypeError
-PASS Setting 'font-optical-sizing' to an angle throws TypeError
-PASS Setting 'font-optical-sizing' to a flexible length throws TypeError
-PASS Setting 'font-optical-sizing' to a number throws TypeError
-PASS Setting 'font-optical-sizing' to a position throws TypeError
-PASS Setting 'font-optical-sizing' to a URL throws TypeError
-PASS Setting 'font-optical-sizing' to a transform throws TypeError
-Harness: the test ran to completion.
-

third_party/blink/web_tests/fast/css/getComputedStyle/computed-style-empty-font-family-expected.txt

@@ -2,6 +2,7 @@ Font attributes. The font-family should list the empty string:
 
 font-family: "";
 font-kerning: auto;
+font-optical-sizing: auto;
 font-size: 16px;
 font-size-adjust: none;
 font-stretch: 100%;

third_party/blink/web_tests/fast/css/getComputedStyle/computed-style-font-family-expected.txt

@@ -2,6 +2,7 @@ Font attributes. The font-family should list three families:
 
 font-family: monospace, "Lucida Grande", sans-serif;
 font-kerning: auto;
+font-optical-sizing: auto;
 font-size: 16px;
 font-size-adjust: none;
 font-stretch: 100%;

third_party/blink/web_tests/fast/css/getComputedStyle/computed-style-listing-expected.txt

@@ -148,6 +148,7 @@ float: none
 flood-color: rgb(0, 0, 0)
 flood-opacity: 1
 font-kerning: auto
+font-optical-sizing: auto
 font-size: 16px
 font-size-adjust: none
 font-stretch: 100%

third_party/blink/web_tests/fast/css/getComputedStyle/computed-style-without-renderer-listing-expected.txt

@@ -148,6 +148,7 @@ float: none
 flood-color: rgb(0, 0, 0)
 flood-opacity: 1
 font-kerning: auto
+font-optical-sizing: auto
 font-size: 16px
 font-size-adjust: none
 font-stretch: 100%

third_party/blink/web_tests/platform/linux/external/wpt/css/css-transitions/Element-getAnimations.tentative-expected.txt

+This is a testharness.js-based test.
+PASS getAnimations returns one Animation per transitioning property
+PASS getAnimations returns CSSTransition objects for CSS Transitions
+PASS getAnimations does not return finished CSS Transitions
+PASS getAnimations does not return a transition for a non-animatable property
+PASS getAnimations does not return a transition for an unsupposed property
+FAIL getAnimations sorts simultaneous transitions by name assert_equals: expected "border-left-width" but got "opacity"
+PASS getAnimations sorts transitions by when they were generated
+Harness: the test ran to completion.
+

third_party/blink/web_tests/platform/mac/external/wpt/css/css-transitions/Element-getAnimations.tentative-expected.txt

+This is a testharness.js-based test.
+PASS getAnimations returns one Animation per transitioning property
+PASS getAnimations returns CSSTransition objects for CSS Transitions
+PASS getAnimations does not return finished CSS Transitions
+PASS getAnimations does not return a transition for a non-animatable property
+PASS getAnimations does not return a transition for an unsupposed property
+FAIL getAnimations sorts simultaneous transitions by name assert_equals: expected "border-left-width" but got "opacity"
+PASS getAnimations sorts transitions by when they were generated
+Harness: the test ran to completion.
+

third_party/blink/web_tests/platform/win/external/wpt/css/css-transitions/Element-getAnimations.tentative-expected.txt

+This is a testharness.js-based test.
+PASS getAnimations returns one Animation per transitioning property
+PASS getAnimations returns CSSTransition objects for CSS Transitions
+PASS getAnimations does not return finished CSS Transitions
+PASS getAnimations does not return a transition for a non-animatable property
+PASS getAnimations does not return a transition for an unsupposed property
+FAIL getAnimations sorts simultaneous transitions by name assert_equals: expected "border-left-width" but got "opacity"
+PASS getAnimations sorts transitions by when they were generated
+Harness: the test ran to completion.
+

third_party/blink/web_tests/svg/css/getComputedStyle-listing-expected.txt

@@ -148,6 +148,7 @@ float: none
 flood-color: rgb(0, 0, 0)
 flood-opacity: 1
 font-kerning: auto
+font-optical-sizing: auto
 font-size: 16px
 font-size-adjust: none
 font-stretch: 100%

third_party/blink/web_tests/virtual/stable/webexposed/css-properties-as-js-properties-expected.txt

@@ -142,6 +142,7 @@ fontDisplay
 fontFamily
 fontFeatureSettings
 fontKerning
+fontOpticalSizing
 fontSize
 fontStretch
 fontStyle

third_party/blink/web_tests/virtual/stable/webexposed/css-property-listing-expected.txt

@@ -176,6 +176,7 @@ All changes to this list should go through Blink's feature review process: http:
     font-family
     font-feature-settings
     font-kerning
+    font-optical-sizing
     font-size
     font-stretch
     font-style

third_party/blink/web_tests/webexposed/css-properties-as-js-properties-expected.txt

@@ -151,6 +151,7 @@ fontDisplay
 fontFamily
 fontFeatureSettings
 fontKerning
+fontOpticalSizing
 fontSize
 fontSizeAdjust
 fontStretch

third_party/blink/web_tests/webexposed/css-property-listing-expected.txt

@@ -177,6 +177,7 @@ All changes to this list should go through Blink's feature review process: http:
     font-family
     font-feature-settings
     font-kerning
+    font-optical-sizing
     font-size
     font-size-adjust
     font-stretch