scroll-padding-and-margin.html (1730B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-margin"> 4 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1708303"> 6 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 7 <link rel="author" href="https://mozilla.org" title="Mozilla"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 body { margin: 0 } 12 #scroller { 13 height: 500px; 14 width: 500px; 15 scroll-padding: 10px; 16 scrollbar-width: none; 17 overflow: hidden; 18 } 19 #target { 20 width: 100px; 21 height: 100px; 22 background-color: blue; 23 scroll-margin: 10px; 24 margin-left: 1000px; 25 } 26 </style> 27 28 <div id="scroller"> 29 <div style="width: 2000px; height: 2000px;"></div> 30 <div id="target"></div> 31 <div style="width: 2000px; height: 2000px;"></div> 32 </div> 33 34 <script> 35 let scroller = document.getElementById("scroller"); 36 let target = document.getElementById("target"); 37 test(() => { 38 scroller.scrollTo(0, 0); 39 target.scrollIntoView({ block: "start", inline: "start" }); 40 41 assert_equals(scroller.scrollTop, 2000 - 20, "Top should account for margin + padding"); 42 assert_equals(scroller.scrollLeft, 1000 - 20, "Left should account for margin + padding"); 43 }); 44 45 test(() => { 46 scroller.scrollTo(0, 0); 47 target.scrollIntoView({ block: "end", inline: "end" }); 48 assert_equals(scroller.scrollTop, 2000 - 500 + 100 + 20, "Top should account for margin + padding"); 49 assert_equals(scroller.scrollLeft, 1000 - 500 + 100 + 20, "Left should account for margin + padding"); 50 }); 51 </script>