[flex] Remove LayoutDisableWebkitBoxQuirks flag.

On since M133. Had one regression, and can easily merge with conflict
if we need to do something about it (provided potential mitigation).

Bug: 384765587
Change-Id: Ifc9fefc1a9177e6af2746d15af784d7d858e0df8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6102353
Reviewed-by: David Grogan <dgrogan@chromium.org>
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1428390}

third_party/blink/renderer/core/layout/flex/flex_layout_algorithm.cc

@@ -219,32 +219,21 @@ StyleContentAlignmentData FlexLayoutAlgorithm::ResolvedJustifyContent() const {
   if (is_webkit_box_) {
     const EBoxPack box_pack = Style().BoxPack();
     const ContentPosition position = ([&]() {
-      // -webkit-box row-reverse currently flips the start/end (e.g. it always
-      // uses "start" rather than "flex-start"). Firefox doesn't have this
-      // quirk, we should attempt to remove it.
-      const bool is_row_reverse =
-          !RuntimeEnabledFeatures::LayoutDisableWebkitBoxQuirksEnabled() &&
-          Style().ResolvedIsRowReverseFlexDirection();
       switch (box_pack) {
         case EBoxPack::kCenter:
           return ContentPosition::kCenter;
         case EBoxPack::kJustify:
         case EBoxPack::kStart:
-          return is_row_reverse ? ContentPosition::kFlexEnd
-                                : ContentPosition::kFlexStart;
+          return ContentPosition::kFlexStart;
         case EBoxPack::kEnd:
-          return is_row_reverse ? ContentPosition::kFlexStart
-                                : ContentPosition::kFlexEnd;
+          return ContentPosition::kFlexEnd;
       }
     })();
     const ContentDistributionType distribution =
         box_pack == EBoxPack::kJustify ? ContentDistributionType::kSpaceBetween
                                        : ContentDistributionType::kDefault;
-    return StyleContentAlignmentData(
-        position, distribution,
-        RuntimeEnabledFeatures::LayoutDisableWebkitBoxQuirksEnabled()
-            ? OverflowAlignment::kDefault
-            : OverflowAlignment::kSafe);
+    return StyleContentAlignmentData(position, distribution,
+                                     OverflowAlignment::kDefault);
   }
 
   const auto writing_direction = GetConstraintSpace().GetWritingDirection();
@@ -1504,7 +1493,6 @@ void FlexLayoutAlgorithm::ApplyReversals(HeapVector<FlexLine>* flex_lines) {
 namespace {
 
 LayoutUnit InitialContentPositionOffset(const StyleContentAlignmentData& data,
-                                        ContentPosition safe_position,
                                         LayoutUnit free_space,
                                         unsigned number_of_items,
                                         bool is_reverse) {
@@ -1534,13 +1522,12 @@ LayoutUnit InitialContentPositionOffset(const StyleContentAlignmentData& data,
       return is_reverse ? free_space : LayoutUnit();
   }
 
-  ContentPosition position = data.GetPosition();
   if (free_space <= LayoutUnit() &&
       data.Overflow() == OverflowAlignment::kSafe) {
-    position = safe_position;
+    return LayoutUnit();
   }
 
-  switch (position) {
+  switch (data.GetPosition()) {
     case ContentPosition::kCenter:
       return free_space / 2;
     case ContentPosition::kStart:
@@ -1647,23 +1634,13 @@ LayoutResult::EStatus FlexLayoutAlgorithm::GiveItemsFinalPositionAndSize(
     cross_axis_free_space = LayoutUnit();
   }
 
-  // -webkit-box has a weird quirk - an RTL box will overflow as if it was LTR.
-  // NOTE: We should attempt to remove this in the future.
-  const ContentPosition safe_justify_position =
-      !RuntimeEnabledFeatures::LayoutDisableWebkitBoxQuirksEnabled() &&
-              is_webkit_box_ && !is_column_ &&
-              style.Direction() == TextDirection::kRtl
-          ? ContentPosition::kEnd
-          : ContentPosition::kStart;
-
   const LayoutUnit space_between_lines =
       ContentDistributionSpace(align_content, cross_axis_free_space, num_lines);
   LayoutUnit line_cross_axis_offset =
       (is_column_ ? BorderScrollbarPadding().inline_start
                   : BorderScrollbarPadding().block_start) +
-      InitialContentPositionOffset(align_content, ContentPosition::kStart,
-                                   cross_axis_free_space, num_lines,
-                                   is_wrap_reverse_);
+      InitialContentPositionOffset(align_content, cross_axis_free_space,
+                                   num_lines, is_wrap_reverse_);
 
   BaselineAccumulator baseline_accumulator(style);
   LayoutResult::EStatus status = LayoutResult::kSuccess;
@@ -1703,9 +1680,8 @@ LayoutResult::EStatus FlexLayoutAlgorithm::GiveItemsFinalPositionAndSize(
     LayoutUnit main_axis_offset =
         (is_column_ ? BorderScrollbarPadding().block_start
                     : BorderScrollbarPadding().inline_start) +
-        InitialContentPositionOffset(justify_content, safe_justify_position,
-                                     main_axis_free_space, line_items_size,
-                                     is_reverse_direction_);
+        InitialContentPositionOffset(justify_content, main_axis_free_space,
+                                     line_items_size, is_reverse_direction_);
 
     for (wtf_size_t item_index : flex_line.item_indices) {
       const FlexItem& item = flex_items_[item_index];

third_party/blink/renderer/core/style/computed_style.h

@@ -1007,13 +1007,6 @@ class ComputedStyle final : public ComputedStyleBase {
     return FlexDirection() == EFlexDirection::kColumn ||
            FlexDirection() == EFlexDirection::kColumnReverse;
   }
-  bool ResolvedIsRowReverseFlexDirection() const {
-    if (IsDeprecatedFlexbox()) {
-      return BoxOrient() == EBoxOrient::kHorizontal &&
-             BoxDirection() == EBoxDirection::kReverse;
-    }
-    return FlexDirection() == EFlexDirection::kRowReverse;
-  }
   bool ResolvedIsReverseFlexDirection() const {
     if (IsDeprecatedFlexbox()) {
       return BoxDirection() == EBoxDirection::kReverse;

third_party/blink/renderer/platform/runtime_enabled_features.json5

@@ -2604,10 +2604,6 @@
       base_feature_status: "enabled",
       copied_from_base_feature_if: "overridden",
     },
-    {
-      name: "LayoutDisableWebkitBoxQuirks",
-      status: "stable",
-    },
     {
       name: "LayoutFlexNewRowAlgorithmV3",
       status: "test",

third_party/blink/web_tests/TestExpectations

@@ -1050,12 +1050,6 @@ crbug.com/336604 external/wpt/css/css-flexbox/flexbox-collapsed-item-horiz-003.h
 crbug.com/336604 external/wpt/css/css-flexbox/flexbox_visibility-collapse-line-wrapping.html [ Failure ]
 crbug.com/336604 external/wpt/css/css-flexbox/flexbox_visibility-collapse.html [ Failure ]
 
-# Temporary failures while we remove some -webkit-box quirks.
-crbug.com/384765587 external/wpt/compat/webkit-box-horizontal-reverse-variants.html [ Failure ]
-crbug.com/384765587 external/wpt/compat/webkit-box-horizontal-rtl-variants.html [ Failure ]
-crbug.com/384765587 external/wpt/compat/webkit-box-ignore-box-pack.html [ Failure ]
-crbug.com/384765587 fast/deprecated-flexbox/017.html [ Failure ]
-
 # [css-lists]
 crbug.com/1123457 external/wpt/css/css-lists/counter-list-item.html [ Failure ]
 crbug.com/1123457 external/wpt/css/css-lists/counter-list-item-2.html [ Failure ]

third_party/blink/web_tests/external/wpt/compat/webkit-box-horizontal-reverse-variants-ref.html

@@ -3,14 +3,11 @@
 .flexbox {
   width: 300px;
   display: flex;
+  flex-direction: row-reverse;
   border-style: solid;
   border-width: 1px 2px 1px 4px;
 }
 
-.reverse {
-  flex-direction: row-reverse;
-}
-
 .redbox {
   background: red;
   width: 100px;
@@ -27,47 +24,44 @@
 <p>Exercises -webkit-box with various box-pack settings when direction is
    reverse. In all cases the order of letters in the boxes should be
    alphabetized left to right.
-<p>Start. Boxes should be aligned to left side.
-<div class="flexbox reverse" style="justify-content: flex-end;">
+<p>Start. Boxes should be aligned to right side.
+<div class="flexbox" style="justify-content: flex-end;">
   <div class="redbox">B</div>
   <div class="greenbox">A</div>
 </div>
 
 <p>Centered. Boxes should be centered.
-<div class="flexbox reverse" style="justify-content: center;">
+<div class="flexbox" style="justify-content: center;">
   <div class="redbox">B</div>
   <div class="greenbox">A</div>
 </div>
 
-<p>End. Boxes should be aligned to right side.
-<div class="flexbox reverse">
-  <div class="redbox">B</div>
-  <div class="greenbox">A</div>
-</div>
-
-<p>Start, content too big. Boxes should start at left edge and extend
-   outside border.
+<p>End. Boxes should be aligned to left side.
 <div class="flexbox">
-  <div class="greenbox">A</div>
   <div class="redbox">B</div>
-  <div class="greenbox">C</div>
-  <div class="redbox">D</div>
+  <div class="greenbox">A</div>
 </div>
 
-<p>Center, content too big. Boxes should start at left edge and extend
-   outside border.
+<p>Start, content too big.
 <div class="flexbox">
-  <div class="greenbox">A</div>
-  <div class="redbox">B</div>
-  <div class="greenbox">C</div>
   <div class="redbox">D</div>
+  <div class="greenbox">C</div>
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
 </div>
 
-<p>End, content too big. Boxes should start at left edge and extend
-   outside border.
-<div class="flexbox">
-  <div class="greenbox">A</div>
-  <div class="redbox">B</div>
-  <div class="greenbox">C</div>
+<p>Center, content too big.
+<div class="flexbox" style="justify-content: center;">
   <div class="redbox">D</div>
+  <div class="greenbox">C</div>
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>End, content too big.
+<div class="flexbox" style="justify-content: flex-end;">
+  <div class="redbox">D</div>
+  <div class="greenbox">C</div>
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
 </div>

third_party/blink/web_tests/external/wpt/compat/webkit-box-horizontal-reverse-variants.html

@@ -24,8 +24,8 @@
 <p>Exercises -webkit-box with various box-pack settings when direction is
    reverse. In all cases the order of letters in the boxes should be
    alphabetized left to right.
-<p>Start. Boxes should be aligned to left side.
-<div class="webkitbox">
+<p>Start. Boxes should be aligned to right side.
+<div class="webkitbox" style="-webkit-box-pack: end">
   <div class="redbox">B</div>
   <div class="greenbox">A</div>
 </div>
@@ -36,14 +36,13 @@
   <div class="greenbox">A</div>
 </div>
 
-<p>End. Boxes should be aligned to right side.
-<div class="webkitbox" style="-webkit-box-pack: end">
+<p>End. Boxes should be aligned to left side.
+<div class="webkitbox">
   <div class="redbox">B</div>
   <div class="greenbox">A</div>
 </div>
 
-<p>Start, content too big. Boxes should start at left edge and extend
-   outside border.
+<p>Start, content too big.
 <div class="webkitbox">
   <div class="redbox">D</div>
   <div class="greenbox">C</div>
@@ -51,8 +50,7 @@
   <div class="greenbox">A</div>
 </div>
 
-<p>Center, content too big. Boxes should start at left edge and extend
-   outside border.
+<p>Center, content too big.
 <div class="webkitbox" style="-webkit-box-pack: center">
   <div class="redbox">D</div>
   <div class="greenbox">C</div>
@@ -60,8 +58,7 @@
   <div class="greenbox">A</div>
 </div>
 
-<p>End, content too big. Boxes should start at left edge and extend
-   outside border.
+<p>End, content too big.
 <div class="webkitbox" style="-webkit-box-pack: end">
   <div class="redbox">D</div>
   <div class="greenbox">C</div>

third_party/blink/web_tests/external/wpt/compat/webkit-box-horizontal-rtl-variants-ref.html

@@ -3,14 +3,11 @@
 .flexbox {
   width: 300px;
   display: flex;
+  direction: rtl;
   border-style: solid;
   border-width: 1px 2px 1px 4px;
 }
 
-.rtl {
-  direction: rtl;
-}
-
 .redbox {
   background: red;
   width: 100px;
@@ -27,46 +24,43 @@
 <p>Exercises -webkit-box with various box-pack settings when rtl. In all cases
    the order of letters in the boxes should be alphabetized left to right.
 <p>Start. Boxes should be aligned to right side.
-<div class="flexbox rtl">
+<div class="flexbox">
   <div class="redbox">B</div>
   <div class="greenbox">A</div>
 </div>
 
 <p>Centered. Boxes should be centered.
-<div class="flexbox rtl" style="justify-content: center;">
+<div class="flexbox" style="justify-content: center;">
   <div class="redbox">B</div>
   <div class="greenbox">A</div>
 </div>
 
 <p>End. Boxes should be aligned to left side.
-<div class="flexbox rtl" style="justify-content: flex-end;">
+<div class="flexbox" style="justify-content: flex-end;">
   <div class="redbox">B</div>
   <div class="greenbox">A</div>
 </div>
 
-<p>Start, content too big. Boxes should start at left edge and extend
-   outside border.
+<p>Start, content too big.
 <div class="flexbox">
-  <div class="greenbox rtl">A</div>
-  <div class="redbox rtl">B</div>
-  <div class="greenbox rtl">C</div>
-  <div class="redbox rtl">D</div>
+  <div class="redbox">D</div>
+  <div class="greenbox">C</div>
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
 </div>
 
-<p>Center, content too big. Boxes should start at left edge and extend
-   outside border.
-<div class="flexbox">
-  <div class="greenbox rtl">A</div>
-  <div class="redbox rtl">B</div>
-  <div class="greenbox rtl">C</div>
-  <div class="redbox rtl">D</div>
+<p>Center, content too big.
+<div class="flexbox" style="justify-content: center;">
+  <div class="redbox">D</div>
+  <div class="greenbox">C</div>
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
 </div>
 
-<p>End, content too big. Boxes should start at left edge and extend
-   outside border.
-<div class="flexbox">
-  <div class="greenbox rtl">A</div>
-  <div class="redbox rtl">B</div>
-  <div class="greenbox rtl">C</div>
-  <div class="redbox rtl">D</div>
+<p>End, content too big.
+<div class="flexbox" style="justify-content: flex-end;">
+  <div class="redbox">D</div>
+  <div class="greenbox">C</div>
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
 </div>

third_party/blink/web_tests/external/wpt/compat/webkit-box-horizontal-rtl-variants.html

@@ -41,8 +41,7 @@
   <div class="greenbox">A</div>
 </div>
 
-<p>Start, content too big. Boxes should start at left edge and extend
-   outside border.
+<p>Start, content too big.
 <div class="webkitbox">
   <div class="redbox">D</div>
   <div class="greenbox">C</div>
@@ -50,8 +49,7 @@
   <div class="greenbox">A</div>
 </div>
 
-<p>Center, content too big. Boxes should start at left edge and extend
-   outside border.
+<p>Center, content too big.
 <div class="webkitbox" style="-webkit-box-pack: center">
   <div class="redbox">D</div>
   <div class="greenbox">C</div>
@@ -59,8 +57,7 @@
   <div class="greenbox">A</div>
 </div>
 
-<p>End, content too big. Boxes should start at left edge and extend
-   outside border.
+<p>End, content too big.
 <div class="webkitbox" style="-webkit-box-pack: end">
   <div class="redbox">D</div>
   <div class="greenbox">C</div>

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

@@ -1,25 +0,0 @@
-<!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>

third_party/blink/web_tests/fast/deprecated-flexbox/017.html

@@ -1,108 +0,0 @@
-<html>
-<head>
-<style>
-div.box {
-  display: -moz-box;
-  display: -webkit-box;
-  display: box;
-}
-
-div.vertical {
-  -moz-box-orient: vertical;
-  -webkit-box-orient: vertical;
-  box-orient: vertical;
-}
-
-div.number {
-  border: 2px solid black;
-  padding: 4px;
-  margin: 4px;
-}
-
-.rtl {
-  -moz-box-pack: end;
-  -webkit-box-pack: end;
-  box-pack: end;
-  direction: rtl;
-}
-
-.rev {
-  -moz-box-direction: reverse;
-  -webkit-box-direction: reverse;
-  box-direction: reverse;
-}
-
-.first {
-  -moz-box-ordinal-group: 1;
-  -webkit-box-ordinal-group: 1;
-  box-ordinal-group: 1
-}
-
-.second {
-  -moz-box-ordinal-group: 2;
-  -webkit-box-ordinal-group: 2;
-  box-ordinal-group: 2
-}
-
-.third {
-  -moz-box-ordinal-group: 3;
-  -webkit-box-ordinal-group: 3;
-  box-ordinal-group: 3
-}
-
-.fourth {
-  -moz-box-ordinal-group: 4;
-  -webkit-box-ordinal-group: 4;
-  box-ordinal-group: 4
-}
-
-.fifth {
-  -moz-box-ordinal-group: 5;
-  -webkit-box-ordinal-group: 5;
-  box-ordinal-group: 5
-}
-
-</style>
-<body>
-<p>
-You should see identical rows of numbers below.  Every row should look exactly the same.
-If any objects are out of order, then the test has failed.
-</p>
-<div class="box vertical">
-<div class="box">
-  <div class="number">1</div>
-  <div class="number">2</div>
-  <div class="number">3</div>
-  <div class="number">4</div>
-  <div class="number">5</div>
-</div>
-<div class="box rtl">
-  <div class="number">5</div>
-  <div class="number">4</div>
-  <div class="number">3</div>
-  <div class="number">2</div>
-  <div class="number">1</div>
-</div>
-<div class="box rtl rev">
-  <div class="number">1</div>
-  <div class="number">2</div>
-  <div class="number">3</div>
-  <div class="number">4</div>
-  <div class="number">5</div>
-</div>
-<div class="box">
-  <div class="number third">3</div>
-  <div class="number first">1</div>
-  <div class="number fourth">4</div>
-  <div class="number second">2</div>
-  <div class="number fifth">5</div>
-</div>
-<div class="box rev">
-  <div class="number third">3</div>
-  <div class="number fifth">1</div>
-  <div class="number second">4</div>
-  <div class="number fourth">2</div>
-  <div class="number first">5</div>
-</div>
-</div>
-</body>