diff --git a/cc/base/features.cc b/cc/base/features.cc
index 6a959dfee3ad19..1e658803a90b28 100644
--- a/cc/base/features.cc
+++ b/cc/base/features.cc
@@ -53,6 +53,10 @@ BASE_FEATURE(kScrollSnapCoveringUseNativeFling,
              "ScrollSnapCoveringUseNativeFling",
              base::FEATURE_ENABLED_BY_DEFAULT);
 
+BASE_FEATURE(kScrollSnapPreferCloserCovering,
+             "ScrollSnapPreferCloserCovering",
+             base::FEATURE_ENABLED_BY_DEFAULT);
+
 BASE_FEATURE(kHudDisplayForPerformanceMetrics,
              "HudDisplayForPerformanceMetrics",
              base::FEATURE_DISABLED_BY_DEFAULT);
diff --git a/cc/base/features.h b/cc/base/features.h
index 376b46fe66de15..41d105e8dd7f8f 100644
--- a/cc/base/features.h
+++ b/cc/base/features.h
@@ -47,6 +47,12 @@ CC_BASE_EXPORT BASE_DECLARE_FEATURE(kScrollSnapCoveringAvoidNestedSnapAreas);
 // allowing much more natural scrolling within these areas.
 CC_BASE_EXPORT BASE_DECLARE_FEATURE(kScrollSnapCoveringUseNativeFling);
 
+// When enabled, if a snap container is snapping to a large snap area, it will
+// snap to the closest covering position if it is closer than the aligned
+// position. This avoid unnecessary jumps that attempt to honor the
+// scroll-snap-align value.
+CC_BASE_EXPORT BASE_DECLARE_FEATURE(kScrollSnapPreferCloserCovering);
+
 // When enabled, cc will show blink's Web-Vital metrics inside its heads up
 // display.
 CC_BASE_EXPORT BASE_DECLARE_FEATURE(kHudDisplayForPerformanceMetrics);
diff --git a/cc/input/scroll_snap_data.cc b/cc/input/scroll_snap_data.cc
index aa9a952efaea01..3e07083b5cc85d 100644
--- a/cc/input/scroll_snap_data.cc
+++ b/cc/input/scroll_snap_data.cc
@@ -133,6 +133,15 @@ absl::optional<SnapSearchResult> SearchResultForDodgingRange(
   return result;
 }
 
+bool CanCoverSnapportOnAxis(SearchAxis axis,
+                            const gfx::RectF& container_rect,
+                            const gfx::RectF& area_rect) {
+  return (axis == SearchAxis::kY &&
+          area_rect.height() >= container_rect.height()) ||
+         (axis == SearchAxis::kX &&
+          area_rect.width() >= container_rect.width());
+}
+
 }  // namespace
 
 SnapSearchResult::SnapSearchResult(float offset, const gfx::RangeF& range)
