unreachable-snap-positions-003.html (1240B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#unreachable" /> 4 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1905247"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 .content { 9 overflow-x: scroll; 10 scroll-snap-type: x mandatory; 11 white-space: nowrap; 12 width: 400px; 13 border: 2px solid black; 14 /* padding-bottom so you can see the scrollbar: */ 15 padding-bottom: 10px; 16 } 17 .item { 18 width: 250px; 19 height: 200px; 20 border: 3px solid orange; 21 box-sizing: border-box; 22 scroll-snap-align: start; 23 display: inline-block; 24 } 25 </style> 26 27 <div id="scroller" class="content"> 28 <!-- There's intentionally no whitespace between these tags, so that they're 29 laid out flush with each other with no space character between them. --> 30 <div class="item" style="width: 305px; background:teal"></div 31 ><div class="item" style="width: 100px; background:pink"></div> 32 </div> 33 34 <script> 35 test(() => { 36 scroller.scrollLeft = 3; 37 assert_equals(scroller.scrollLeft, 5); 38 }, "Snaps to the positions defined by the element as much as possible"); 39 </script>