[LayoutNG] Implement positioning for items in column-reverse flexboxes

Bug: 845235
Change-Id: I12097a71dbebd03effe45883cf354597d380dd6e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1881982Reviewed-by: Christian Biesinger <cbiesinger@chromium.org>
Commit-Queue: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#710445}

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

@@ -944,4 +944,27 @@ EOverflow FlexLayoutAlgorithm::MainAxisOverflowForChild(
   return child.StyleRef().OverflowY();
 }
 
+// Above, we calculated the positions of items in a column reverse container as
+// if they were in a column. Now that we know the block size of the container we
+// can flip the position of every item.
+void FlexLayoutAlgorithm::LayoutColumnReverse(
+    LayoutUnit main_axis_content_size,
+    LayoutUnit border_scrollbar_padding_before) {
+  DCHECK(IsColumnFlow());
+  DCHECK(Style()->ResolvedIsColumnReverseFlexDirection());
+  for (FlexLine& line_context : FlexLines()) {
+    for (wtf_size_t child_number = 0;
+         child_number < line_context.line_items.size(); ++child_number) {
+      FlexItem& flex_item = line_context.line_items[child_number];
+      LayoutUnit item_main_size = flex_item.FlexedBorderBoxSize();
+      // We passed 0 as the initial main_axis offset to ComputeLineItemsPosition
+      // for ColumnReverse containers so here we have to add the
+      // border_scrollbar_padding of the container.
+      flex_item.desired_location.SetX(
+          main_axis_content_size + border_scrollbar_padding_before -
+          flex_item.desired_location.X() - item_main_size);
+    }
+  }
+}
+
 }  // namespace blink

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

@@ -415,6 +415,9 @@ class FlexLayoutAlgorithm {
       const StyleContentAlignmentData&,
       unsigned number_of_items);
 
+  void LayoutColumnReverse(LayoutUnit main_axis_content_size,
+                           LayoutUnit border_scrollbar_padding_before);
+
  private:
   EOverflow MainAxisOverflowForChild(const LayoutBox& child) const;
 

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

