adding-only-snap-area.html (1201B)
1 <!DOCTYPE html> 2 <title> 3 Adding a new snap area when there are none should make the scroller snap to it. 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 div { 10 position: absolute; 11 margin: 0; 12 } 13 14 #scroller { 15 height: 500px; 16 width: 500px; 17 overflow: hidden; 18 scroll-snap-type: both mandatory; 19 } 20 21 #target { 22 width: 300px; 23 height: 300px; 24 top: 100px; 25 left: 100px; 26 background-color: green; 27 scroll-snap-align: start; 28 } 29 30 .area { 31 width: 2000px; 32 height: 2000px; 33 } 34 </style> 35 36 <div id="scroller"> 37 <div class="area"></div> 38 <div id="target"></div> 39 </div> 40 41 <script> 42 const target = document.getElementById("target"); 43 const scroller = document.getElementById("scroller"); 44 45 test(() => { 46 scroller.removeChild(target); 47 scroller.scrollTo(0,0); 48 assert_equals(scroller.scrollTop, 0); 49 assert_equals(scroller.scrollLeft, 0); 50 51 scroller.appendChild(target); 52 assert_equals(scroller.scrollTop, 100); 53 assert_equals(scroller.scrollLeft, 100); 54 }, "Adding a new snap area when there are none should make the scroller snap to it."); 55 </script>