snap-to-visible-areas-margin-x-axis.html (1514B)
1 <!DOCTYPE html> 2 <title> 3 Snap to an area where the element's scroll-margin is visible but not the 4 element itself (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-margin-visible { 45 left: 700px; 46 top: 800px; 47 /* 300px makes snap area visible with margin but non-visible without it */ 48 scroll-margin-top: 300px; 49 } 50 51 </style> 52 <div id="scroller"> 53 <div id="space"></div> 54 <div id="left-visible" class="snap"></div> 55 <div id="middle-margin-visible" class="snap"></div> 56 <div id="right-visible" class="snap"></div> 57 </div> 58 <script> 59 test(() => { 60 const scroller = document.getElementById("scroller"); 61 scroller.scrollTo(0, 0); 62 assert_equals(scroller.scrollLeft, 0); 63 assert_equals(scroller.scrollTop, 0); 64 scroller.scrollTo(500, 0); 65 assert_equals(scroller.scrollLeft, 700); 66 assert_equals(scroller.scrollTop, 0); 67 }, 'Scroll margin should be considered when calculating snap area visibilty \ 68 while snapping on the x-axis'); 69 </script>