tor-browser

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

scroll-snap-stop-001.html (2478B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop" />
      3 <script src="/resources/testharness.js"></script>
      4 <script src="/resources/testharnessreport.js"></script>
      5 <style>
      6 div {
      7  position: absolute;
      8 }
      9 #scroller {
     10  width: 400px;
     11  height: 400px;
     12  overflow: scroll;
     13  scroll-snap-type: both mandatory;
     14 }
     15 #space {
     16  left: 0px;
     17  top: 0px;
     18  width: 2100px;
     19  height: 2100px;
     20 }
     21 .target {
     22  width: 50px;
     23  height: 50px;
     24  scroll-snap-align: start;
     25 }
     26 .origin {
     27  left: 0px;
     28  top: 0px;
     29 }
     30 .always-stop {
     31  left: 100px;
     32  top: 0px;
     33  scroll-snap-stop: always;
     34 }
     35 .closer {
     36  left: 200px;
     37  top: 0px;
     38 }
     39 </style>
     40 
     41 <div id="scroller">
     42  <div id="space"></div>
     43  <div class="target origin"></div>
     44  <div class="target always-stop"></div>
     45  <div class="target closer"></div>
     46 </div>
     47 
     48 <script>
     49 var scroller = document.getElementById("scroller");
     50 test(() => {
     51  scroller.scrollTo(0, 0);
     52  assert_equals(scroller.scrollLeft, 0);
     53  assert_equals(scroller.scrollTop, 0);
     54 
     55  scroller.scrollBy(300, 0);
     56  assert_equals(scroller.scrollLeft, 100);
     57  assert_equals(scroller.scrollTop, 0);
     58 }, "A scroll with intended direction and end position should not pass a snap " +
     59   "area with scroll-snap-stop: always.")
     60 
     61 test(() => {
     62  scroller.scrollTo(0, 0);
     63  assert_equals(scroller.scrollLeft, 0);
     64  assert_equals(scroller.scrollTop, 0);
     65 
     66  scroller.scrollTo(300, 0);
     67  assert_equals(scroller.scrollLeft, 200);
     68  assert_equals(scroller.scrollTop, 0);
     69 }, "A scroll with intended end position should always choose the closest snap " +
     70   "position regardless of the scroll-snap-stop value.")
     71 
     72 // Tests for programmatic scrolls beyond the scroller bounds.
     73 
     74 test(() => {
     75  scroller.scrollTo(0, 0);
     76  assert_equals(scroller.scrollLeft, 0);
     77  assert_equals(scroller.scrollTop, 0);
     78 
     79  scroller.scrollBy(100000, 0);
     80  assert_equals(scroller.scrollLeft, 100);
     81  assert_equals(scroller.scrollTop, 0);
     82 }, "A scroll outside bounds in the snapping axis with intended direction and " +
     83   "end position should not pass a snap area with scroll-snap-stop: always.")
     84 
     85 test(() => {
     86  scroller.scrollTo(0, 0);
     87  assert_equals(scroller.scrollLeft, 0);
     88  assert_equals(scroller.scrollTop, 0);
     89 
     90  scroller.scrollBy(300, -10);
     91  assert_equals(scroller.scrollLeft, 100);
     92  assert_equals(scroller.scrollTop, 0);
     93 }, "A scroll outside bounds in the non-snapping axis with intended direction " +
     94   "and end position should not pass a snap area with scroll-snap-stop: always.")
     95 
     96 </script>