not-resnap-outside-proximity-threshold.html (1862B)
1 <!DOCTYPE html> 2 <title> 3 Not re-snap once after a scroll operation has finished without snapping 4 because the scroll destination was outside of the snap proximity threshold. 5 </title> 6 <!-- This test assumes that all major browsers' default scroll-snap proximity 7 thresholds are greater than 200px. --> 8 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> 9 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1780154"> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <style> 13 div { 14 position: absolute; 15 margin: 0; 16 } 17 18 #scroller { 19 height: 600px; 20 width: 600px; 21 overflow: hidden; 22 scroll-snap-type: y proximity; 23 } 24 25 .snap { 26 width: 300px; 27 height: 300px; 28 background-color: green; 29 scroll-snap-align: start; 30 } 31 32 .area { 33 width: 2000px; 34 height: 2000px; 35 } 36 </style> 37 38 <div id="scroller"> 39 <div class="area"></div> 40 <div class="snap" style="top: 0px;"></div> 41 <div class="snap" style="top: 500px;"></div> 42 </div> 43 44 <script> 45 test(() => { 46 // The initial snap position is at (0, 0). 47 assert_equals(scroller.scrollTop, 0); 48 assert_equals(scroller.scrollLeft, 0); 49 50 // Scroll to a position where it's outside of the scroll-snap proximity 51 // threshold, so that it won't trigger snapping. 52 scroller.scrollTo(0, 250); 53 54 assert_equals(scroller.scrollTop, 250); 55 assert_equals(scroller.scrollLeft, 0); 56 57 // Changing the initial snap target position, but still it's outside of the 58 // threshold. 59 document.querySelectorAll(".snap")[0].style.top = "10px"; 60 61 // Not re-snap to the last snap point. 62 assert_equals(scroller.scrollTop, 250); 63 assert_equals(scroller.scrollLeft, 0); 64 }, "Not re-snap once after a scroll operation has finished without snapping " + 65 "because the scroll destination was outside of the snap proximity threshold."); 66 </script>