changing-scroll-snap-align-nested.tentative.html (3960B)
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", "end"); 74 // scroller maintains scroll position which is still valid as the target's 75 // snap area covers the snap port. 76 assert_equals(scroller.scrollTop, 100); 77 assert_equals(scroller.scrollLeft, 100); 78 }, "Changing a large target's snap alignment shouldn't make the scroller" + 79 " resnap if the scroller is already in a valid snap position."); 80 81 // Similar to above test case except targets are too small to cover snap port, 82 // so scroller must snap in response to change in scroll-snap-align. 83 test(t => { 84 t.add_cleanup(cleanup); 85 const initial_target_height = initial_target.offsetHeight; 86 const initial_target_width = initial_target.offsetWidth; 87 const other_target_height = initial_target.offsetHeight; 88 const other_target_width = initial_target.offsetWidth; 89 t.add_cleanup(() => { 90 initial_target.style.setProperty("height", `${initial_target_height}px`); 91 initial_target.style.setProperty("width", `${initial_target_width}px`); 92 other_target.style.setProperty("height", `${other_target_height}px`); 93 other_target.style.setProperty("width", `${other_target_width}px`); 94 }) 95 scroller.scrollTo(0,0); 96 assert_equals(scroller.scrollTop, 100); 97 assert_equals(scroller.scrollLeft, 100); 98 99 initial_target.style.setProperty("height", `${scroller.clientHeight * 2/3 }px`); 100 initial_target.style.setProperty("width", `${scroller.clientWidth * 2/3 }px`); 101 other_target.style.setProperty("height", `${scroller.clientHeight * 2/3 }px`); 102 other_target.style.setProperty("width", `${scroller.clientWidth * 2/3 }px`); 103 104 // scroll (and snap) to top left of other target. 105 scroller.scrollTo(other_target.offsetTop, 106 other_target.offsetLeft); 107 assert_equals(scroller.scrollTop, other_target.offsetTop); 108 assert_equals(scroller.scrollLeft, other_target.offsetLeft); 109 110 other_target.style.setProperty("scroll-snap-align", "end"); 111 // should be scrolled so as to align scroller's bottom-right with 112 // other_target's bottom-right. 113 assert_approx_equals(scroller.scrollTop, 114 other_target.offsetTop + other_target.offsetHeight - scroller.clientHeight, 1.0); 115 assert_approx_equals(scroller.scrollLeft, 116 other_target.offsetLeft + other_target.offsetWidth - scroller.clientWidth, 1.0); 117 }, "Changing the current (non-covering) target's snap alignment should make " + 118 "the scroller snap according to the new alignment."); 119 </script>