diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-element.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-element.html
new file mode 100644
index 000000000000..f15a291f08a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-element.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="help" href="https://drafts.csswg.org/css-scroll-snap" />
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/dom/events/scrolling/scroll_support.js"></script>
+    <script src="/resources/testdriver.js"></script>
+    <script src="/resources/testdriver-actions.js"></script>
+    <script src="/resources/testdriver-vendor.js"></script>
+    <script src="resources/common.js" ></script>
+  </head>
+  <body>
+    <style>
+      .scroller {
+        overflow: scroll;
+        position: relative;
+        height: 400px;
+        width: 400px;
+        border:solid 1px black;
+        scroll-snap-type: y mandatory;
+      }
+      .no-snap { scroll-snap-align: none }
+      .scroller div:focus {
+        border: solid 1px red;
+      }
+      .large-space {
+        height: 300vh;
+        width: 300vw;
+      }
+      .target {
+        scroll-snap-align: start;
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        border: solid 1px black;
+      }
+      .top {
+        top: 0px;
+      }
+      .left {
+        left: 0px;
+      }
+      .right {
+        left: 200px;
+      }
+      .bottom {
+        top: 200px;
+      }
+      </style>
+    <div id="scroller" class="scroller">
+      <div class="large-space no-snap" tabindex="1" id="space"></div>
+      <div id="topleft" tabindex="1" class="top left target">top left</div>
+      <div id="topright" tabindex="1" class="top right target">top right</div>
+      <div id="bottomleft" tabindex="1" class="bottom left target">bottom left</div>
+      <div id="bottomright" tabindex="1" class="bottom right target">bottom right</div>
+    </div>
+    <script>
+      window.onload = () => {
+        const bottomright = document.getElementById("bottomright");
+        const bottomleft = document.getElementById("bottomleft");
+        const scroller = document.getElementById("scroller");
+
+        async function commonInitialization() {
+          await waitForCompositorCommit();
+          assert_equals(scroller.scrollTop, 0, "snapped to top row");
+        }
+
+        promise_test(async (t) => {
+          await commonInitialization();
+
+          focusAndAssert(bottomright);
+          await runScrollSnapSelectionVerificationTest(t, scroller,
+                                                       [bottomright,
+                                                        bottomleft],
+                                    /*expected_target=*/bottomright, "y");
+
+          focusAndAssert(bottomleft);
+          await runScrollSnapSelectionVerificationTest(t, scroller,
+                                                       [bottomright,
+                                                        bottomleft],
+                                    /*expected_target=*/bottomleft, "y");
+        }, "scroller selects focused target from aligned choices on snap");
+
+        promise_test(async (t) => {
+          t.add_cleanup(() => {
+            bottomright.style.left = "200px";
+          })
+          await commonInitialization();
+
+          // Move bottomright out of the snapport.
+          bottomright.style.left = "500px";
+
+          // Set focus on bottomright without scrolling to it.
+          focusAndAssert(bottomright, true);
+          await runScrollSnapSelectionVerificationTest(t, scroller,
+                                                       [bottomright,
+                                                        bottomleft],
+                                    /*expected_target=*/bottomleft, "y");
+        }, "out-of-viewport focused element is not the selected snap target.");
+
+        promise_test(async(t) => {
+          t.add_cleanup(() => {
+            bottomleft.style.top = "200px";
+          });
+          await commonInitialization();
+
+          // Set focus on bottomright without scrolling to it.
+          focusAndAssert(bottomright, true);
+
+          // Move bottomleft below bottomright.
+          bottomleft.style.top = "400px";
+
+          // Snap to bottomleft.
+          scroller.scrollTop = bottomleft.offsetTop;
+
+          // Test that if bottomright is also shifted so that it is aligned with
+          // bottomleft, bottomleft remains the selected snap target, despite
+          // bottomright's having focus.
+          await runLayoutSnapSeletionVerificationTest(t, scroller, [bottomright],
+                                                bottomleft, "y");
+        }, "scroller follows selected snap target through layout shift," +
+           "regardless of focus");
+
+      }
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-nested-containers.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-nested-containers.html
new file mode 100644
index 000000000000..a6a087316fdc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-nested-containers.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="help" href="https://drafts.csswg.org/css-scroll-snap" />
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/dom/events/scrolling/scroll_support.js"></script>
+    <script src="/resources/testdriver.js"></script>
+    <script src="/resources/testdriver-actions.js"></script>
+    <script src="/resources/testdriver-vendor.js"></script>
+    <script src="resources/common.js" ></script>
+  </head>
+  <body>
+    <style>
+      .snap {
+        scroll-snap-align: start;
+      }
+      .placeholder {
+        height: 40%;
+        width: 40%;
+        position: absolute;
+        top: 0px;
+        border: solid 1px black;
+      }
+      .right {
+        left: 50%;
+      }
+      .container {
+        position: relative;
+        border: solid 1px blue;
+        overflow: scroll;
+        scroll-snap-type: y mandatory;
+      }
+      .bigcontainer {
+        height: 1000px;
+        width: 1000px;
+      }
+      .smallcontainer {
+        height: 400px;
+        width: 400px;
+        position: absolute;
+        border: solid 1px blue;
+        top: 500px;
+        overflow: scroll;
+        scroll-snap-type: y mandatory;
+      }
+      .large-space {
+        height: 300vh;
+        width: 300vw;
+        position: absolute;
+      }
+      .target {
+        top: 50%;
+        width: 40%;
+        height: 40%;
+        position: absolute;
+        border: solid 1px red;
+      }
+      .target:focus {
+        border:solid 2px green;
+      }
+    </style>
+    <div class="bigcontainer container" id="outercontainer">
+      <div class="large-space"></div>
+      <div id="leftplaceholder" class="snap placeholder">LPH (outer)</div>
+      <div id="rightplaceholder" class="snap placeholder right">RPH (outer)</div>
+      <div id="leftcontainer" class="snap smallcontainer">
+        <div class="large-space"></div>
+        <div class="snap placeholder"></div>
+        <div class="snap placeholder right"></div>
+        <div id="lefttarget1" tabindex="1" class="snap target"></div>
+        <div id="lefttarget2" tabindex="1" class="snap target right"></div>
+      </div>
+      <div id="rightcontainer" class="snap smallcontainer right">
+        <div class="large-space"></div>
+        <div class="snap placeholder"></div>
+        <div class="snap placeholder right"></div>
+        <div id="righttarget1" tabindex="1" class="snap target"></div>
+        <div id="righttarget2" tabindex="1" class="snap target right"></div>
+      </div>
+    </div>
+    <script>
+      // This test verifies that a snap container (outer) which contains another
+      // snap container (inner) snaps with awareness of focus on children of the
+      // inner container, i.e. outer should prefer to select the snap area whose
+      // child has focus even if there is an intermediate snap container between
+      // the child and outer.
+      window.onload = () => {
+        const lefttarget1 = document.getElementById("lefttarget1");
+        const righttarget1 = document.getElementById("righttarget1");
+        const leftcontainer = document.getElementById("leftcontainer");
+        const rightcontainer = document.getElementById("rightcontainer");
+        const outercontainer = document.getElementById("outercontainer");
+
+        promise_test(async (t) => {
+          await waitForCompositorCommit();
+
+          focusAndAssert(lefttarget1, /*preventScroll=*/true);
+          await runScrollSnapSelectionVerificationTest(t, outercontainer,
+              [leftcontainer, rightcontainer], leftcontainer, "y");
+
+          focusAndAssert(righttarget1, /*preventScroll=*/true);
+          await runScrollSnapSelectionVerificationTest(t, outercontainer,
+              [leftcontainer, rightcontainer], rightcontainer, "y");
+        }, "Snap container prefers focused nested snap target.");
+      }
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/resources/common.js b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/resources/common.js
new file mode 100644
index 000000000000..6ceec9118c5a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/resources/common.js
@@ -0,0 +1,148 @@
+// Utility functions for scroll snap tests which verify User-Agents' snap point
+// selection logic when multiple snap targets are aligned.
+// It depends on methods in /resources/testdriver-actions.js and
+// /dom/event/scrolling/scroll_support.js so html files using these functions
+// should include those files as <script>s.
+
+// This function should be used by scroll snap WPTs wanting to test snap target
+// selection when scrolling to multiple aligned targets.
+// It assumes scroll-snap-align: start alignment and tries to align to the list
+// of snap targets provided, |elements|, which are all expected to be at the
+// same offset.
+async function scrollToAlignedElementsInAxis(scroller, elements, axis) {
+  let target_offset_y = null;
+  let target_offset_x = null;
+  if (axis == "y") {
+    for (const e of elements) {
+      if (target_offset_y) {
+        assert_equals(e.offsetTop, target_offset_y,
+          `${e.id} is at y offset ${target_offset_y}`);
+      } else {
+        target_offset_y = e.offsetTop;
+      }
+    }
+    assert_equals();
+  } else {
+    for (const e of elements) {
+      if (target_offset_x) {
+        assert_equals(e.offsetLeft, target_offset_x,
+          `${e.id} is at x offset ${target_offset_x}`);
+      } else {
+        target_offset_x = e.offsetLeft;
+      }
+    }
+  }
+  assert_not_equals(target_offset_x || target_offset_y, null);
+
+  const scrollend_promise = waitForScrollendEventNoTimeout(scroller);
+  await new test_driver.Actions().scroll(0, 0,
+    (target_offset_x || 0) - scroller.scrollLeft,
+    (target_offset_y || 0) - scroller.scrollTop,
+    { origin: scroller })
+    .send();
+  await scrollend_promise;
+  if (axis == "y") {
+    assert_equals(scroller.scrollTop, target_offset_y, "vertical scroll done");
+  } else {
+    assert_equals(scroller.scrollLeft,target_offset_x, "horizontal scroll done");
+  }
+}
+
+// This function verifies the snap target that a scroller picked by triggerring
+// a layout change and observing which target is followed. Tests using this
+// method should ensure that there is at least 100px of room to scroll in the
+// desired axis.
+// It assumes scroll-snap-align: start alignment.
+function verifySelectedSnapTarget(scroller, expected_snap_target, axis) {
+  // Save initial style.
+  const initial_left = getComputedStyle(expected_snap_target).left;
+  const initial_top = getComputedStyle(expected_snap_target).top;
+  if (axis == "y") {
+    // Move the expected snap target along the y axis.
+    const initial_scroll_top = scroller.scrollTop;
+    const target_top = expected_snap_target.offsetTop + 100;
+    expected_snap_target.style.top = `${target_top}px`;
+    assert_equals(scroller.scrollTop, expected_snap_target.offsetTop,
+      `scroller followed ${expected_snap_target.id} after layout change`);
+    assert_not_equals(scroller.scrollTop, initial_scroll_top,
+      "scroller actually scrolled in y axis");
+  } else {
+    // Move the expected snap target along the y axis.
+    const initial_scroll_left = scroller.scrollLeft;
+    const target_left = expected_snap_target.offsetLeft + 100;
+    expected_snap_target.style.left = `${target_left}px`;
+    assert_equals(scroller.scrollLeft, expected_snap_target.offsetLeft,
+      `scroller followed ${expected_snap_target.id} after layout change`);
+    assert_not_equals(scroller.scrollLeft, initial_scroll_left,
+      "scroller actually scrolled in x axis");
+  }
+  // Undo style changes.
+  expected_snap_target.style.top = initial_top;
+  expected_snap_target.style.left = initial_left;
+}
+
+// This is a utility function for tests which verify that the correct element
+// is snapped to when snapping at the end of a scroll.
+async function runScrollSnapSelectionVerificationTest(t, scroller, aligned_elements,
+                                                expected_target, axis) {
+  // Save initial scroll offset.
+  const initial_scroll_left = scroller.scrollLeft;
+  const initial_scroll_top = scroller.scrollTop;
+  await scrollToAlignedElementsInAxis(scroller, aligned_elements, axis);
+  verifySelectedSnapTarget(scroller, expected_target, axis);
+  // Restore initial scroll offsets.
+  const scrollend_promise = new Promise((resolve) => {
+    scroller.addEventListener("scrollend", resolve);
+  });
+  scroller.scrollTo(initial_scroll_left, initial_scroll_top);
+  await scrollend_promise;
+}
+
+// This is a utility function for tests verifying that a layout shift does not
+// cause a scroller to change its selected snap target.
+// It assumes the element to be aligned have scroll-snap-align: start.
+// It tries to align the list of snap targets provided, |elements| with the
+// current snap target.
+function shiftLayoutToAlignElements(elements, target, axis) {
+  for (let element of elements) {
+    if (axis == "y") {
+      element.style.top = `${target.offsetTop}px`;
+    } else {
+      element.style.left = `${target.offsetLeft}px`;
+    }
+  }
+}
+
+// This is a utility function for tests verifying that a layout shift does not
+// cause a scroller to change its selected snap target.
+// It assumes scroll-snap-align: start alignment.
+async function runLayoutSnapSeletionVerificationTest(t, scroller, elements_to_align,
+  expected_target, axis) {
+  // Save initial scroll offsets and position.
+  const initial_scroll_left = scroller.scrollLeft;
+  const initial_scroll_top = scroller.scrollTop;
+  let initial_tops = [];
+  for (const element of elements_to_align) {
+    initial_tops.push(getComputedStyle(element).top);
+  }
+
+  shiftLayoutToAlignElements(elements_to_align, expected_target, axis);
+  verifySelectedSnapTarget(scroller, expected_target, axis);
+
+  // Restore initial scroll offset and position states.
+  let num_elements = initial_tops.length;
+  for (let i = 0; i < num_elements; i++) {
+    elements_to_align[i].style.top = initial_tops[i];
+  }
+  // Restore initial scroll offsets.
+  const scrollend_promise = new Promise((resolve) => {
+    scroller.addEventListener("scrollend", resolve);
+  });
+  scroller.scrollTo(initial_scroll_left, initial_scroll_top);
+  await scrollend_promise;
+}
+
+function focusAndAssert(element, preventScroll=false) {
+  element.focus({preventScroll: preventScroll});
+  assert_equals(document.activeElement, element);
+}
