unreachable-snap-positions-001.html (1296B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#unreachable" /> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 div { 7 position: absolute; 8 margin: 0px; 9 } 10 #scroller { 11 height: 500px; 12 width: 500px; 13 overflow: hidden; 14 scroll-snap-type: both mandatory; 15 } 16 #unreachable { 17 width: 300px; 18 height: 300px; 19 top: -100px; 20 left: -100px; 21 background-color: blue; 22 scroll-snap-align: start; 23 } 24 #reachable { 25 width: 300px; 26 height: 300px; 27 top: 400px; 28 left: 400px; 29 background-color: blue; 30 scroll-snap-align: start; 31 } 32 </style> 33 34 <div id="scroller"> 35 <div style="width: 2000px; height: 2000px;"></div> 36 <div id="unreachable"></div> 37 <div id="reachable"></div> 38 </div> 39 40 <script> 41 test(() => { 42 // Firstly move to the reachable snap position. 43 scroller.scrollTo(400, 400); 44 assert_equals(scroller.scrollLeft, 400); 45 assert_equals(scroller.scrollTop, 400); 46 47 // Then move to a position between the unreachable snap position and the 48 // reachable position but closer to the unreachable one. 49 scroller.scrollTo(100, 100); 50 assert_equals(scroller.scrollLeft, 0); 51 assert_equals(scroller.scrollTop, 0); 52 }, "Snaps to the positions defined by the element as much as possible"); 53 </script>