scroll-on-large-element-not-covering-snapport.tentative.html (2758B)
1 <!DOCTYPE html> 2 <title> 3 A test case that scrolling to a point on large element where the snap area 4 doesn't cover over the snapport 5 </title> 6 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-overflow"/> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 div { 11 position: absolute; 12 width: 100%; 13 } 14 #scroller { 15 left: 10px; 16 height: 200px; 17 width: 100px; 18 overflow-y: scroll; 19 overflow-x: hidden; 20 scroll-snap-type: y mandatory; 21 } 22 .snap { 23 scroll-snap-align: start; 24 background-color: green; 25 } 26 .target { 27 background-color: red; 28 border-radius: 100%; 29 height: 88px; 30 top: 536px; 31 } 32 </style> 33 <div id="scroller"> 34 <div style="height: 2000px;"></div> 35 <div class="snap" style="top: 0px; height: 40px;">1</div> 36 <div class="snap" style="top: 40px; height: 40px;">2</div> 37 <div class="snap" style="top: 80px; height: 1000px;">3</div> 38 <div class="snap" style="top: 1080px; height: 40px;">4</div> 39 <div class="snap" style="top: 1120px; height: 40px;">5</div> 40 <div class="target"></div> 41 </div> 42 <script> 43 test(() => { 44 const scroller = document.getElementById("scroller"); 45 46 scroller.scrollBy(0, 10); 47 // Snap to the first snap point. 48 assert_equals(scroller.scrollLeft, 0); 49 assert_equals(scroller.scrollTop, 40); 50 51 scroller.scrollBy(0, 10); 52 // Snap to the second snap point. 53 assert_equals(scroller.scrollLeft, 0); 54 assert_equals(scroller.scrollTop, 80); 55 56 scroller.scrollBy(0, 100); 57 // Snap to the given scrolling position since the third snap target element 58 // is larger than the snapport. 59 assert_equals(scroller.scrollLeft, 0); 60 assert_equals(scroller.scrollTop, 180); 61 62 scroller.scrollBy(0, 100); 63 // Again, snap to the given scrolling position. 64 assert_equals(scroller.scrollLeft, 0); 65 assert_equals(scroller.scrollTop, 280); 66 67 // Scroll to a point where the third target element is still covering over the 68 // snapport. 69 scroller.scrollBy(0, 600); 70 assert_equals(scroller.scrollLeft, 0); 71 // Again, snap to the given scrolling position. 72 assert_equals(scroller.scrollTop, 880); 73 74 // Scroll to a point where the third target element is no longer convering 75 // over the snapport, rather the forth snap point is in the snapport. 76 scroller.scrollBy(0, 10); 77 // Now, snap to the forth snap point. 78 assert_equals(scroller.scrollLeft, 0); 79 assert_equals(scroller.scrollTop, 1080); 80 81 // Scroll back a bit. 82 scroller.scrollBy(0, -10); 83 // This should snap to the bottom of the 3rd snap area and not all the way 84 // back up to its top. 85 assert_equals(scroller.scrollLeft, 0); 86 assert_equals(scroller.scrollTop, 880); 87 }, "snaps to bottom edge of large snap area that doesn't cover the snap port."); 88 </script>