@@ -504,11 +513,10 @@ SnapContainerData::FindClosestValidAreaInternal(
 
     SnapSearchResult candidate = GetSnapSearchResult(axis, area);
     evaluate(candidate);
-
     if (should_consider_covering &&
-        IsSnapportCoveredOnAxis(axis, intended_position, area.rect)) {
-      // Since snap area will cover the snapport, we consider the intended
-      // position as a valid snap position.
+        (base::FeatureList::IsEnabled(features::kScrollSnapPreferCloserCovering)
+             ? CanCoverSnapportOnAxis(axis, rect_, area.rect)
+             : IsSnapportCoveredOnAxis(axis, intended_position, area.rect))) {
       if (absl::optional<SnapSearchResult> covering =
               FindCoveringCandidate(area, axis, candidate, intended_position)) {
         if (covering->snap_offset() == intended_position) {
diff --git a/cc/input/scroll_snap_data_unittest.cc b/cc/input/scroll_snap_data_unittest.cc
index dbb7d5cf74630e..66ed1692d9e721 100644
--- a/cc/input/scroll_snap_data_unittest.cc
+++ b/cc/input/scroll_snap_data_unittest.cc
@@ -798,11 +798,11 @@ TEST_F(ScrollSnapDataTest, CoveringWithOverlap1) {
   // Snap up, out of small_1.
   TestSnapPositionY(container, 2000, -150, Type::kCovered, 1800, 50, 1800);
   // Snap to small_2.
-  TestSnapPositionY(container, 1600, 600, Type::kAligned, 2300);
+  TestSnapPositionY(container, 1600, 601, Type::kAligned, 2300);
   // Scroll inside small_2.
   TestSnapPositionY(container, 2300, 50, Type::kCovered, 2350, 2300, 2400);
   // Snap out of small_2.
-  TestSnapPositionY(container, 2300, 150, Type::kCovered, 2600, 2600, 4750);
+  TestSnapPositionY(container, 2300, 200, Type::kCovered, 2600, 2600, 4750);
   // Snap up into small_2.
   TestSnapPositionY(container, 2700, -300, Type::kCovered, 2400, 2300, 2400);
 }
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap-2/scroll-start/scroll-start-with-scroll-snap.tentative.html b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap-2/scroll-start/scroll-start-with-scroll-snap.tentative.html
index b813fcc750ef5b..8bdac300ba332c 100644
--- a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap-2/scroll-start/scroll-start-with-scroll-snap.tentative.html
+++ b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap-2/scroll-start/scroll-start-with-scroll-snap.tentative.html
@@ -17,21 +17,27 @@
     }
 
     .spacer {
-      height: 100px;
+      height: 200px;
       width: 100px;
     }
 
     .scroller {
-      height: 100px;
+      height: 220px;
       width: 100px;
       overflow: scroll;
-      scroll-start: 200px;
       scroll-snap-type: both mandatory;
     }
 
+    #single_snap_scroller {
+      scroll-start: 100%;
+    }
+    #multi_snap_scroller {
+      scroll-start: 350px;
+    }
+
     .snap_point {
       width: 100px;
-      height: 100px;
+      height: 200px;
       scroll-snap-align: start;
     }
   </style>
@@ -53,11 +59,11 @@
     }, "snap overrides scroll-start position");
 
     test((t) => {
-      // scroll-start sets the initial scroll offset to the top of the third
-      // snap_point, so the scroller snaps to the third snap_point.
+      // scroll-start sets the initial scroll offset to 350px which is closer to
+      // the third snap point than the second, so the scroller should snap to
+      // the third snap_point.
       assert_equals(multi_snap_scroller.scrollTop,
-        snap_point_1.getBoundingClientRect().height +
-        snap_point_2.getBoundingClientRect().height,
+        multi_snap_scroller.scrollHeight - multi_snap_scroller.clientHeight,
         "scroller snaps to snap point closer to start position.");
     }, "scroller snaps based on scroll-start position");
   </script>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/input/snap-area-overflow-boundary-expected.txt b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/input/snap-area-overflow-boundary-expected.txt
deleted file mode 100644
index 59ec6bf723c0a5..00000000000000
--- a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/input/snap-area-overflow-boundary-expected.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-This is a testharness.js-based test.
-FAIL Keyboard scrolling with vertical snap-area overflow assert_equals: End boundary of snap-area is valid snap target expected 39 but got 449
-FAIL Mouse-wheel scrolling with vertical snap-area overflow assert_equals: End boundary of snap-area is valid snap target expected 100 but got 0
-Harness: the test ran to completion.
-
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/input/snap-area-overflow-boundary.html b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/input/snap-area-overflow-boundary.html
index c497845263f544..1f00353e893045 100644
--- a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/input/snap-area-overflow-boundary.html
+++ b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/input/snap-area-overflow-boundary.html
@@ -3,6 +3,9 @@
 <title></title>
 <meta name="assert" content="Test passes if snap is to the nearest edge">
 <style>
+  body {
+    margin: 0px;
+  }
   #scroller {
     scroll-snap-type: block mandatory;
     overflow-y: scroll;
@@ -105,7 +108,7 @@
   await keyPress(scroller, "ArrowDown");
   await waitForAnimationEnd(scrollTop);
   assert_equals(scroller.scrollTop,
-                next.clientTop,
+                next.offsetTop,
                 'Advance to next snap-area');
 
 }, "Keyboard scrolling with vertical snap-area overflow");
@@ -126,7 +129,7 @@
 
   // Target position for wheel scroll overshoots the boundary of the snap-area.
   // Ensure that we stop at the boundary.
