ignore-snap-points-orthogonal-to-snap-axis.html (1076B)
1 <!DOCTYPE html> 2 <title>Ignore snap points orthogonal to scroll snap axis</title> 3 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#snap-axis" /> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 div { 8 position: absolute; 9 margin: 0; 10 } 11 12 #scroller { 13 height: 500px; 14 width: 500px; 15 overflow: hidden; 16 scroll-snap-type: x mandatory; 17 } 18 19 #y-target { 20 width: 300px; 21 height: 300px; 22 top: 100px; 23 left: 0; 24 background-color: green; 25 /* align only on y-axis */ 26 scroll-snap-align: start none; 27 } 28 29 #x-target { 30 width: 300px; 31 height: 300px; 32 top: 0; 33 left: 100px; 34 background-color: red; 35 scroll-snap-align: none start; 36 } 37 38 .area { 39 width: 2000px; 40 height: 2000px; 41 } 42 </style> 43 44 <div id="scroller"> 45 <div class="area"></div> 46 <div id="x-target"></div> 47 <div id="y-target"></div> 48 </div> 49 50 <script> 51 test(t => { 52 scroller.scrollTo(0,0); 53 assert_equals(scroller.scrollTop, 0); 54 assert_equals(scroller.scrollLeft, 100); 55 }, "Ignore snap points orthogonal to scroll snap axis"); 56 57 </script>