tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

snap-on-focus.html (1127B)

      1 <!DOCTYPE html>
      2 <title>Scroll snap on Element.focus()</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/" />
      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-y: scroll;
     16  scroll-snap-type: y mandatory;
     17 }
     18 
     19 .snap {
     20  width: 100%;
     21  height: 300px;
     22  top: 100px;
     23  left: 0;
     24  background-color: green;
     25  scroll-snap-align: start none;
     26 }
     27 
     28 .no-snap {
     29  width: 100%;
     30  height: 300px;
     31  top: 100px;
     32  left: 0;
     33  background-color: red;
     34 }
     35 
     36 .area {
     37  width: 100%;
     38  height: 2000px;
     39 }
     40 </style>
     41 
     42 <div id="scroller">
     43  <div class="area"></div>
     44  <div class="snap" style="top: 0px;"></div>
     45  <div class="no-snap" style="top: 1000px;" tabindex=-1></div>
     46  <div class="snap" style="top: 1200px;"></div>
     47 </div>
     48 
     49 <script>
     50 promise_test(async () => {
     51  document.querySelector(".no-snap").focus();
     52  await new Promise(resolve => step_timeout(resolve, 0));
     53  assert_equals(scroller.scrollTop, 1200);
     54 }, "scroll snap should happens on Element.focus()");
     55 
     56 </script>