scroll-snap-stop-002.html (7824B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop" /> 3 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-overflow" /> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 div { 8 position: absolute; 9 } 10 .scroller { 11 width: 400px; 12 height: 100px; 13 overflow: scroll; 14 scroll-snap-type: x mandatory; 15 } 16 #space { 17 left: 0px; 18 top: 0px; 19 width: 2100px; 20 height: 50px; 21 } 22 .target { 23 width: 50px; 24 height: 50px; 25 scroll-snap-align: start; 26 top: 0px; 27 } 28 </style> 29 30 <!-- 31 start dest closest always 32 |------------------------------|--------|--------| 33 --> 34 <div class="scroller" id="scroller1"> 35 <div id="space"></div> 36 <div class="target" style="left: 0px;"></div> 37 <!-- Add `scroll-snap-stop: always` element into the DOM tree prior to the 38 closest snap point --> 39 <div class="target" style="left: 120px; scroll-snap-stop: always;"></div> 40 <!-- Add a snap point closest-to-destination but further than the destination 41 from the start position --> 42 <div class="target" style="left: 110px;"></div> 43 </div> 44 45 <!-- 46 start closest dest always 47 |------------------------------|------|--------| 48 --> 49 <div class="scroller" id="scroller2"> 50 <div id="space"></div> 51 <div class="target" style="left: 0px;"></div> 52 <div class="target" style="left: 120px; scroll-snap-stop: always;"></div> 53 <!-- Add a snap point closest-to-destination and closer than the destination 54 from the start position --> 55 <div class="target" style="left: 95px;"></div> 56 </div> 57 </div> 58 59 <!-- 60 A test case where there's a snap point whose snap area covers the snapport and 61 there's a `scroll-snap-stop: always` snap point on the opposite side. 62 --> 63 <div class="scroller" id="scroller3"> 64 <div id="space"></div> 65 <div class="target" style="left: 0px;"></div> 66 <div class="target" style="left: 700px; scroll-snap-stop: always;"></div> 67 <!-- Add a snap point where the snap area covers the snapport entirely --> 68 <div class="target" style="left: 100px; width: 500px;"></div> 69 <!-- Add a snap point where the distance between this and the 100px point is 70 larger than the snapport size (400px) --> 71 <div class="target" style="left: 600px;"></div> 72 </div> 73 74 <!-- 75 A similar case above, but two `scroll-snap-stop: always` snap points. 76 --> 77 <div class="scroller" id="scroller4"> 78 <div id="space"></div> 79 <div class="target" style="left: 0px;"></div> 80 <div class="target" style="left: 700px; scroll-snap-stop: always;"></div> 81 <!-- Add a snap point where the snap area covers the snapport entirely --> 82 <div class="target" style="left: 100px; width: 500px;"></div> 83 <!-- Add a snap point where the distance between this and the 100px point is 84 larger than the snapport size (400px) --> 85 <div class="target" style="left: 600px; scroll-snap-stop: always;"></div> 86 </div> 87 88 <!-- 89 Another similar case, but the nearest snap point to the start point is 90 `scroll-snap-stop: always`. 91 --> 92 <div class="scroller" id="scroller5"> 93 <div id="space"></div> 94 <div class="target" style="left: 0px;"></div> 95 <div class="target" style="left: 700px; scroll-snap-stop: always;"></div> 96 <!-- Add a snap point where the snap area covers the snapport entirely --> 97 <div class="target" style="left: 100px; width: 500px; scroll-snap-stop: always;"></div> 98 <!-- Add a snap point where the distance between this and the 100px point is 99 larger than the snapport size (400px) --> 100 <div class="target" style="left: 600px;"></div> 101 </div> 102 103 <!-- 104 A test case that a `scroll-snap-stop: always` snap point is further than the 105 scroll destination. 106 --> 107 <div class="scroller" id="scroller6"> 108 <div id="space"></div> 109 <div class="target" style="left: 0px;"></div> 110 <div class="target" style="left: 400px;"></div> 111 <div class="target" style="left: 700px; scroll-snap-stop: always;"></div 112 </div> 113 114 <script> 115 116 test(() => { 117 assert_equals(scroller1.scrollLeft, 0); 118 assert_equals(scroller1.scrollTop, 0); 119 120 // start dest closest always 121 // |------------------------------|--------|--------| 122 // 0 100 110 120 123 scroller1.scrollBy(100, 0); 124 assert_equals(scroller1.scrollLeft, 110); 125 assert_equals(scroller1.scrollTop, 0); 126 }, "The closest snap point is preferred than scroll-snap-stop: always where " + 127 "it's further than the destination (the closest one is closer to the " + 128 "scroll start position than the destination)"); 129 130 test(() => { 131 assert_equals(scroller2.scrollLeft, 0); 132 assert_equals(scroller2.scrollTop, 0); 133 134 // start closest dest always 135 // |------------------------------|------|--------| 136 // 0 95 100 120 137 scroller2.scrollBy(100, 0); 138 assert_equals(scroller2.scrollLeft, 95); 139 assert_equals(scroller2.scrollTop, 0); 140 }, "The closest snap point is preferred than scroll-snap-stop: always where " + 141 "it's further than the destination (the closest one is futrher than the " + 142 "destination from the start position)"); 143 144 test(() => { 145 assert_equals(scroller3.scrollLeft, 0); 146 assert_equals(scroller3.scrollTop, 0); 147 148 // start dest always 149 // |-----|===|============================|------| 150 // 0 100 150 600 700 151 152 // Scoll on the element whose snap area is larger than the snapport. 153 scroller3.scrollBy(150, 0); 154 assert_equals(scroller3.scrollLeft, 150); 155 assert_equals(scroller3.scrollTop, 0); 156 }, "The scroll destination on a large element whose snap area covers " + 157 "the snapport entirely is a valid snap position"); 158 159 test(() => { 160 assert_equals(scroller4.scrollLeft, 0); 161 assert_equals(scroller4.scrollTop, 0); 162 163 // start dest always always 164 // |-----|====|============================|------| 165 // 0 100 150 600 700 166 167 // Scoll on the element whose snap area is larger than the snapport. 168 scroller4.scrollBy(150, 0); 169 assert_equals(scroller4.scrollLeft, 150); 170 assert_equals(scroller4.scrollTop, 0); 171 }, "The scroll destination on a large element whose snap area covers " + 172 "the snapport entirely is a valid snap position (with two " + 173 "`scroll-snap-stop: always` snap points"); 174 175 test(() => { 176 assert_equals(scroller5.scrollLeft, 0); 177 assert_equals(scroller5.scrollTop, 0); 178 179 // start always dest always 180 // |-----|=====|============================|------| 181 // 0 100 150 600 700 182 183 // Scoll on the element whose snap area is larger than the snapport, but 184 // the scroll-snap-stop property is `always`. 185 scroller5.scrollBy(150, 0); 186 assert_equals(scroller5.scrollLeft, 100); 187 assert_equals(scroller5.scrollTop, 0); 188 189 // Scroll the direction further, it should NOT be trapped by the 190 // `scroll-snap-stop: always` snap point. 191 scroller5.scrollBy(50, 0); 192 assert_equals(scroller5.scrollLeft, 150); 193 assert_equals(scroller5.scrollTop, 0); 194 }, "`scroll-snap-stop: always` snap point is preferred even if the snap area " + 195 "entire snapport"); 196 197 test(() => { 198 assert_equals(scroller6.scrollLeft, 0); 199 assert_equals(scroller6.scrollTop, 0); 200 201 // start dest always 202 // |-------------------------|-----------------|------| 203 // 0 400 600 700 204 205 // Scroll to a point where it's closer to a `scroll-snap-stop: always` snap 206 // position. 207 scroller6.scrollBy(600, 0); 208 assert_equals(scroller6.scrollLeft, 700); 209 assert_equals(scroller6.scrollTop, 0); 210 }, "`scroll-snap-stop: always` snap point is further than the scroll " + 211 "destination"); 212 213 </script>