helper_bug1719330.html (1727B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Tests that the arrow down key does not scroll by more than 1 element</title> 6 <script src="/tests/SimpleTest/EventUtils.js"></script> 7 <script type="application/javascript" src="apz_test_utils.js"></script> 8 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 9 <script src="/tests/SimpleTest/paint_listener.js"></script> 10 <style> 11 .time-column { 12 width: 68px; 13 height: 28px; 14 15 overflow-y: scroll; 16 scroll-snap-type: y mandatory; 17 18 border-radius: 4px; 19 border: 1px solid red; 20 } 21 22 .time-item { 23 scroll-snap-align: center; 24 height: 100%; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="time-column"></div> 30 31 <script type="application/javascript"> 32 33 function waitForScrollEvent(target) { 34 return new Promise(resolve => { 35 target.addEventListener("scroll", resolve, { once: true }); 36 }); 37 } 38 39 async function test() { 40 const timeCol = document.querySelector('.time-column'); 41 42 for (let i = 0; i < 60; i++) { 43 let item = document.createElement('div'); 44 item.classList.add('time-item'); 45 item.textContent = i; 46 timeCol.appendChild(item); 47 } 48 49 is(timeCol.scrollTop, 0, "should begin with no scroll (1)"); 50 51 let waitForScroll = waitForScrollEvent(timeCol); 52 53 timeCol.focus(); 54 window.synthesizeKey("KEY_ArrowDown"); 55 56 await waitForScroll; 57 58 ok(timeCol.scrollTop > 0, "should have scrolled (2)"); 59 ok(timeCol.scrollTop < 30, "should have not scrolled too far (3)"); 60 } 61 62 waitUntilApzStable().then(test).then(subtestDone, subtestFailed); 63 </script> 64 </body> 65 </html>