scroll-snap-stop-002-nested.tentative.html (1767B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop" /> 3 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-overflow" /> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 div { 8 position: absolute; 9 } 10 .scroller { 11 width: 400px; 12 height: 100px; 13 overflow: scroll; 14 scroll-snap-type: x mandatory; 15 } 16 #space { 17 left: 0px; 18 top: 0px; 19 width: 2100px; 20 height: 50px; 21 } 22 .target { 23 width: 50px; 24 height: 50px; 25 scroll-snap-align: start; 26 top: 0px; 27 } 28 </style> 29 30 <div class="scroller" id="scroller7"> 31 <div id="space"></div> 32 <div class="target" style="left: 0px;"></div> 33 <div class="target" style="left: 400px; width: 900px;"></div> 34 <div class="target" style="left: 900px; scroll-snap-stop: always;"></div 35 </div> 36 37 <script> 38 39 test(() => { 40 assert_equals(scroller7.scrollLeft, 0); 41 assert_equals(scroller7.scrollTop, 0); 42 43 // start dest always 44 // |-------------------------|================|=====|===== 45 // 0 400 700 900 46 47 // Scoll on the element whose snap area is larger than the snapport. 48 scroller7.scrollBy(600, 0); 49 // Stops before the smaller snap area @ 900px enters the snapport. 50 assert_equals(scroller7.scrollLeft + scroller7.clientWidth, 900); 51 assert_equals(scroller7.scrollTop, 0); 52 53 scroller7.scrollTo(0, 0); 54 scroller7.scrollBy(800, 0); 55 // Now the smaller snap area is closer, so we snap to it. 56 assert_equals(scroller7.scrollLeft, 900); 57 assert_equals(scroller7.scrollTop, 0); 58 }, "`scroll-snap-stop: always` snap point is further than the scroll " + 59 "destination and a snap area covers the snapport"); 60 61 </script>