scrollsnapchange-same-targets-after-layout-changed.html (3498B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#snap-events" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/dom/events/scrolling/scroll_support.js"></script> 9 <script src="/css/css-scroll-snap/snap-events/resources/common.js"></script> 10 <style> 11 #scroller { 12 overflow-y: scroll; 13 scroll-snap-type: y mandatory; 14 width: 500px; 15 height: 500px; 16 background-color: white; 17 position: relative; 18 } 19 .large_space { 20 position: absolute; 21 height: 100vh; 22 width: 100vw; 23 } 24 .space_filler { 25 display: inline-block; 26 width: 40%; 27 height: 30%; 28 background-color: green; 29 } 30 .snap_area { 31 scroll-snap-align: start; 32 background-color: yellow; 33 position: absolute; 34 width: 40%; 35 height: 30%; 36 top: 500px; 37 } 38 39 .left { 40 left: 1px; 41 } 42 .right { 43 left: 41%; 44 } 45 </style> 46 </head> 47 <body> 48 <div id="scroller"> 49 <div class="large_space"></div> 50 <div class="space_filler"></div> 51 <div class="space_filler"></div> 52 <div class="space_filler"></div> 53 <div class="space_filler"></div> 54 <div class="space_filler"></div> 55 <div class="space_filler"></div> 56 <div class="space_filler"></div> 57 <div class="space_filler"></div> 58 <div id="left" class="snap_area left"><h1>1</h1></div> 59 <div id="right" class="snap_area right"><h1>2</h1></div> 60 </div> 61 <script> 62 let unreached_func = null; 63 promise_test(async (t) => { 64 checkSnapEventSupport("scrollsnapchange"); 65 await waitForCompositorCommit(); 66 unreached_func = t.unreached_func("scrollsnapchange shouldn't fire " + 67 "since the scroller is snapped to the same elements."); 68 scroller.addEventListener("scrollsnapchange", unreached_func); 69 t.add_cleanup(() => { 70 scroller.removeEventListener("scrollsnapchange", unreached_func); 71 }); 72 assert_greater_than(right.offsetLeft, left.offsetLeft, 73 "boxes have switched positions."); 74 // Switch the boxes' horizontal positions. 75 right.style.left = "1px"; 76 left.style.left = "41%"; 77 await waitForCompositorCommit(); 78 assert_less_than(right.offsetLeft, left.offsetLeft, 79 "boxes have switched positions."); 80 await waitForCompositorCommit(); 81 }, "scrollsnapchange doesn't fire after layout change if snapped to the same " + 82 "elements"); 83 84 promise_test(async (t) => { 85 checkSnapEventSupport("scrollsnapchange"); 86 await waitForCompositorCommit(); 87 unreached_func = t.unreached_func("scrollsnapchange shouldn't fire " + 88 "since the scroller is snapped to the same elements."); 89 scroller.addEventListener("scrollsnapchange", unreached_func); 90 t.add_cleanup(() => { 91 scroller.removeEventListener("scrollsnapchange", unreached_func); 92 }); 93 const scrollend_promise = waitForScrollendEventNoTimeout(scroller); 94 // Move the boxes to the same vertical level. Both boxes should still be 95 // considered snapped to so scrollsnapchange should not be triggerred. 96 right.style.top = `0px`; 97 left.style.top = `0px`; 98 await scrollend_promise; 99 assert_equals(scroller.scrollTop, 0); 100 await waitForCompositorCommit(); 101 }, "scrollsnapchange doesn't fire after snap to the same targets after scroll. " + 102 "elements"); 103 104 </script> 105 </body> 106 </html>