<!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>