snap-to-transformed-target.html (1537B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 div { 7 position: absolute; 8 } 9 #scroller { 10 overflow: hidden; /* TODO: Use scrollbar-width: none */ 11 scroll-snap-type: x mandatory; 12 width: 500px; 13 height: 500px; 14 } 15 .space { 16 width: 2000px; 17 height: 2000px; 18 } 19 #target { 20 height: 200px; 21 width: 200px; 22 left: 50px; 23 background-color: blue; 24 } 25 </style> 26 <div id="scroller"> 27 <div class="space"></div> 28 <div id="target"></div> 29 </div> 30 <script> 31 test(() => { 32 target.style.scrollSnapAlign = "start"; 33 target.style.transform = "translateX(300px)"; 34 scroller.scrollTo(10, 0); 35 assert_equals(scroller.scrollLeft, 350 /* left + translateX(300px) */); 36 assert_equals(scroller.scrollTop, 0); 37 }, "Snaps to the transformed snap start position"); 38 39 test(() => { 40 target.style.scrollSnapAlign = "end"; 41 target.style.transform = "translateX(300px)"; 42 scroller.scrollTo(10, 0); 43 assert_equals(scroller.scrollLeft, 44 50 /* left + width + translateX(300px) - scroller.width */); 45 assert_equals(scroller.scrollTop, 0); 46 }, "Snaps to the transformed snap end position"); 47 48 test(() => { 49 target.style.scrollSnapAlign = "start"; 50 target.style.transform = "translateX(-100px)"; 51 scroller.scrollTo(10, 0); 52 assert_equals(scroller.scrollLeft, 0); 53 assert_equals(scroller.scrollTop, 0); 54 }, "Snaps to visible top left position of the transformed box"); 55 56 </script>