@@ -505,7 +505,9 @@ scoped_refptr<const NGLayoutResult> NGFlexLayoutAlgorithm::Layout() {
   LayoutUnit main_axis_offset = border_scrollbar_padding_.inline_start;
   LayoutUnit cross_axis_offset = border_scrollbar_padding_.block_start;
   if (is_column_) {
-    main_axis_offset = border_scrollbar_padding_.block_start;
+    main_axis_offset = Style().ResolvedIsColumnReverseFlexDirection()
+                           ? LayoutUnit()
+                           : border_scrollbar_padding_.block_start;
     cross_axis_offset = border_scrollbar_padding_.inline_start;
   }
   FlexLine* line;
@@ -627,14 +629,13 @@ void NGFlexLayoutAlgorithm::GiveLinesAndItemsFinalPositionAndSize() {
   const LayoutUnit cross_axis_start_edge =
       line_contexts.IsEmpty() ? LayoutUnit()
                               : line_contexts[0].cross_axis_offset;
-  const LayoutUnit final_content_cross_size =
-      is_column_ ? container_builder_.InlineSize() -
-                       border_scrollbar_padding_.InlineSum()
-                 : container_builder_.BlockSize() -
-                       border_scrollbar_padding_.BlockSum();
 
-  // TODO(dgrogan): Implement the behavior from
-  // LayoutFlexibleBox::LayoutColumnReverse here.
+  LayoutUnit final_content_main_size =
+      container_builder_.InlineSize() - border_scrollbar_padding_.InlineSum();
+  LayoutUnit final_content_cross_size =
+      container_builder_.BlockSize() - border_scrollbar_padding_.BlockSum();
+  if (is_column_)
+    std::swap(final_content_main_size, final_content_cross_size);
 
   if (!algorithm_->IsMultiline() && !line_contexts.IsEmpty())
     line_contexts[0].cross_axis_extent = final_content_cross_size;
@@ -651,6 +652,11 @@ void NGFlexLayoutAlgorithm::GiveLinesAndItemsFinalPositionAndSize() {
                                    final_content_cross_size);
   }
 
+  if (Style().ResolvedIsColumnReverseFlexDirection()) {
+    algorithm_->LayoutColumnReverse(final_content_main_size,
+                                    border_scrollbar_padding_.block_start);
+  }
+
   for (FlexLine& line_context : line_contexts) {
     for (wtf_size_t child_number = 0;
          child_number < line_context.line_items.size(); ++child_number) {

third_party/blink/renderer/core/layout/ng/ng_flex_layout_algorithm.h

@@ -52,6 +52,8 @@ class CORE_EXPORT NGFlexLayoutAlgorithm
   void ConstructAndAppendFlexItems();
   void ApplyStretchAlignmentToChild(FlexItem& flex_item);
   void GiveLinesAndItemsFinalPositionAndSize();
+  void LayoutColumnReverse(LayoutUnit main_axis_content_size);
+
   // This is same method as FlexItem but we need that logic before FlexItem is
   // constructed.
   bool MainAxisIsInlineAxis(const NGBlockNode& child) const;

third_party/blink/web_tests/TestExpectations

@@ -1407,7 +1407,6 @@ crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/flex-order.html [ Failu
 crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/flexbox-baseline-margins.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/flexbox-baseline.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/flexbox-overflow-auto.html [ Failure ]
-crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/minimum-size-image.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/multiline-align-self.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/multiline-justify-content.html [ Failure ]
@@ -1433,14 +1432,8 @@ crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/align-i
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/anonymous-flex-item-001.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/anonymous-flex-item-003.html [ Failure ]
 crbug.com/807497 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/anonymous-flex-item-005.html [ Failure ]
-crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/css-flexbox-column-reverse-wrap-reverse.html [ Failure ]
-crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/css-flexbox-column-reverse-wrap.html [ Failure ]
-crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/css-flexbox-column-reverse.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flex-basis-010.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flex-direction-row-vertical.html [ Failure ]
-crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flex-flow-010.html [ Failure ]
-crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flex-flow-011.html [ Failure ]
-crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flex-flow-012.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-004.xht [ Failure ]
 crbug.com/249112 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-005.xht [ Failure ]
 crbug.com/467127 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-006.xht [ Failure ]
@@ -1452,17 +1445,12 @@ crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flex-mi
 crbug.com/249112 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flex-minimum-width-flex-items-005.xht [ Failure ]
 crbug.com/249112 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flex-minimum-width-flex-items-007.xht [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flex-order.html [ Failure ]
-crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flexbox-flex-direction-column-reverse.htm [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flexbox_align-items-baseline.html [ Failure ]
-crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flexbox_direction-column-reverse.html [ Failure ]
-crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flexbox_flow-column-reverse-wrap-reverse.html [ Failure ]
-crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flexbox_flow-column-reverse-wrap.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flexbox_inline.html [ Failure ]
 crbug.com/467127 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flexbox_justifycontent-center-overflow.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flexbox_order-box.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flexbox_order.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flexbox_quirks_body.html [ Failure ]
-crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flexbox_rtl-direction.html [ Skip ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flexbox_rtl-order.html [ Skip ]
 crbug.com/336604 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flexbox_visibility-collapse-line-wrapping.html [ Failure ]
 crbug.com/336604 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flexbox_visibility-collapse.html [ Failure ]
@@ -1477,7 +1465,6 @@ crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/quirks-
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/scrollbars-auto.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/scrollbars.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/table-as-item-auto-min-width.html [ Failure ]
-crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/ttwf-reftest-flex-direction-column-reverse.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/ttwf-reftest-flex-inline.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/ttwf-reftest-flex-order.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/hittest-overlapping-margin.html [ Failure ]