snap-into-covering-area.tentative.html (2143B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/dom/events/scrolling/scroll_support.js"></script> 12 </head> 13 14 <body> 15 <style> 16 #scroller { 17 overflow: scroll; 18 height: 500px; 19 width: 500px; 20 background-color: blue; 21 scroll-snap-type: y mandatory; 22 position: absolute; 23 } 24 25 .snap_point { 26 scroll-snap-align: start; 27 width: 40%; 28 position: relative; 29 left: 30%; 30 } 31 32 .big { 33 height: 1000%; 34 background-color: pink; 35 border: solid 1px red; 36 } 37 38 .small { 39 height: 50%; 40 background-color: purple; 41 border: solid 1px black; 42 } 43 </style> 44 <div id="scroller"> 45 <div class="big snap_point" id="big_snap_point"></div> 46 <div class="small snap_point"> 47 <button id="scrollerButton">scrollerButton</button> 48 </div> 49 </div> 50 <script> 51 promise_test(async(t) => { 52 const x = scroller.clientWidth / 2; 53 const y = scroller.clientHeight / 2; 54 55 // Scroll all the way down to the smaller snap area which doesn't cover 56 // the snapport. 57 let scrollend_promise = new Promise((resolve) => { 58 scroller.addEventListener("scrollend", resolve); 59 }); 60 scroller.scrollTop = scroller.scrollHeight; 61 await scrollend_promise; 62 63 // Scroll up with one press of the arrow-up button. 64 scrollend_promise = new Promise((resolve) => { 65 scroller.addEventListener("scrollend", resolve); 66 }); 67 const arrowUp = '\uE013'; 68 await test_driver.send_keys(scrollerButton, arrowUp); 69 70 await scrollend_promise; 71 assert_equals(scroller.scrollTop, big_snap_point.offsetHeight - scroller.clientHeight, 72 "scroller is snapped to the bottom of the larger snap area, not the top"); 73 }); 74 </script> 75 </body> 76 77 </html>