tor-browser

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

scroll-initial-target-with-scroll-snap.tentative.html (2168B)

      1 <!DOCTYPE html>
      2 <html>
      3 
      4 <head>
      5  <meta charset="utf-8">
      6  <title> CSS Scroll Snap 2 Test: scroll-initial-target*</title>
      7  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
      8  <script src="/resources/testharness.js"></script>
      9  <script src="/resources/testharnessreport.js"></script>
     10 </head>
     11 
     12 <body>
     13  <style>
     14    .spacer {
     15      width: 1000px;
     16      height: 1000px;
     17    }
     18 
     19    .scroller {
     20      width: 300px;
     21      height: 300px;
     22      border: solid 1px black;
     23      overflow: scroll;
     24      margin: 0px;
     25      position: absolute;
     26      scroll-snap-type: y mandatory;
     27    }
     28 
     29    .box {
     30      position: absolute;
     31      width: 200px;
     32      height: 200px;
     33    }
     34 
     35    .top_left {
     36      top: 0px;
     37      left: 0px;
     38      background-color: red;
     39    }
     40 
     41    .center {
     42      top: 200px;
     43      left: 200px;
     44      background-color: purple;
     45      scroll-initial-target: nearest;
     46    }
     47 
     48    .bottom_right {
     49      top: 400px;
     50      left: 400px;
     51      background-color: yellow;
     52      /* Expect scroller to snap to the top and left border of the bottom right div. */
     53      scroll-snap-align: start start;
     54    }
     55    </style>
     56  <div class="scroller" id="scroller">
     57    <div class="spacer"></div>
     58    <div class="top_left box" id="top_left_box"></div>
     59    <div class="center box" id="centerbox"></div>
     60    <div class="bottom_right box"></div>
     61  </div>
     62  <script>
     63    test((t) => {
     64      let scroller = document.getElementById("scroller");
     65      let top_left_box = document.getElementById("top_left_box");
     66      let center_box = document.getElementById("center_box");
     67 
     68      const expected_scroll_top = top_left_box.getBoundingClientRect().height +
     69          centerbox.getBoundingClientRect().height;
     70      const expected_scroll_left = top_left_box.getBoundingClientRect().width;
     71          centerbox.getBoundingClientRect().width;
     72 
     73      assert_approx_equals(scroller.scrollTop, expected_scroll_top, 1,
     74        "scroll-initial-target sets initial vertical scroll position");
     75      assert_approx_equals(scroller.scrollLeft, expected_scroll_left, 1,
     76        "scroll-initial-target sets initial horizontal scroll position");
     77    });
     78  </script>
     79 </body>