resnap-on-snap-alignment-change.html (1613B)
1 <!DOCTYPE html> 2 <html> 3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 4 <title> 5 Resnap when the current snap position is no longer a valid snap target. 6 </title> 7 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/css-scroll-snap/support/common.js"></script> 11 <style> 12 html { 13 scroll-snap-type: y mandatory; 14 } 15 body { 16 margin: 0; 17 } 18 .snap { 19 scroll-snap-align: center; 20 height: 100vh; 21 margin: 0; 22 } 23 </style> 24 <body onload = "runTest()"> 25 <div id = "card1" class="snap">ONE</div> 26 <div id = "card2" class="snap">TWO</div> 27 <div id = "card3" class="snap">THREE</div> 28 </body> 29 <script type="text/javascript"> 30 function runTest() { 31 promise_test(async t => { 32 const scroller = document.scrollingElement; 33 // scroll to card THREE 34 let expectedSnapPosition = card3.offsetTop; 35 scroller.scrollTo(0, expectedSnapPosition); 36 assert_equals(scroller.scrollTop, expectedSnapPosition, 37 'Aligned with card THREE before style change'); 38 39 // Snap to card TWO after invalidating card THREE as a snap target. 40 card3.style.scrollSnapAlign = 'none center'; 41 await waitForNextFrame(); 42 expectedSnapPosition = card2.offsetTop; 43 assert_equals(scroller.scrollTop, expectedSnapPosition, 44 'Aligned with card TWO after style change'); 45 }, 'Resnap when the current snap position is no longer a valid snap target'); 46 } 47 </script> 48 </html>