diff --git a/css/css-scroll-snap/unreachable-snap-positions.html b/css/css-scroll-snap/unreachable-snap-positions.html
new file mode 100644
index 00000000000000..ca4f6033cece74
--- /dev/null
+++ b/css/css-scroll-snap/unreachable-snap-positions.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#unreachable" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+div {
+  position: absolute;
+  margin: 0px;
+}
+#scroller {
+  height: 500px;
+  width: 500px;
+  overflow: hidden;
+  scroll-snap-type: both mandatory;
+}
+#unreachable {
+  width: 300px;
+  height: 300px;
+  top: -100px;
+  left: -100px;
+  background-color: blue;
+  scroll-snap-align: start;
+}
+#reachable {
+  width: 300px;
+  height: 300px;
+  top: 400px;
+  left: 400px;
+  background-color: blue;
+  scroll-snap-align: start;
+}
+</style>
+
+<div id="scroller">
+  <div style="width: 2000px; height: 2000px;"></div>
+  <div id="unreachable"></div>
+  <div id="reachable"></div>
+</div>
+
+<script>
+test(() => {
+  // Firstly move to the reachable snap position.
+  scroller.scrollTo(400, 400);
+  assert_equals(scroller.scrollLeft, 400);
+  assert_equals(scroller.scrollTop, 400);
+
+  // Then move to a position between the unreachable snap position and the
+  // reachable position but closer to the unreachable one.
+  scroller.scrollTo(100, 100);
+  assert_equals(scroller.scrollLeft, 0);
+  assert_equals(scroller.scrollTop, 0);
+}, "Snaps to the positions defined by the element as much as possible");
+</script>