-  const scrollAmount =
+  let scrollAmount =
       target.clientHeight - scroller.clientHeight - scroller.scrollTop + 1;
 
   await new test_driver.Actions()
@@ -137,13 +140,15 @@
                       'End boundary of snap-area is valid snap target');
 
   // Must not get stuck at a snap position. Since already at the end of the
-  // snap area, we should advance to the next.
+  // snap area, we should advance to the next. scrollAmount must be enough to
+  // advance to next snap position.
+  scrollAmount = next.clientHeight / 2 + 10 /* margin-bottom */;
   await new test_driver.Actions()
-       .scroll(50, 50, 0, 50, {origin: scroller})
+       .scroll(50, 50, 0, scrollAmount, {origin: scroller})
        .send();
   await waitForAnimationEnd(scrollTop);
   assert_equals(scroller.scrollTop,
-                next.clientTop,
+                next.offsetTop,
                 'Advance to next snap-area');
 
 }, "Mouse-wheel scrolling with vertical snap-area overflow");
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/overflowing-snap-areas-expected.txt b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/overflowing-snap-areas-expected.txt
deleted file mode 100644
index f498295757f891..00000000000000
--- a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/overflowing-snap-areas-expected.txt
+++ /dev/null
@@ -1,16 +0,0 @@
-This is a testharness.js-based test.
-PASS Snaps to the snap position if the snap area doesn't cover the snapport on x.
-PASS Snaps to the snap position if the snap area covers the snapport on x on the right border.
-PASS Snaps to the snap position if the snap area covers the snapport on x on the left border.
-PASS Snaps to a snap area (400) that is closer than the position that reveals the space between snap areas (600) within the larger snap area on x.
-PASS Snaps to a snap area (400) that is closer than the position that reveals the space between snap areas (600) within the larger snap area on y.
-PASS Snap within a snap area which covers snapport on x selects a valid snap position that avoids the overlapping areas at 800-1000 and 1400-1600.
-PASS Snap within a snap area which covers snapport on y selects a valid snap position that avoids the overlapping areas at 800-1000 and 1400-1600.
-PASS Snap to current scroll position which is a valid snap position, as the snap area covers snapport on x and there is no intruding snap area.
-PASS Snap to current scroll position which is a valid snap position, as the snap area covers snapport on y and there is no intruding snap area.
-FAIL Don't snap back even if scrollTo tries to scroll to positions which are outside of the scroll range and if a snap target element covers the snaport assert_equals: expected 3715 but got 2200
-PASS Snap to current scroll position on x as the area is covering x axis.However, we snap to the specified snap position on y as the area is not covering y axis.
-PASS snap to current scroll position on y as the area is covering y axis, even though that area is not the only scroll area at the same position.
-PASS snap to current scroll position on x as the area is covering x axis, even though that area is not the only scroll area at the same position.
-Harness: the test ran to completion.
-
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/scroll-on-large-element-not-covering-snapport.tentative.html b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/scroll-on-large-element-not-covering-snapport.tentative.html
index 2db00d414acea1..df4fc20ec8cf9c 100644
--- a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/scroll-on-large-element-not-covering-snapport.tentative.html
+++ b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/scroll-on-large-element-not-covering-snapport.tentative.html
@@ -80,12 +80,9 @@
 
   // Scroll back a bit.
   scroller.scrollBy(0, -10);
-  // Now, snap back to the third snap point because at the moment when scrolling
-  // up by 10px, the large third snap target element isn't covering over the
-  // snapport, i.e. only bottom 10px of the large element is in the snapport.
-  // See https://github.com/w3c/csswg-drafts/issues/7262
+  // This should snap to the bottom of the 3rd snap area and not all the way
+  // back up to its top.
   assert_equals(scroller.scrollLeft, 0);
-  assert_equals(scroller.scrollTop, 80);
-}, 'There\'s no valid snap positions on large element if it doesn\'t cover ' +
-   'the snapport');
+  assert_equals(scroller.scrollTop, 880);
+}, "snaps to bottom edge of large snap area that doesn't cover the snap port.");
 </script>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/scroll-snap-type-on-root-element.html b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/scroll-snap-type-on-root-element.html
