snap-to-empty-sized-element.html (1300B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width"> 3 <title>Resnap to empty sized element</title> 4 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#example-d0a2d86f"/> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1914178"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #scroller { 10 height: 500px; 11 width: 500px; 12 overflow: scroll; 13 scroll-snap-type: y proximity; 14 } 15 16 #scroller::after { 17 display: block; 18 content: ""; 19 scroll-snap-align: end; 20 } 21 22 li { 23 height: 100px; 24 } 25 </style> 26 <ul id="scroller"> 27 <li></li> 28 <li></li> 29 <li></li> 30 <li></li> 31 <li></li> 32 <li></li> 33 </ul> 34 <script> 35 test(t => { 36 const scroller = document.getElementById("scroller"); 37 // Scroll to the last child in the scroll container. 38 document.querySelector("#scroller > :last-child").scrollIntoView(); 39 40 const scrollTop = scroller.scrollTop; 41 assert_greater_than(scrollTop, 0); 42 43 // Append a new element into the scroll container. 44 const li = document.createElement("li"); 45 scroller.appendChild(li); 46 47 // The ::after pseudo content should be the snap target, even if the size 48 // is empty. 49 assert_equals(scroller.scrollTop, scrollTop + 100); 50 }, "Resnap to empty sized element"); 51 </script>