tor-browser

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

snap-to-visible-areas-both-pseudo.html (1865B)

      1 <!DOCTYPE html>
      2 <title>
      3  Snap to a visible area only even when there is a closer snap point for an area
      4  that is closer but not visible (using both axes snap type), where the relevant
      5  snap areas are pseudo-elements
      6 </title>
      7 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/>
      8 <script src="/resources/testharness.js"></script>
      9 <script src="/resources/testharnessreport.js"></script>
     10 <style>
     11 
     12 body, html { height: 100%; }
     13 
     14 div {
     15  position: absolute;
     16  margin: 0px;
     17 }
     18 
     19 #scroller {
     20  height: 600px;
     21  width: 600px;
     22  overflow: scroll;
     23  scroll-snap-type: both mandatory;
     24 }
     25 
     26 #space {
     27  width: 2000px;
     28  height: 2000px;
     29 }
     30 
     31 .snap {
     32  width: 200px;
     33  height: 200px;
     34  background-color: blue;
     35  scroll-snap-align: start;
     36 }
     37 
     38 #left-top {
     39  left: 0px;
     40  top: 0px;
     41 }
     42 
     43 #left-top::before {
     44  position: absolute;
     45  margin: 0px;
     46  content: "";
     47 
     48  display:block;
     49 
     50  left: 0px;
     51  top: 800px;
     52  width: 200px;
     53  height: 200px;
     54  background-color: yellow;
     55  scroll-snap-align: start;
     56 }
     57 
     58 #left-top::after {
     59  position: absolute;
     60  margin: 0px;
     61  content: "";
     62 
     63  display:block;
     64 
     65  left: 800px;
     66  top: 0px;
     67  width: 200px;
     68  height: 200px;
     69  background-color: yellow;
     70  scroll-snap-align: start;
     71 
     72 }
     73 
     74 </style>
     75 <div id="scroller">
     76  <div id="space"></div>
     77  <div id="left-top" class="snap"></div>
     78 </div>
     79 <script>
     80 test(t => {
     81  const scroller = document.getElementById("scroller");
     82  scroller.scrollTo(0, 0);
     83  assert_equals(scroller.scrollLeft, 0);
     84  assert_equals(scroller.scrollTop, 0);
     85  scroller.scrollTo(500, 600);
     86  assert_equals(scroller.scrollLeft, 0);
     87  assert_equals(scroller.scrollTop, 800);
     88  scroller.scrollTo(600, 500);
     89  assert_equals(scroller.scrollLeft, 800);
     90  assert_equals(scroller.scrollTop, 0);
     91 }, 'Only snap to visible areas in the case where taking the closest snap point of \
     92  each axis does not snap to a visible area');
     93 </script>