overflowing-snap-areas.html (6310B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 div { 7 position: absolute; 8 } 9 .scroller-x { 10 overflow: scroll; 11 scroll-snap-type: x mandatory; 12 width: 500px; 13 height: 500px; 14 } 15 .scroller-y { 16 overflow: scroll; 17 scroll-snap-type: y mandatory; 18 width: 500px; 19 height: 500px; 20 } 21 .space { 22 width: 4000px; 23 height: 4000px; 24 } 25 .target { 26 scroll-snap-align: start; 27 height: 400px; 28 width: 400px; 29 } 30 .large-x { 31 width: 3000px; 32 background-color: yellow; 33 } 34 .large-y { 35 height: 2000px; 36 background-color: yellow; 37 } 38 .small { 39 height: 200px; 40 width: 200px; 41 background-color: black; 42 } 43 </style> 44 <div class="scroller-x" id="one-target"> 45 <div class="space"></div> 46 <div class="large-x target" id="single" style="left: 200px;"></div> 47 </div> 48 49 <div class="scroller-x" id="x"> 50 <div class="space"></div> 51 <div style="left: 200px;"> 52 <div class="target large-x"></div> 53 <div class="target small" style="left: 200px"></div> 54 <div class="target small" style="left: 600px"></div> 55 <div class="target small" style="left: 1200px"></div> 56 </div> 57 </div> 58 59 <div class="scroller-y" id="y"> 60 <div class="space"></div> 61 <div style="top: 200px;"> 62 <div class="target large-y"></div> 63 <div class="target small" style="top: 200px"></div> 64 <div class="target small" style="top: 600px"></div> 65 <div class="target small" style="top: 1200px"></div> 66 <div class="target large-y" style="top: 2000px"></div> 67 </div> 68 </div> 69 70 <div class="scroller-x" id="two-axes" style="scroll-snap-type: both mandatory"> 71 <div class="space"></div> 72 <div class="target large-x" style="top: 200px"></div> 73 </div> 74 75 <div class="scroller-x" id="overlapping-overflow" style="scroll-snap-type: both mandatory"> 76 <div class="space"></div> 77 <div style="left: 200px; top: 200px;"> 78 <div class="target small"></div> 79 <div class="target small"></div> 80 <div class="target small"></div> 81 <div class="target large-y large-x"></div> 82 <div class="target small"></div> 83 <div class="target small"></div> 84 <div class="target small"></div> 85 </div> 86 </div> 87 88 <script> 89 var one_target_scroller = document.getElementById("one-target"); 90 var scroller_x = document.getElementById("x"); 91 var scroller_y = document.getElementById("y"); 92 var two_axes_scroller = document.getElementById("two-axes"); 93 var overlapping_scroller = document.getElementById("overlapping-overflow"); 94 95 test(() => { 96 one_target_scroller.scrollTo(10, 0); 97 assert_equals(one_target_scroller.scrollLeft, 200); 98 assert_equals(one_target_scroller.scrollTop, 0); 99 }, "Snaps to the snap position if the snap area doesn't cover the snapport on x."); 100 101 test(() => { 102 var right_align = 3200 - one_target_scroller.clientWidth; 103 one_target_scroller.scrollTo(right_align, 0); 104 assert_equals(one_target_scroller.scrollLeft, right_align); 105 assert_equals(one_target_scroller.scrollTop, 0); 106 }, "Snaps to the snap position if the snap area covers the snapport on x on the right border."); 107 108 // We use end alignment for this test so that we don't fall on a snap 109 // position when the snap area just covers the snapport on the left border. 110 test(() => { 111 document.getElementById("single").style.scrollSnapAlign = 'end'; 112 one_target_scroller.scrollTo(200, 0); 113 assert_equals(one_target_scroller.scrollLeft, 200); 114 assert_equals(one_target_scroller.scrollTop, 0); 115 }, "Snaps to the snap position if the snap area covers the snapport on x on the left border."); 116 117 test(() => { 118 scroller_x.scrollTo(450, 0); 119 assert_equals(scroller_x.scrollLeft, 400); 120 assert_equals(scroller_x.scrollTop, 0); 121 }, "Snaps to a snap area (400) that is closer than the position that reveals " + 122 "the space between snap areas (600) within the larger snap area on x."); 123 124 test(() => { 125 scroller_y.scrollTo(0, 450); 126 assert_equals(scroller_y.scrollLeft, 0); 127 assert_equals(scroller_y.scrollTop, 400); 128 }, "Snaps to a snap area (400) that is closer than the position that reveals " + 129 "the space between snap areas (600) within the larger snap area on y."); 130 131 test(() => { 132 scroller_x.scrollTo(1650, 0); 133 assert_equals(scroller_x.scrollLeft, 1650); 134 assert_equals(scroller_x.scrollTop, 0); 135 }, "Snap to current scroll position which is a valid snap position, as the " + 136 "snap area covers snapport on x and there is no intruding snap area."); 137 138 test(() => { 139 scroller_y.scrollTo(0, 1650); 140 assert_equals(scroller_y.scrollLeft, 0); 141 assert_equals(scroller_y.scrollTop, 1650); 142 }, "Snap to current scroll position which is a valid snap position, as the " + 143 "snap area covers snapport on y and there is no intruding snap area."); 144 145 test(() => { 146 const maxScrollTop = scroller_y.scrollHeight - scroller_y.clientHeight; 147 148 // Scroll to the bottom edge which is a valid snap position that a large 149 // target element covers the snapport. 150 scroller_y.scrollTo(0, maxScrollTop); 151 assert_equals(scroller_y.scrollTop, maxScrollTop); 152 153 // Scroll to `the bottom edge + 1`. 154 scroller_y.scrollTo(0, maxScrollTop + 1); 155 assert_equals(scroller_y.scrollTop, maxScrollTop); 156 }, "Don't snap back even if scrollTo tries to scroll to positions which are " + 157 "outside of the scroll range and if a snap target element covers the snaport"); 158 159 test(() => { 160 two_axes_scroller.scrollTo(10, 100); 161 assert_equals(two_axes_scroller.scrollLeft, 10); 162 assert_equals(two_axes_scroller.scrollTop, 200); 163 }, "Snap to current scroll position on x as the area is covering x axis." + 164 "However, we snap to the specified snap position on y as the area is not " + 165 "covering y axis."); 166 167 test(() => { 168 overlapping_scroller.scrollTo(200, 800); 169 assert_equals(overlapping_scroller.scrollLeft, 200); 170 assert_equals(overlapping_scroller.scrollTop, 800); 171 }, "snap to current scroll position on y as the area is covering y axis, " + 172 "even though that area is not the only scroll area at the same position."); 173 174 test(() => { 175 overlapping_scroller.scrollTo(800, 200); 176 assert_equals(overlapping_scroller.scrollLeft, 800); 177 assert_equals(overlapping_scroller.scrollTop, 200); 178 }, "snap to current scroll position on x as the area is covering x axis, " + 179 "even though that area is not the only scroll area at the same position."); 180 </script>