css-flexbox: special case vertical alignment for webkit-box

Deprecated flex box only considers box-pack if there is remaining space
(https://chromium.googlesource.com/chromium/src/+/master/third_party/blink/renderer/core/layout/layout_deprecated_flexible_box.cc#1053
ish).
This patch makes it so flex box does the same if it's emulated -webkit-box.

BUG=1014884
TEST=wpt/compat/webkit-box-ignore-box-pack.html

Change-Id: Ic15d1f93957ba8923c48e5a3a9864f17af412a17
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1864321
Commit-Queue: Scott Violet <sky@chromium.org>
Reviewed-by: Christian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#707677}

third_party/blink/renderer/core/layout/flexible_box_algorithm.cc

@@ -431,7 +431,9 @@ void FlexLine::ComputeLineItemsPosition(LayoutUnit main_axis_offset,
   const LayoutUnit available_free_space = remaining_free_space;
   LayoutUnit initial_position =
       FlexLayoutAlgorithm::InitialContentPositionOffset(
-          available_free_space, justify_content, line_items.size());
+          algorithm->StyleRef(), available_free_space, justify_content,
+          line_items.size());
+
   main_axis_offset += initial_position;
   sum_justify_adjustments += initial_position;
   LayoutUnit max_descent;  // Used when align-items: baseline.
@@ -593,10 +595,8 @@ bool FlexLayoutAlgorithm::ShouldApplyMinSizeAutoForChild(
     return false;
 
   // webkit-box treats min-size: auto as 0.
-  if (StyleRef().Display() == EDisplay::kWebkitBox ||
-      StyleRef().Display() == EDisplay::kWebkitInlineBox) {
+  if (StyleRef().IsDeprecatedWebkitBox())
     return false;
-  }
 
   return !child.ShouldApplySizeContainment() &&
          MainAxisOverflowForChild(child) == EOverflow::kVisible;
@@ -633,8 +633,9 @@ void FlexLayoutAlgorithm::AlignFlexLines(LayoutUnit cross_axis_content_extent) {
   for (const FlexLine& line : flex_lines_)
     available_cross_axis_space -= line.cross_axis_extent;
 
-  LayoutUnit line_offset = InitialContentPositionOffset(
-      available_cross_axis_space, align_content, flex_lines_.size());
+  LayoutUnit line_offset =
+      InitialContentPositionOffset(StyleRef(), available_cross_axis_space,
+                                   align_content, flex_lines_.size());
   for (FlexLine& line_context : flex_lines_) {
     line_context.cross_axis_offset += line_offset;
 
@@ -754,9 +755,16 @@ ItemPosition FlexLayoutAlgorithm::AlignmentForChild(
 
 // static
 LayoutUnit FlexLayoutAlgorithm::InitialContentPositionOffset(
+    const ComputedStyle& style,
     LayoutUnit available_free_space,
     const StyleContentAlignmentData& data,
     unsigned number_of_items) {
+  if (available_free_space <= 0 && style.IsDeprecatedWebkitBox() &&
+      style.ResolvedIsColumnFlexDirection()) {
+    // -webkit-box with vertical orientation and no available spaces positions
+    // relative to the start regardless of ContentPosition.
+    return LayoutUnit();
+  }
   if (data.GetPosition() == ContentPosition::kFlexEnd)
     return available_free_space;
   if (data.GetPosition() == ContentPosition::kCenter)

third_party/blink/renderer/core/layout/flexible_box_algorithm.h

@@ -387,6 +387,7 @@ class FlexLayoutAlgorithm {
                                         const ComputedStyle& child_style);
 
   static LayoutUnit InitialContentPositionOffset(
+      const ComputedStyle& style,
       LayoutUnit available_free_space,
       const StyleContentAlignmentData&,
       unsigned number_of_items);

third_party/blink/renderer/core/layout/layout_flexible_box.cc

@@ -1261,8 +1261,8 @@ LayoutUnit LayoutFlexibleBox::StaticMainAxisPositionForPositionedChild(
       MainAxisExtentForChild(child);
 
   LayoutUnit offset = FlexLayoutAlgorithm::InitialContentPositionOffset(
-      available_space, FlexLayoutAlgorithm::ResolvedJustifyContent(StyleRef()),
-      1);
+      StyleRef(), available_space,
+      FlexLayoutAlgorithm::ResolvedJustifyContent(StyleRef()), 1);
   if (StyleRef().ResolvedIsRowReverseFlexDirection() ||
       StyleRef().ResolvedIsColumnReverseFlexDirection())
     offset = available_space - offset;
@@ -1516,7 +1516,7 @@ void LayoutFlexibleBox::LayoutColumnReverse(FlexItemVectorView& children,
   // we place the children starting from the end of the flexbox.
   LayoutUnit main_axis_offset = LogicalHeight() - FlowAwareContentInsetEnd();
   main_axis_offset -= FlexLayoutAlgorithm::InitialContentPositionOffset(
-      available_free_space, justify_content, children.size());
+      StyleRef(), available_free_space, justify_content, children.size());
 
   for (wtf_size_t i = 0; i < children.size(); ++i) {
     FlexItem& flex_item = children[i];

third_party/blink/web_tests/external/wpt/compat/webkit-box-ignore-box-pack.html

+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#outer {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: center;
+  width: 100px;
+  height: 100px;
+}
+#inner {
+  width: 100px;
+  height: 200px;
+}
+</style>
+<div id="outer">
+  <div id="inner"></div>
+</div>
+<script>
+  test(function() {
+    var child = document.getElementById("inner");
+    assert_greater_than(child.offsetTop, 0);
+  }, "Child should be positioned at y-offset greater than 0 if children exceed bounds of parent");
+</script>