changing-scroll-snap-align.html (2844B)
1 <!DOCTYPE html> 2 <title> 3 Updating the snap alignment of a snap container's content should make the snap 4 container resnap accordingly. 5 </title> 6 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 div { 11 position: absolute; 12 margin: 0; 13 } 14 15 #scroller { 16 height: 200px; 17 width: 200px; 18 overflow: hidden; 19 scroll-snap-type: both mandatory; 20 } 21 22 #initial-target { 23 width: 300px; 24 height: 300px; 25 top: 100px; 26 left: 100px; 27 background-color: green; 28 scroll-snap-align: start; 29 } 30 31 #other-target { 32 width: 300px; 33 height: 300px; 34 top: 300px; 35 left: 300px; 36 background-color: red; 37 scroll-snap-align: start; 38 } 39 40 .area { 41 width: 2000px; 42 height: 2000px; 43 } 44 45 .snap-area { 46 scroll-snap-align: start !important; 47 } 48 </style> 49 50 <div id="scroller"> 51 <div class="area"></div> 52 <div id="initial-target"></div> 53 <div id="other-target"></div> 54 </div> 55 56 <script> 57 const initial_target = document.getElementById("initial-target"); 58 const other_target = document.getElementById("other-target"); 59 const scroller = document.getElementById("scroller"); 60 61 function cleanup() { 62 initial_target.style.setProperty("scroll-snap-align", "start"); 63 other_target.style.setProperty("scroll-snap-align", "start"); 64 initial_target.removeAttribute("class"); 65 } 66 67 test(t => { 68 t.add_cleanup(cleanup); 69 scroller.scrollTo(0,0); 70 assert_equals(scroller.scrollTop, 100); 71 assert_equals(scroller.scrollLeft, 100); 72 73 initial_target.style.setProperty("scroll-snap-align", "none"); 74 assert_equals(scroller.scrollTop, 300); 75 assert_equals(scroller.scrollLeft, 300); 76 }, "Removing the current target's snap alignment should make the scroller" 77 + " resnap to a new snap area."); 78 79 test(t => { 80 t.add_cleanup(cleanup); 81 initial_target.style.setProperty("scroll-snap-align", "none"); 82 other_target.style.setProperty("scroll-snap-align", "none"); 83 84 scroller.scrollTo(0,0); 85 assert_equals(scroller.scrollTop, 0); 86 assert_equals(scroller.scrollLeft, 0); 87 88 initial_target.style.setProperty("scroll-snap-align", "start"); 89 assert_equals(scroller.scrollTop, 100); 90 assert_equals(scroller.scrollLeft, 100); 91 }, "Changing an element snap alignment from none to start should make the" 92 + "scroller resnap."); 93 94 test(t => { 95 t.add_cleanup(cleanup); 96 initial_target.style.setProperty("scroll-snap-align", "none"); 97 other_target.style.setProperty("scroll-snap-align", "none"); 98 99 scroller.scrollTo(0,0); 100 assert_equals(scroller.scrollTop, 0); 101 assert_equals(scroller.scrollLeft, 0); 102 103 initial_target.classList.add("snap-area"); 104 assert_equals(scroller.scrollTop, 100); 105 assert_equals(scroller.scrollLeft, 100); 106 }, "Changing an element snap alignment from none to start by adding a class" 107 + " should make the scroller resnap."); 108 </script>