TextControl NG: Implement block centering

This CL ports LayoutTextControlSingleLine::UpdateLayout() to LayoutNG by
 * Adding "-internal-align-self-block" CSS property
 * Implementing centering behavior in NGBlockLayoutAlgorithm
 * Apply the property to text field's InnerEditor boxes and decoration
   container boxes

"-internal-align-self-block" will be applied to button's anonymous block
and slider's track box too.

This CL has no behavior changes for now, but it fixes dozens of web test
failures with LayoutNGTextFields flag.

Bug: 1040826, 1131352
Change-Id: Iaa75fdd53ce428c90b12fd695f49752da0ea9247
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2491766Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Koji Ishii <kojii@chromium.org>
Commit-Queue: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#821061}

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

@@ -15,6 +15,7 @@ enum CSSSampleId {
 
     // These internal properties exist but are mapped to 0 to ensure they don't get
     // reported in use counter.
+    kInternalAlignSelfBlock = 0,
     kInternalEmptyLineHeight = 0,
     kInternalVisitedBackgroundColor = 0,
     kInternalVisitedBorderBlockEndColor = 0,

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

@@ -6016,6 +6016,24 @@
       converter: "ConvertInternalEmptyLineHeight",
     },
 
+    // Name: -internal-align-self-block:
+    // Value: normal | center
+    // Applies to: A block child in a normal blow flow context
+    //    If 'center' is specified and the container's block size is not auto,
+    //    it works like "align-self: center" for grid/flex items.
+    //    The block child should create new block formatting context.
+    {
+      name: "-internal-align-self-block",
+      property_methods: ["ParseSingleValue"],
+      inherited: false,
+      field_group: "*",
+      field_template: "primitive",
+      type_name: "bool",
+      default_value: "false",
+      name_for_methods: "AlignSelfBlockCenter",
+      converter: "ConvertInternalAlignSelfBlock",
+    },
+
     // Aliases; these map to the same CSSPropertyID
     {
       name: "-epub-caption-side",

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

@@ -8476,6 +8476,14 @@ void Zoom::ApplyValue(StyleResolverState& state, const CSSValue& value) const {
   state.SetZoom(StyleBuilderConverter::ConvertZoom(state, value));
 }
 
+const CSSValue* InternalAlignSelfBlock::ParseSingleValue(
+    CSSParserTokenRange& range,
+    const CSSParserContext&,
+    const CSSParserLocalContext&) const {
+  return css_parsing_utils::ConsumeIdent<CSSValueID::kCenter,
+                                         CSSValueID::kNormal>(range);
+}
+
 const CSSValue* InternalEmptyLineHeight::ParseSingleValue(
     CSSParserTokenRange& range,
     const CSSParserContext&,

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

@@ -2057,6 +2057,14 @@ StyleAspectRatio StyleBuilderConverter::ConvertAspectRatio(
   return StyleAspectRatio(type, ratio);
 }
 
+bool StyleBuilderConverter::ConvertInternalAlignSelfBlock(
+    StyleResolverState&,
+    const CSSValue& value) {
+  auto* identifier_value = DynamicTo<CSSIdentifierValue>(value);
+  return identifier_value &&
+         identifier_value->GetValueID() == CSSValueID::kCenter;
+}
+
 bool StyleBuilderConverter::ConvertInternalEmptyLineHeight(
     StyleResolverState&,
     const CSSValue& value) {

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

@@ -282,6 +282,8 @@ class StyleBuilderConverter {
   static StyleAspectRatio ConvertAspectRatio(StyleResolverState&,
                                              const CSSValue&);
 
+  static bool ConvertInternalAlignSelfBlock(StyleResolverState& state,
+                                            const CSSValue& value);
   static bool ConvertInternalEmptyLineHeight(StyleResolverState& state,
                                              const CSSValue& value);
 

third_party/blink/renderer/core/html/forms/text_control_inner_elements.cc

@@ -206,6 +206,9 @@ TextControlInnerEditorElement::CreateInnerEditorStyle() const {
     no_scrollbar_style->SetDisplay(EDisplay::kNone);
     text_block_style->AddCachedPseudoElementStyle(no_scrollbar_style);
     text_block_style->SetHasPseudoElementStyle(kPseudoIdScrollbar);
+
+    text_block_style->SetDisplay(EDisplay::kFlowRoot);
+    text_block_style->SetAlignSelfBlockCenter(true);
   }
 
   return text_block_style;

third_party/blink/renderer/core/html/resources/html.css

@@ -438,10 +438,11 @@ input[type="search" i] {
 }
 
 input::-webkit-textfield-decoration-container {
-    display: flex;
+    display: flex !important;
     align-items: center;
     -webkit-user-modify: read-only !important;
     content: none !important;
+    -internal-align-self-block: center;
 }
 
 input::-webkit-clear-button {

third_party/blink/renderer/core/layout/ng/ng_block_layout_algorithm.cc

@@ -60,6 +60,18 @@ bool HasLineEvenIfEmpty(LayoutBox* box) {
   return NGInlineNode(block_flow).HasLineEvenIfEmpty();
 }
 
+LogicalOffset CenterBlockChild(LogicalOffset offset,
+                               LayoutUnit available_block_size,
+                               LayoutUnit child_block_size) {
+  if (available_block_size == child_block_size)
+    return offset;
+  // We don't clamp a negative difference to zero. We'd like to center the
+  // child even if its taller than the container.
+  LayoutUnit block_size_diff = available_block_size - child_block_size;
+  offset.block_offset += block_size_diff / 2 + LayoutMod(block_size_diff, 2);
+  return offset;
+}
+
 inline scoped_refptr<const NGLayoutResult> LayoutBlockChild(
     const NGConstraintSpace& space,
     const NGBreakToken* break_token,
@@ -1367,6 +1379,12 @@ NGLayoutResult::EStatus NGBlockLayoutAlgorithm::HandleNewFormattingContext(
                                      previous_inflow_position))
     return NGLayoutResult::kBfcBlockOffsetResolved;
 
+  if (UNLIKELY(child.Style().AlignSelfBlockCenter() &&
+               ChildAvailableSize().block_size != kIndefiniteSize)) {
+    logical_offset = CenterBlockChild(
+        logical_offset, ChildAvailableSize().block_size, fragment.BlockSize());
+  }
+
   PropagateBaselineFromChild(physical_fragment, logical_offset.block_offset);
   container_builder_.AddResult(*layout_result, logical_offset);
 
@@ -1888,6 +1906,10 @@ NGLayoutResult::EStatus NGBlockLayoutAlgorithm::FinishInflow(
                                      previous_inflow_position))
     return NGLayoutResult::kBfcBlockOffsetResolved;
 
+  // The box with -internal-align-self:center should create new
+  // formatting context.
+  DCHECK(child.IsInline() || !child.Style().AlignSelfBlockCenter());
+
   PropagateBaselineFromChild(physical_fragment, logical_offset.block_offset);
   container_builder_.AddResult(*layout_result, logical_offset);
 

third_party/blink/renderer/core/style/computed_style_diff_functions.json5

@@ -221,7 +221,7 @@
                 "max-height", "VerticalAlignLength", "box-sizing", "align-content",
                 "align-items", "align-self", "justify-content", "justify-items",
                 "justify-self", "contain", "contain-intrinsic-size", "aspect-ratio",
-                "overflow-clip-margin"],
+                "overflow-clip-margin", "-internal-align-self-block"],
         methods_to_diff: [
           {
             method: "VerticalAlign()",