index 2556ed99def609..a45ac92e5ac347 100644
--- a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/scroll-snap-type-on-root-element.html
+++ b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/scroll-snap-type-on-root-element.html
@@ -4,12 +4,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<body>
 <style>
-html {
+body {
   height: 8000px;
   width: 3000px;
+  margin: 0px;
 }
-
 #target {
   position: absolute;
   background-color: blue;
@@ -68,7 +69,13 @@
 
   window.scrollTo(200, 1800);
 
-  assert_equals(document.scrollingElement.scrollLeft, 100, "inline should snap");
+  // Though the target's width is 100vw, there may be room to scroll the window
+  // within the target because of the scrollbar width and the browser may snap
+  // to the right edge (instead of the left edge of the target, since it is
+  // closer to the offset of 200 and still a valid snap point) within this room.
+  const scrollbar_width = window.innerWidth - document.documentElement.clientWidth;
+  assert_approx_equals(document.scrollingElement.scrollLeft, 100, scrollbar_width, "inline should snap");
   assert_equals(document.scrollingElement.scrollTop, 1800, "block should not snap");
 }, "The writing-mode (horizontal-tb) on the body is used ");
 </script>
+</body>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000-ref.html b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000-ref.html
index 26b622e718c1c3..428eb3facb5256 100644
--- a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000-ref.html
+++ b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000-ref.html
@@ -35,17 +35,6 @@
 .ltr { direction: ltr; }
 .rtl { direction: rtl; }
 
-.TB.large.invert .target { top: auto; }
-.LR.large.invert .target { left: auto; }
-.RL.large.invert .target { right: auto; }
-
-.TB.ltr.large.invert .target { left:   auto; }
-.TB.rtl.large.invert .target { right:  auto; }
-.LR.ltr.large.invert .target { top:    auto; }
-.LR.rtl.large.invert .target { bottom: auto; }
-.RL.ltr.large.invert .target { top:    auto; }
-.RL.rtl.large.invert .target { bottom: auto; }
-
 /* not absolutizing the border colors, so that the test passes even if css-logical is not supported; */
 .large.invert {
   border: solid silver;
@@ -53,10 +42,40 @@
   border-inline-end-color: blue;
 }
 
+.TB.large.invert .target::before { top: auto; }
+.LR.large.invert .target::before { left: auto; }
+.RL.large.invert .target::before { right: auto; }
+
+.TB.ltr.large.invert .target::before { left:   auto; }
+.TB.rtl.large.invert .target::before { right:  auto; }
+.LR.ltr.large.invert .target::before { top:    auto; }
+.LR.rtl.large.invert .target::before { bottom: auto; }
+.RL.ltr.large.invert .target::before { top:    auto; }
+.RL.rtl.large.invert .target::before { bottom: auto; }
+
+.large.invert .target::before {
+  width: 9px;
+  height: 9px;
+  background: orange;
+  top: 0; left: 0; right: 0; bottom: 0;
+  position: absolute;
+  content: '';
+}
+
+.large.invert .target {
+  display: block;
+  background: none;
+  width: 30px;
+  height: 30px;
+  border-block-start: 20px solid red;
+  border-inline-start: 20px solid red;
+}
+
 </style>
 
 <p>Test passes if there is an orange square tucked into each blue corner without gaps,
-and there is no red.
+and there is no red, except for the large inverted cases which should have red
+in the silver corner and smaller orange boxes in the blue corner.
 
 <div class="wrapper">
 <!-- Simple Small Cases -->
@@ -87,6 +106,7 @@
 
 <!-- Target-inverted Small Cases
      This row should be identical to the previous. -->
+
 <div class="scroller TB ltr small invert">
   <div class="target"></div>
 </div>
@@ -165,3 +185,4 @@
 </div>
 
 </div> <!-- wrapper -->
+
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000.html b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000.html
index e5d3dd9358bdab..f44317c8585e87 100644
--- a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000.html
+++ b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000.html
@@ -78,7 +78,8 @@
 </style>
 
 <p>Test passes if there is an orange square tucked into each blue corner without gaps,
