[FlexNG] Account for item block margins in column-reverse flex containers

We had been reversing the position of the items ignoring the fact that
margin-top and margin-bottom shouldn't flip.

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

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

@@ -958,6 +958,10 @@ void FlexLayoutAlgorithm::LayoutColumnReverse(
     LayoutUnit border_scrollbar_padding_before) {
   DCHECK(IsColumnFlow());
   DCHECK(Style()->ResolvedIsColumnReverseFlexDirection());
+  DCHECK(all_items_.IsEmpty() || IsNGFlexBox())
+      << "This method relies on NG having passed in 0 for initial main axis "
+         "offset for column-reverse flex boxes. That needs to be fixed if this "
+         "method is to be used in legacy.";
   for (FlexLine& line_context : FlexLines()) {
     for (wtf_size_t child_number = 0;
          child_number < line_context.line_items.size(); ++child_number) {
@@ -966,12 +970,11 @@ void FlexLayoutAlgorithm::LayoutColumnReverse(
       // 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.
-      // TODO(dgrogan): I think
-      // wpt/css/css-flexbox/flex-lines/multi-line-wrap-with-column-reverse.html
-      // fails because this totally ignores margins.
       flex_item.desired_location.SetX(
           main_axis_content_size + border_scrollbar_padding_before -
-          flex_item.desired_location.X() - item_main_size);
+          flex_item.desired_location.X() - item_main_size -
+          flex_item.box->MarginAfter(Style()) +
+          flex_item.box->MarginBefore(Style()));
     }
   }
 }

third_party/blink/web_tests/TestExpectations

@@ -1386,7 +1386,6 @@ crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/auto-height-column-with
 crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/flex-align-vertical-writing-mode.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/flex-align.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/flex-flow-2.html [ Failure ]
-crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/flex-flow-auto-margins.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/flex-flow-border.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/flex-flow-margins-auto-size.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/css3/flexbox/flex-flow-padding.html [ Failure ]
@@ -1448,10 +1447,6 @@ crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/ttwf-re
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/hittest-overlapping-margin.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/hittest-overlapping-order.html [ Failure ]
 
-### virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flex-lines/
-crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flex-lines/multi-line-wrap-reverse-column-reverse.html [ Failure ]
-crbug.com/591099 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/flex-lines/multi-line-wrap-with-column-reverse.html [ Failure ]
-
 ### virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/getcomputedstyle/
 crbug.com/467127 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html [ Failure ]
 crbug.com/467127 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html [ Failure ]