remove-current-target.html (1441B)
1 <!DOCTYPE html> 2 <title> 3 Removing the current snap target should make the scroller snap to a new target. 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 #initial-target { 22 width: 300px; 23 height: 300px; 24 top: 100px; 25 left: 100px; 26 background-color: red; 27 scroll-snap-align: start; 28 } 29 30 #other-target { 31 width: 300px; 32 height: 300px; 33 top: 300px; 34 left: 300px; 35 background-color: green; 36 scroll-snap-align: start; 37 } 38 39 .area { 40 width: 2000px; 41 height: 2000px; 42 } 43 </style> 44 45 <div id="scroller"> 46 <div class="area"></div> 47 <div id="initial-target"></div> 48 <div id="other-target"></div> 49 </div> 50 51 <script> 52 const initial_target = document.getElementById("initial-target"); 53 const other_target = document.getElementById("other-target"); 54 const scroller = document.getElementById("scroller"); 55 56 test(() => { 57 scroller.scrollTo(0,0); 58 assert_equals(scroller.scrollTop, 100); 59 assert_equals(scroller.scrollLeft, 100); 60 61 scroller.removeChild(initial_target); 62 assert_equals(scroller.scrollTop, 300); 63 assert_equals(scroller.scrollLeft, 300); 64 }, "Removing the current snap target should make the scroller snap to a new target."); 65 </script>