snap-to-visible-areas-both.html (1535B)
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 both axes 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: both 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-top { 35 left: 0px; 36 top: 0px; 37 } 38 39 #left-bottom { 40 left: 0px; 41 top: 800px; 42 } 43 44 #right-top { 45 left: 800px; 46 top: 0px; 47 } 48 49 </style> 50 <div id="scroller"> 51 <div id="space"></div> 52 <div id="left-top" class="snap"></div> 53 <div id="left-bottom" class="snap"></div> 54 <div id="right-top" class="snap"></div> 55 </div> 56 <script> 57 test(t => { 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, 600); 63 assert_equals(scroller.scrollLeft, 0); 64 assert_equals(scroller.scrollTop, 800); 65 scroller.scrollTo(600, 500); 66 assert_equals(scroller.scrollLeft, 800); 67 assert_equals(scroller.scrollTop, 0); 68 }, 'Only snap to visible areas in the case where taking the closest snap point of \ 69 each axis does not snap to a visible area'); 70 </script>