scrollend-with-snap-on-fractional-offset.html (2875B)
1 <!DOCTYPE html> 2 <html> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="scroll_support.js"></script> 6 <body> 7 <style> 8 .scroller { 9 scroll-snap-type: x mandatory; 10 overflow-x: auto; 11 overflow-y: hidden; 12 position: relative; 13 height: 500px; 14 width: 500px; 15 } 16 17 .box { 18 scroll-snap-align: start; 19 width: 400px; 20 position: absolute; 21 top: 200px; 22 } 23 24 #box1 { 25 background-color: red; 26 height: 500px; 27 } 28 29 #box2 { 30 background-color: yellow; 31 height: 300px; 32 left: 700.5px; 33 } 34 35 #box3 { 36 background-color: blue; 37 height: 100px; 38 left: 1400px; 39 } 40 </style> 41 <div id="scroller" class="scroller"> 42 <div class="box" id="box1">1</div> 43 <div class="box" id="box2">2</div> 44 <div class="box" id="box3">3</div> 45 </div> 46 <script> 47 let scrollendCount = 0; 48 scroller.addEventListener('scrollend', () => { 49 scroller.style.maxHeight = null; 50 scroller.style.maxHeight = `${box2.clientHeight}px`; 51 scrollendCount += 1; 52 }); 53 promise_test(async (test) => { 54 // This test aims to verify that scrollend fires correctly (i.e. once) 55 // when the target snap position is not a whole number. In this case, we 56 // expect to snap to the left edge of box2 which is at a fractional 57 // offset from the scroller's origin (left: 700.5px). 58 // The scroll offset resulting from the snap may not be fractional 59 // (e.g. if the browser does not support fractional scroll offsets) so 60 // we verify the scroll offset with assert_approx_equals. 61 assert_equals(scroller.scrollLeft, 0, 62 "test precondition: scroller is not scrolled."); 63 const expected_scroll_left = box2.offsetLeft; 64 const target_offset = box2.offsetLeft + box2.clientWidth / 2; 65 66 let scrollend_promise = waitForScrollendEvent(test, scroller); 67 scroller.scrollTo( { left: target_offset }); 68 await scrollend_promise; 69 70 // Instead of a time-based wait for errant scrollends, we wait a frame 71 // and then scroll back to 0. 72 await waitForCompositorCommit(); 73 assert_approx_equals(scroller.scrollLeft, expected_scroll_left, 1, 74 "scroller snaps to the left edge of box 2"); 75 76 scrollend_promise = waitForScrollendEvent(test, scroller); 77 scroller.scrollTo({ left: 0 }); 78 await scrollend_promise; 79 assert_equals(scroller.scrollLeft, 0, 80 "scroller should be scrolled back to 0."); 81 assert_equals(scrollendCount, 2, "exactly 2 scrollends should be seen"); 82 }, "snap to fractional offset fires scrollend exactly once."); 83 </script> 84 </body> 85 </html>