snap-to-visible-areas-x-axis.html (1401B)
1 <!DOCTYPE html> 2 <title> 3 Snap to a visible area only even when there is a closer snap point for an area 4 that is closer but not visible (using x-axis snap type) 5 </title> 6 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 div { 11 position: absolute; 12 margin: 0px; 13 } 14 15 #scroller { 16 height: 600px; 17 width: 600px; 18 overflow: scroll; 19 scroll-snap-type: x mandatory; 20 } 21 22 #space { 23 width: 2000px; 24 height: 2000px; 25 } 26 27 .snap { 28 width: 200px; 29 height: 200px; 30 background-color: blue; 31 scroll-snap-align: start; 32 } 33 34 #left-visible { 35 left: 0px; 36 top: 0px; 37 } 38 39 #right-visible { 40 left: 800px; 41 top: 0px; 42 } 43 44 #middle-not-visible { 45 left: 700px; 46 top: 800px; 47 } 48 49 </style> 50 <div id="scroller"> 51 <div id="space"></div> 52 <div id="left-visible" class="snap"></div> 53 <div id="middle-not-visible" class="snap"></div> 54 <div id="right-visible" class="snap"></div> 55 </div> 56 <script> 57 test(() => { 58 const scroller = document.getElementById("scroller"); 59 scroller.scrollTo(0, 0); 60 assert_equals(scroller.scrollLeft, 0); 61 assert_equals(scroller.scrollTop, 0); 62 scroller.scrollTo(500, 0); 63 assert_equals(scroller.scrollLeft, 800); 64 assert_equals(scroller.scrollTop, 0); 65 }, 'Only snap to visible area on X axis, even when the non-visible ones are closer'); 66 </script>