Support from-font keyword in text-underline-position

Support parsing and serialisation of the new from-font keyword in
text-underline-position.

Introduce a RuntimeEnabledFeatures flag UnderlineOffsetThickness for
guarding new underline features.

Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/D6S8JRPYtDA

Bug: 1067242
Change-Id: Id118e538af20276929fe92d235ce1920c0f6234a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2120715
Commit-Queue: Dominik Röttsches <drott@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#755853}

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

@@ -1957,6 +1957,9 @@ inline CSSIdentifierValue::CSSIdentifierValue(TextUnderlinePosition position)
     case kTextUnderlinePositionAuto:
       value_id_ = CSSValueID::kAuto;
       break;
+    case kTextUnderlinePositionFromFont:
+      value_id_ = CSSValueID::kFromFont;
+      break;
     case kTextUnderlinePositionUnder:
       value_id_ = CSSValueID::kUnder;
       break;
@@ -1974,6 +1977,8 @@ inline TextUnderlinePosition CSSIdentifierValue::ConvertTo() const {
   switch (GetValueID()) {
     case CSSValueID::kAuto:
       return kTextUnderlinePositionAuto;
+    case CSSValueID::kFromFont:
+      return kTextUnderlinePositionFromFont;
     case CSSValueID::kUnder:
       return kTextUnderlinePositionUnder;
     case CSSValueID::kLeft:

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

@@ -3547,13 +3547,13 @@
       property_methods: ["ParseSingleValue", "CSSValueFromComputedStyleInternal"],
       inherited: true,
       field_group: "*",
-      field_size: 3,
+      field_size: 4,
       field_template: "primitive",
       default_value: "kTextUnderlinePositionAuto",
       name_for_methods: "TextUnderlinePosition",
       type_name: "unsigned",
       converter: "ConvertTextUnderlinePosition",
-      keywords: ["auto", "under", "left", "right"],
+      keywords: ["auto", "from-font", "under", "left", "right"],
       typedom_types: ["Keyword"],
       valid_for_first_letter: true,
     },

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

@@ -623,6 +623,13 @@
     // auto
     // none
 
+    // text-underline-position
+    // auto
+    "from-font",
+    // under
+    // left
+    // right
+
     //
     // word-break
     //

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

@@ -6302,7 +6302,8 @@ const CSSValue* TextTransform::CSSValueFromComputedStyleInternal(
   return CSSIdentifierValue::Create(style.TextTransform());
 }
 
-// auto | [ under || [ left | right ] ]
+// https://drafts.csswg.org/css-text-decor-4/#text-underline-position-property
+// auto | [ from-font | under ] || [ left | right ] - default: auto
 const CSSValue* TextUnderlinePosition::ParseSingleValue(
     CSSParserTokenRange& range,
     const CSSParserContext& context,
@@ -6310,21 +6311,29 @@ const CSSValue* TextUnderlinePosition::ParseSingleValue(
   if (range.Peek().Id() == CSSValueID::kAuto)
     return css_property_parser_helpers::ConsumeIdent(range);
 
-  CSSIdentifierValue* under_value =
-      css_property_parser_helpers::ConsumeIdent<CSSValueID::kUnder>(range);
+  CSSIdentifierValue* from_font_or_under_value =
+      RuntimeEnabledFeatures::UnderlineOffsetThicknessEnabled()
+          ? css_property_parser_helpers::ConsumeIdent<CSSValueID::kFromFont,
+                                                      CSSValueID::kUnder>(range)
+          : css_property_parser_helpers::ConsumeIdent<CSSValueID::kUnder>(
+                range);
   CSSIdentifierValue* left_or_right_value =
       css_property_parser_helpers::ConsumeIdent<CSSValueID::kLeft,
                                                 CSSValueID::kRight>(range);
-  if (left_or_right_value && !under_value) {
-    under_value =
-        css_property_parser_helpers::ConsumeIdent<CSSValueID::kUnder>(range);
+  if (left_or_right_value && !from_font_or_under_value) {
+    from_font_or_under_value =
+        RuntimeEnabledFeatures::UnderlineOffsetThicknessEnabled()
+            ? css_property_parser_helpers::ConsumeIdent<CSSValueID::kFromFont,
+                                                        CSSValueID::kUnder>(
+                  range)
+            : css_property_parser_helpers::ConsumeIdent<CSSValueID::kUnder>(
+                  range);
   }
-  if (!under_value && !left_or_right_value) {
+  if (!from_font_or_under_value && !left_or_right_value)
     return nullptr;
-  }
   CSSValueList* list = CSSValueList::CreateSpaceSeparated();
-  if (under_value)
-    list->Append(*under_value);
+  if (from_font_or_under_value)
+    list->Append(*from_font_or_under_value);
   if (left_or_right_value)
     list->Append(*left_or_right_value);
   return list;
@@ -6338,6 +6347,8 @@ const CSSValue* TextUnderlinePosition::CSSValueFromComputedStyleInternal(
   auto text_underline_position = style.TextUnderlinePosition();
   if (text_underline_position == kTextUnderlinePositionAuto)
     return CSSIdentifierValue::Create(CSSValueID::kAuto);
+  if (text_underline_position == kTextUnderlinePositionFromFont)
+    return CSSIdentifierValue::Create(CSSValueID::kFromFont);
   if (text_underline_position == kTextUnderlinePositionUnder)
     return CSSIdentifierValue::Create(CSSValueID::kUnder);
   if (text_underline_position == kTextUnderlinePositionLeft)
@@ -6346,8 +6357,12 @@ const CSSValue* TextUnderlinePosition::CSSValueFromComputedStyleInternal(
     return CSSIdentifierValue::Create(CSSValueID::kRight);
 
   CSSValueList* list = CSSValueList::CreateSpaceSeparated();
-  DCHECK(text_underline_position & kTextUnderlinePositionUnder);
-  list->Append(*CSSIdentifierValue::Create(CSSValueID::kUnder));
+  if (text_underline_position & kTextUnderlinePositionFromFont) {
+    list->Append(*CSSIdentifierValue::Create(CSSValueID::kFromFont));
+  } else {
+    DCHECK(text_underline_position & kTextUnderlinePositionUnder);
+    list->Append(*CSSIdentifierValue::Create(CSSValueID::kUnder));
+  }
   if (text_underline_position & kTextUnderlinePositionLeft)
     list->Append(*CSSIdentifierValue::Create(CSSValueID::kLeft));
   if (text_underline_position & kTextUnderlinePositionRight)

third_party/blink/renderer/core/style/computed_style_constants.h

@@ -179,12 +179,13 @@ inline Containment& operator|=(Containment& a, Containment b) {
   return a = a | b;
 }
 
-static const size_t kTextUnderlinePositionBits = 3;
+static const size_t kTextUnderlinePositionBits = 4;
 enum TextUnderlinePosition {
   kTextUnderlinePositionAuto = 0x0,
-  kTextUnderlinePositionUnder = 0x1,
-  kTextUnderlinePositionLeft = 0x2,
-  kTextUnderlinePositionRight = 0x4
+  kTextUnderlinePositionFromFont = 0x1,
+  kTextUnderlinePositionUnder = 0x2,
+  kTextUnderlinePositionLeft = 0x4,
+  kTextUnderlinePositionRight = 0x8
 };
 inline TextUnderlinePosition operator|(TextUnderlinePosition a,
                                        TextUnderlinePosition b) {

third_party/blink/renderer/platform/runtime_enabled_features.json5

@@ -1733,6 +1733,10 @@
       name: "UnclosedFormControlIsInvalid",
       status: "experimental",
     },
+    {
+      name: "UnderlineOffsetThickness",
+      status: "test",
+    },
     {
       name: "UnifiedPointerCaptureInBlink",
       status: "stable",

third_party/blink/web_tests/external/wpt/css/css-text-decor/parsing/text-underline-position-computed.html

@@ -15,9 +15,11 @@
 test_computed_value("text-underline-position", "auto");
 
 test_computed_value("text-underline-position", "under");
+test_computed_value("text-underline-position", "from-font");
 test_computed_value("text-underline-position", "left");
 test_computed_value("text-underline-position", "right");
 test_computed_value("text-underline-position", "under left");
+test_computed_value("text-underline-position", "from-font left");
 </script>
 </body>
 </html>

third_party/blink/web_tests/external/wpt/css/css-text-decor/parsing/text-underline-position-invalid.html

@@ -8,7 +8,9 @@
 <script src="/css/support/parsing-testcommon.js"></script>
 <script>
 test_invalid_value("text-underline-position", "auto under");
+test_invalid_value("text-underline-position", "auto from-font");
 test_invalid_value("text-underline-position", "left auto");
 test_invalid_value("text-underline-position", "left right");
 test_invalid_value("text-underline-position", "right under left");
+test_invalid_value("text-underline-position", "under from-font");
 </script>

third_party/blink/web_tests/external/wpt/css/css-text-decor/parsing/text-underline-position-valid.html

@@ -10,8 +10,11 @@
 test_valid_value("text-underline-position", "auto");
 
 test_valid_value("text-underline-position", "under");
+test_valid_value("text-underline-position", "from-font");
 test_valid_value("text-underline-position", "left");
 test_valid_value("text-underline-position", "right");
 test_valid_value("text-underline-position", "under left");
+test_valid_value("text-underline-position", "from-font left");
 test_valid_value("text-underline-position", "right under", "under right");
+test_valid_value("text-underline-position", "right from-font", "from-font right");
 </script>