tor-browser

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

snap-to-different-targets.html (2271B)

      1 <!DOCTYPE html>
      2 <title>
      3  The scroller should try to resnap to targets for both axes if possible.
      4 </title>
      5 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" />
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <style>
      9 div {
     10  position: absolute;
     11  margin: 0;
     12 }
     13 
     14 #scroller {
     15  height: 500px;
     16  width: 500px;
     17  overflow: hidden;
     18  scroll-snap-type: both mandatory;
     19 }
     20 
     21 #x-axis-target {
     22  scroll-snap-align: none start;
     23  background-color: blue;
     24  width: 100px;
     25  height: 100px;
     26  top: 400px;
     27  left: 200px;
     28 }
     29 
     30 #y-axis-target {
     31  scroll-snap-align: start none;
     32  background-color: green;
     33  width: 100px;
     34  height: 100px;
     35  top: 200px;
     36  left: 400px;
     37 }
     38 
     39 #far-x-axis-target {
     40  scroll-snap-align: none start;
     41  background-color: blue;
     42  width: 100px;
     43  height: 100px;
     44  top: 1200px;
     45  left: 300px;
     46 }
     47 
     48 #far-y-axis-target {
     49  scroll-snap-align: start none;
     50  background-color: green;
     51  width: 100px;
     52  height: 100px;
     53  top: 300px;
     54  left: 1200px;
     55 }
     56 
     57 .area {
     58  width: 2000px;
     59  height: 2000px;
     60 }
     61 </style>
     62 
     63 <div id="scroller">
     64  <div class="area"></div>
     65  <div id="x-axis-target"></div>
     66  <div id="y-axis-target"></div>
     67  <div id="far-x-axis-target"></div>
     68  <div id="far-y-axis-target"></div>
     69 </div>
     70 
     71 <script>
     72 
     73 const x_target = document.getElementById("x-axis-target");
     74 const y_target = document.getElementById("y-axis-target");
     75 const scroller = document.getElementById("scroller");
     76 
     77 test(t => {
     78  // The scroller should be snapped to the two closest points on first layout.
     79  assert_equals(scroller.scrollTop, 200);
     80  assert_equals(scroller.scrollLeft, 200);
     81  x_target.style.setProperty("left", "1000px");
     82  y_target.style.setProperty("top", "1000px");
     83 
     84  // The style change makes it impossible for the scroller to snap to both
     85  // targets, but at least one of the targets should be preserved. The scroller
     86  // should then re-evaluate the snap point for the other axis.
     87  const snapped_to_x = scroller.scrollLeft == 1000 && scroller.scrollTop == 300;
     88  const snapped_to_y = scroller.scrollTop == 1000 && scroller.scrollLeft == 300;
     89  assert_true(snapped_to_x || snapped_to_y);
     90 }, "Scroller should snap to at least one of the targets if unable to snap to both after a layout change.");
     91 </script>