tor-browser

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

snap-to-visible-areas-margin-both.html (2041B)

      1 <!DOCTYPE html>
      2 <title>
      3  Snap to an area where the element's scroll-margin is visible but not the
      4  element itself (using both axes snap type)
      5 </title>
      6 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/>
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <style>
     10 div {
     11  position: absolute;
     12  margin: 0px;
     13 }
     14 
     15 #scroller {
     16  height: 600px;
     17  width: 600px;
     18  overflow: scroll;
     19  scroll-snap-type: both mandatory;
     20 }
     21 
     22 #space {
     23  width: 2000px;
     24  height: 2000px;
     25 }
     26 
     27 .snap {
     28  width: 200px;
     29  height: 200px;
     30  background-color: blue;
     31  scroll-snap-align: start;
     32 }
     33 
     34 #left-top {
     35  left: 0px;
     36  top: 0px;
     37 }
     38 
     39 #left-bottom {
     40  left: 0px;
     41  top: 800px;
     42  /* 800px scroll-margin makes the snap area span to the right end of the
     43  right-top area */
     44  scroll-margin-right: 800px;
     45 }
     46 
     47 #right-top {
     48  left: 800px;
     49  top: 0px;
     50  /* 800px scroll-margin makes the snap area span to the bottom end of the
     51  left-bottom area */
     52  scroll-margin-bottom: 800px;
     53 }
     54 
     55 </style>
     56 <div id="scroller">
     57  <div id="space"></div>
     58  <div id="left-top" class="snap"></div>
     59  <div id="left-bottom" class="snap"></div>
     60  <div id="right-top" class="snap"></div>
     61 </div>
     62 <script>
     63 test(() => {
     64  const scroller = document.getElementById("scroller");
     65  scroller.scrollTo(0, 0);
     66  assert_equals(scroller.scrollLeft, 0);
     67  assert_equals(scroller.scrollTop, 0);
     68  // 750 and 650 are picked as those are closer to top left of the intersection
     69  // (800, 800) of the snap areas where the browser should snap. This makes the
     70  // intersection a closer snap option than a covering option that the browser
     71  // might choose where the snapport is aligned on the bottom and right.
     72  scroller.scrollTo(650, 750);
     73  assert_equals(scroller.scrollLeft, 800);
     74  assert_equals(scroller.scrollTop, 800);
     75  scroller.scrollTo(750, 650);
     76  assert_equals(scroller.scrollLeft, 800);
     77  assert_equals(scroller.scrollTop, 800);
     78 }, 'Snap to area such that only the scroll margin from both axes\' areas are \
     79 visible');
     80 </script>