Add a test case for unreachable snap positions.

The snap alignment position of the target element is the top left of the target and the position is located out of scroll port (top: -100px, left: -100px). Even so we try to snap a position as much as possible. From the spec [1]; If a snap position is unreachable as specified, such that aligning to it would require scrolling the scroll container’s viewport past the edge of its scrollable overflow region, the used snap position for this snap area is the position resulting from scrolling as much as possible in each relevant axis toward the desired snap position. [1] https://drafts.csswg.org/css-scroll-snap-1/#unreachabLe Depends on D21630 Differential Revision: https://phabricator.services.mozilla.com/D21631 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1373835 gecko-commit: 29466eb6ee253cfd9eb21d6cf6e8d31a0bdd0c6d gecko-integration-branch: central gecko-reviewers: botond
web-platform-tests · Apr 25, 2019 · d524936 · d524936
1 parent e8623ce
commit d524936
Showing 1 changed file with 53 additions and 0 deletions.
diff --git a/css/css-scroll-snap/unreachable-snap-positions.html 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>