tor-browser

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

scroll-snap-stop-change.html (2363B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop" />
      3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <style>
      7 div, html, body {
      8  margin: 0;
      9  padding: 0;
     10 }
     11 
     12 html {
     13  scroll-snap-type: x mandatory;
     14  overflow: scroll;
     15 }
     16 
     17 #scroller {
     18  scroll-snap-type: x mandatory;
     19  overflow: scroll;
     20  height: 400px;
     21  width: 400px;
     22 }
     23 
     24 .large_space {
     25  width: 2000px;
     26  height: 2000px;
     27 }
     28 
     29 .snap_area {
     30  scroll-snap-align: none start;
     31  width: 100px;
     32  height: 100px;
     33 
     34  background-color: blue;
     35 }
     36 
     37 .snap_area:nth-child(1) {
     38  margin-left: 0;
     39 }
     40 
     41 .snap_area:nth-child(2) {
     42  margin-left: 100px;
     43 }
     44 
     45 .snap_area:nth-child(3) {
     46  margin-left: 300px;
     47 }
     48 
     49 .snap_area:nth-child(4) {
     50  margin-left: 500px;
     51 }
     52 </style>
     53 
     54 <!-- Add snap area to the root scroller -->
     55 <div class="snap_area"></div>
     56 <div class="snap_area"></div>
     57 <div class="snap_area"></div>
     58 <div class="snap_area"></div>
     59 
     60 <div id="scroller">
     61  <div class="snap_area"></div>
     62  <div class="snap_area"></div>
     63  <div class="snap_area"></div>
     64  <div class="snap_area"></div>
     65  <div class="large_space"></div>
     66 </div>
     67 
     68 <div class="large_space"></div>
     69 
     70 <script>
     71 const scrollers = [document.scrollingElement, document.getElementById("scroller")];
     72 for (const scroller of scrollers) {
     73  test(_ => {
     74    assert_equals(scroller.scrollLeft, 0); // sanity check
     75 
     76    scroller.querySelectorAll('.snap_area').forEach(area => area.style.scrollSnapStop = 'always');
     77    scroller.scrollBy(500, 0);
     78    assert_equals(scroller.scrollLeft, 100, "scrollBy should not skip area with stop always");
     79 
     80    scroller.querySelectorAll('.snap_area').forEach(area => area.style.scrollSnapStop = 'normal');
     81    scroller.scrollBy(500, 0);
     82    assert_equals(scroller.scrollLeft, 500, "scrollBy should skip secon area with stop normal");
     83 
     84    // When snap type is changed back to mandatory, scrolling should snap.
     85    scroller.querySelectorAll('.snap_area').forEach(area => area.style.scrollSnapStop = 'always');
     86    scroller.scrollBy(-500, 0);
     87    assert_equals(scroller.scrollLeft, 300, "scrollBy should not skip area with stop always");
     88  }, `scroll-snap-stop for areas on ${scroller.nodeName} should control snapping behavior and changing it takes effect`);
     89 }
     90 </script>