reland: css-flexbox: special cases for rtl horizontal boxs

This is a reland. The original path at
https://chromium-review.googlesource.com/c/chromium/src/+/1872566
included deleting
third_party/blink/web_tests/platform/mac-mac10.10/paint/invalidation/overflow/float-overflow-right-expected.txt
That was wrong (not sure why the rebaseline tool did that).

Two special cases that carry over from the old code:
. LayoutDeprecatedFlexibleBox always started layout at an origin of 0,
  even when rtl. This gives the same behavior.
. When rtl end is treated as start.

BUG=1014884
TEST=fast/deprecated-flexbox/017.html

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

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

@@ -490,6 +490,11 @@ void FlexLine::ComputeLineItemsPosition(LayoutUnit main_axis_offset,
   bool should_flip_main_axis =
       !algorithm->StyleRef().ResolvedIsColumnFlexDirection() &&
       !algorithm->IsLeftToRightFlow();
+  LayoutUnit width_for_rtl = container_logical_width;
+  // -webkit-box always started layout at an origin of 0, regardless of
+  // direction.
+  if (should_flip_main_axis && algorithm->StyleRef().IsDeprecatedWebkitBox())
+    width_for_rtl = sum_hypothetical_main_size;
   for (size_t i = 0; i < line_items.size(); ++i) {
     FlexItem& flex_item = line_items[i];
 
@@ -522,11 +527,11 @@ void FlexLine::ComputeLineItemsPosition(LayoutUnit main_axis_offset,
     // In an RTL column situation, this will apply the margin-right/margin-end
     // on the left. This will be fixed later in
     // LayoutFlexibleBox::FlipForRightToLeftColumn.
-    flex_item.desired_location = LayoutPoint(
-        should_flip_main_axis
-            ? container_logical_width - main_axis_offset - child_main_extent
-            : main_axis_offset,
-        cross_axis_offset + flex_item.FlowAwareMarginBefore());
+    flex_item.desired_location =
+        LayoutPoint(should_flip_main_axis
+                        ? width_for_rtl - main_axis_offset - child_main_extent
+                        : main_axis_offset,
+                    cross_axis_offset + flex_item.FlowAwareMarginBefore());
     main_axis_offset += child_main_extent + flex_item.FlowAwareMarginEnd();
 
     if (i != line_items.size() - 1) {
@@ -819,10 +824,19 @@ TransformedWritingMode FlexLayoutAlgorithm::GetTransformedWritingMode(
 StyleContentAlignmentData FlexLayoutAlgorithm::ResolvedJustifyContent(
     const ComputedStyle& style) {
   const bool is_webkit_box = style.IsDeprecatedWebkitBox();
-  ContentPosition position = is_webkit_box
-                                 ? BoxPackToContentPosition(style.BoxPack())
-                                 : style.ResolvedJustifyContentPosition(
-                                       ContentAlignmentNormalBehavior());
+  ContentPosition position;
+  if (is_webkit_box) {
+    position = BoxPackToContentPosition(style.BoxPack());
+    // -webkit-box treats end as start for horizontal rtl.
+    if (position == ContentPosition::kFlexEnd &&
+        !style.ResolvedIsColumnReverseFlexDirection() &&
+        !style.IsLeftToRightDirection()) {
+      position = ContentPosition::kFlexStart;
+    }
+  } else {
+    position =
+        style.ResolvedJustifyContentPosition(ContentAlignmentNormalBehavior());
+  }
   ContentDistributionType distribution =
       is_webkit_box ? BoxPackToContentDistribution(style.BoxPack())
                     : style.ResolvedJustifyContentDistribution(

third_party/blink/web_tests/platform/linux/paint/invalidation/overflow/float-overflow-right-expected.txt

@@ -306,16 +306,6 @@
           "rect": [701, 420, 40, 10],
           "reason": "geometry"
         },
-        {
-          "object": "LayoutBlockFlow (floating) DIV",
-          "rect": [701, 255, 40, 10],
-          "reason": "geometry"
-        },
-        {
-          "object": "LayoutBlockFlow (floating) DIV",
-          "rect": [701, 249, 40, 10],
-          "reason": "geometry"
-        },
         {
           "object": "LayoutBlockFlow (floating) DIV",
           "rect": [701, 216, 40, 10],
@@ -406,6 +396,16 @@
           "rect": [690, 291, 40, 10],
           "reason": "geometry"
         },
+        {
+          "object": "LayoutBlockFlow (floating) DIV",
+          "rect": [671, 255, 40, 10],
+          "reason": "geometry"
+        },
+        {
+          "object": "LayoutBlockFlow (floating) DIV",
+          "rect": [671, 249, 40, 10],
+          "reason": "geometry"
+        },
         {
           "object": "NGPhysicalBoxFragment LayoutNGBlockFlow DIV",
           "rect": [701, 543, 32, 20],
@@ -418,22 +418,22 @@
         },
         {
           "object": "InlineTextBox 'x'",
-          "rect": [725, 257, 16, 17],
+          "rect": [725, 218, 16, 17],
           "reason": "geometry"
         },
         {
           "object": "InlineTextBox 'x'",
-          "rect": [725, 251, 16, 17],
+          "rect": [725, 212, 16, 17],
           "reason": "geometry"
         },
         {
           "object": "InlineTextBox 'x'",
-          "rect": [725, 218, 16, 17],
+          "rect": [695, 257, 16, 17],
           "reason": "geometry"
         },
         {
           "object": "InlineTextBox 'x'",
-          "rect": [725, 212, 16, 17],
+          "rect": [695, 251, 16, 17],
           "reason": "geometry"
         },
         {

third_party/blink/web_tests/platform/mac/paint/invalidation/overflow/float-overflow-right-expected.txt

@@ -306,16 +306,6 @@
           "rect": [701, 420, 40, 10],
           "reason": "geometry"
         },
-        {
-          "object": "LayoutBlockFlow (floating) DIV",
-          "rect": [701, 255, 40, 10],
-          "reason": "geometry"
-        },
-        {
-          "object": "LayoutBlockFlow (floating) DIV",
-          "rect": [701, 249, 40, 10],
-          "reason": "geometry"
-        },
         {
           "object": "LayoutBlockFlow (floating) DIV",
           "rect": [701, 216, 40, 10],
@@ -406,6 +396,16 @@
           "rect": [690, 291, 40, 10],
           "reason": "geometry"
         },
+        {
+          "object": "LayoutBlockFlow (floating) DIV",
+          "rect": [671, 255, 40, 10],
+          "reason": "geometry"
+        },
+        {
+          "object": "LayoutBlockFlow (floating) DIV",
+          "rect": [671, 249, 40, 10],
+          "reason": "geometry"
+        },
         {
           "object": "NGPhysicalBoxFragment LayoutNGBlockFlow DIV",
           "rect": [701, 543, 32, 20],
@@ -418,22 +418,22 @@
         },
         {
           "object": "InlineTextBox 'x'",
-          "rect": [725, 256, 16, 18],
+          "rect": [725, 217, 16, 18],
           "reason": "geometry"
         },
         {
           "object": "InlineTextBox 'x'",
-          "rect": [725, 250, 16, 18],
+          "rect": [725, 211, 16, 18],
           "reason": "geometry"
         },
         {
           "object": "InlineTextBox 'x'",
-          "rect": [725, 217, 16, 18],
+          "rect": [695, 256, 16, 18],
           "reason": "geometry"
         },
         {
           "object": "InlineTextBox 'x'",
-          "rect": [725, 211, 16, 18],
+          "rect": [695, 250, 16, 18],
           "reason": "geometry"
         },
         {

third_party/blink/web_tests/platform/win/paint/invalidation/overflow/float-overflow-right-expected.txt

@@ -306,16 +306,6 @@
           "rect": [701, 420, 40, 10],
           "reason": "geometry"
         },
-        {
-          "object": "LayoutBlockFlow (floating) DIV",
-          "rect": [701, 255, 40, 10],
-          "reason": "geometry"
-        },
-        {
-          "object": "LayoutBlockFlow (floating) DIV",
-          "rect": [701, 249, 40, 10],
-          "reason": "geometry"
-        },
         {
           "object": "LayoutBlockFlow (floating) DIV",
           "rect": [701, 216, 40, 10],
@@ -406,6 +396,16 @@
           "rect": [690, 291, 40, 10],
           "reason": "geometry"
         },
+        {
+          "object": "LayoutBlockFlow (floating) DIV",
+          "rect": [671, 255, 40, 10],
+          "reason": "geometry"
+        },
+        {
+          "object": "LayoutBlockFlow (floating) DIV",
+          "rect": [671, 249, 40, 10],
+          "reason": "geometry"
+        },
         {
           "object": "NGPhysicalBoxFragment LayoutNGBlockFlow DIV",
           "rect": [701, 543, 32, 20],
@@ -418,22 +418,22 @@
         },
         {
           "object": "InlineTextBox 'x'",
-          "rect": [725, 256, 16, 18],
+          "rect": [725, 217, 16, 18],
           "reason": "geometry"
         },
         {
           "object": "InlineTextBox 'x'",
-          "rect": [725, 250, 16, 18],
+          "rect": [725, 211, 16, 18],
           "reason": "geometry"
         },
         {
           "object": "InlineTextBox 'x'",
-          "rect": [725, 217, 16, 18],
+          "rect": [695, 256, 16, 18],
           "reason": "geometry"
         },
         {
           "object": "InlineTextBox 'x'",
-          "rect": [725, 211, 16, 18],
+          "rect": [695, 250, 16, 18],
           "reason": "geometry"
         },
         {