-and there is no red.
+  and there is no red, except for the large inverted cases which should have red
+  in the silver corner and smaller orange boxes in the blue corner.
 
 <div class="wrapper">
 <!-- Simple Small Cases -->
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-into-covering-area.html b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-into-covering-area.html
new file mode 100644
index 00000000000000..2cc8741f5ef2e0
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-into-covering-area.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" />
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <script src="/resources/testdriver.js"></script>
+  <script src="/resources/testdriver-actions.js"></script>
+  <script src="/resources/testdriver-vendor.js"></script>
+  <script src="/dom/events/scrolling/scroll_support.js"></script>
+</head>
+
+<body>
+  <style>
+    #scroller {
+      overflow: scroll;
+      height: 500px;
+      width: 500px;
+      background-color: blue;
+      scroll-snap-type: y mandatory;
+      position: absolute;
+    }
+
+    .snap_point {
+      scroll-snap-align: start;
+      width: 40%;
+      position: relative;
+      left: 30%;
+    }
+
+    .big {
+      height: 1000%;
+      background-color: pink;
+      border: solid 1px red;
+    }
+
+    .small {
+      height: 50%;
+      background-color: purple;
+      border: solid 1px black;
+    }
+  </style>
+  <div id="scroller">
+    <div class="big snap_point" id="big_snap_point"></div>
+    <div class="small snap_point">
+    <button id="scrollerButton">scrollerButton</button>
+    </div>
+  </div>
+  <script>
+    promise_test(async(t) => {
+      const x = scroller.clientWidth / 2;
+      const y = scroller.clientHeight / 2;
+
+      // Scroll all the way down to the smaller snap area which doesn't cover
+      // the snapport.
+      let scrollend_promise = new Promise((resolve) => {
+        scroller.addEventListener("scrollend", resolve);
+      });
+      scroller.scrollTop = scroller.scrollHeight;
+      await scrollend_promise;
+
+      // Scroll up with one press of the arrow-up button.
+      scrollend_promise = new Promise((resolve) => {
+        scroller.addEventListener("scrollend", resolve);
+      });
+      const arrowUp = '\uE013';
+      await test_driver.send_keys(scrollerButton, arrowUp);
+
+      await scrollend_promise;
+      assert_equals(scroller.scrollTop, big_snap_point.offsetHeight - scroller.clientHeight,
+          "scroller is snapped to the bottom of the larger snap area, not the top");
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-to-visible-areas-margin-both.html b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-to-visible-areas-margin-both.html
index f148036a1d5d71..4c3c3c11a642b7 100644
--- a/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-to-visible-areas-margin-both.html
+++ b/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/snap-to-visible-areas-margin-both.html
@@ -65,10 +65,14 @@
   scroller.scrollTo(0, 0);
   assert_equals(scroller.scrollLeft, 0);
   assert_equals(scroller.scrollTop, 0);
-  scroller.scrollTo(500, 600);
+  // 750 and 650 are picked as those are closer to top left of the intersection
+  // (800, 800) of the snap areas where the browser should snap. This makes the
+  // intersection a closer snap option than a covering option that the browser
+  // might choose where the snapport is aligned on the bottom and right.
+  scroller.scrollTo(650, 750);
   assert_equals(scroller.scrollLeft, 800);
   assert_equals(scroller.scrollTop, 800);
-  scroller.scrollTo(600, 500);
+  scroller.scrollTo(750, 650);
   assert_equals(scroller.scrollLeft, 800);
   assert_equals(scroller.scrollTop, 800);
 }, 'Snap to area such that only the scroll margin from both axes\' areas are \
diff --git a/third_party/blink/web_tests/external/wpt/dom/events/scrolling/scrollend-with-snap-on-fractional-offset.html b/third_party/blink/web_tests/external/wpt/dom/events/scrolling/scrollend-with-snap-on-fractional-offset.html
index 74dcb0f0bd068f..d1f50304add2ac 100644
--- a/third_party/blink/web_tests/external/wpt/dom/events/scrolling/scrollend-with-snap-on-fractional-offset.html
+++ b/third_party/blink/web_tests/external/wpt/dom/events/scrolling/scrollend-with-snap-on-fractional-offset.html
@@ -16,7 +16,7 @@
 
       .box {
         scroll-snap-align: start;
-        width: 600px;
+        width: 400px;
         position: absolute;
         top: 200px;
       }