scroll-margin-visibility-check.html (1445B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-margin"> 3 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding"> 4 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1708303"> 5 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 6 <link rel="author" href="https://mozilla.org" title="Mozilla"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 body { margin: 0 } 11 #scroller { 12 height: 500px; 13 width: 500px; 14 scrollbar-width: none; 15 overflow: scroll; 16 } 17 #target { 18 width: 100px; 19 height: 100px; 20 background-color: blue; 21 scroll-margin: 100px; 22 margin-left: 510px; 23 } 24 </style> 25 26 <div id="scroller"> 27 <div style="width: 450px; height: 450px;"></div> 28 <div tabindex="0" id="target"></div> 29 <div style="width: 2000px; height: 2000px;"></div> 30 </div> 31 32 <script> 33 let scroller = document.getElementById("scroller"); 34 let target = document.getElementById("target"); 35 promise_test(async function() { 36 scroller.scrollTo(0, 0); 37 await new Promise(resolve => { 38 scroller.addEventListener("scroll", resolve, { once: true }); 39 document.getElementById("target").focus(); 40 }); 41 assert_true(scroller.scrollTop > 0, "Visibility check should not account for margin"); 42 assert_true(scroller.scrollLeft > 0, "Visibility check should not account for margin"); 43 }); 44 </script>