initial-snap-matches-scroll.html (1827B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-align"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="../support/common.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/dom/events/scrolling/scroll_support.js"></script> 10 <style> 11 .scroller { 12 height: 150px; 13 width: 300px; 14 overflow: auto; 15 position: relative; 16 white-space: nowrap; 17 scroll-snap-type: x mandatory; 18 } 19 .padding { 20 padding: 0 200px; 21 } 22 .child { 23 scroll-snap-align: center; 24 display: inline-block; 25 width: 201px; 26 height: 100%; 27 margin: 0 200px; 28 background-color: blue; 29 } 30 </style> 31 32 <div class="scroller" id="scroller1"> 33 <div class="padding"> 34 <div class="child"></div> 35 <div class="child"></div> 36 </div> 37 </div> 38 39 <div class="scroller" id="scroller2"> 40 <div class="padding"> 41 <div class="child"></div> 42 <div class="child"></div> 43 </div> 44 </div> 45 46 <script> 47 promise_test(async () => { 48 49 // Scroll to the second child. 50 let scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller2); 51 scroller2.scrollTo(scroller2.scrollWidth, 0); 52 await scrollEndPromise; 53 54 assert_greater_than(scroller2.scrollLeft, scroller1.scrollLeft); 55 56 // Scroll back to the first child. 57 scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller2); 58 await keyPress(scroller2, "ArrowLeft"); 59 await scrollEndPromise; 60 61 // After scrolling to snap to the same child, both scrollers should have the 62 // same scroll position. 63 assert_equals(scroller2.scrollLeft, scroller1.scrollLeft); 64 }, "initial scroll snap matches scrolling scroll snap position."); 65 </script>