tor-browser

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

no-snap-position.html (2737B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#valdef-scroll-snap-type-mandatory" />
      3 <script src="/resources/testharness.js"></script>
      4 <script src="/resources/testharnessreport.js"></script>
      5 <script src="./support/common.js"></script>
      6 <style>
      7 div {
      8  position: absolute;
      9  margin: 0px;
     10 }
     11 #scroller {
     12  height: 500px;
     13  width: 500px;
     14  overflow: hidden;
     15 }
     16 .child {
     17  width: 300px;
     18  height: 300px;
     19  background-color: blue;
     20 }
     21 </style>
     22 
     23 <div id="scroller">
     24  <div class="child" style="top: 0px; left: 0px;"></div>
     25  <div class="child" style="top: 1000px; left: 1000px;"></div>
     26  <div style="width: 2000px; height: 2000px;"></div>
     27 </div>
     28 
     29 <script>
     30 test(() => {
     31  scroller.style.scrollSnapType = "both mandatory";
     32 
     33  // Scroll to where the first child is in view.
     34  scroller.scrollTo(100, 100);
     35  assert_equals(scroller.scrollLeft, 100);
     36  assert_equals(scroller.scrollTop, 100);
     37 
     38  // Scroll to where the second child is in view.
     39  scroller.scrollTo(900, 900);
     40  assert_equals(scroller.scrollLeft, 900);
     41  assert_equals(scroller.scrollTop, 900);
     42 }, "No snapping occurs if there is no valid snap position");
     43 
     44 test(() => {
     45  scroller.style.scrollSnapType = "x mandatory";
     46 
     47  for (const target of document.querySelectorAll(".child")) {
     48    target.scrollSnapAlign = "start none";
     49  }
     50 
     51  // Scroll to where the first child is in view.
     52  scroller.scrollTo(100, 100);
     53  assert_equals(scroller.scrollLeft, 100);
     54  assert_equals(scroller.scrollTop, 100);
     55 
     56  // Scroll to where the second child is in view.
     57  scroller.scrollTo(900, 900);
     58  assert_equals(scroller.scrollLeft, 900);
     59  assert_equals(scroller.scrollTop, 900);
     60 }, "No snapping occurs if there is no valid snap position matches scroll-snap-type");
     61 
     62 promise_test(async t => {
     63  // Start with valid snap positions.
     64  scroller.style.scrollSnapType = "y mandatory";
     65  document.querySelectorAll('.child').forEach(el => {
     66    el.style.scrollSnapAlign = 'start';
     67    t.add_cleanup(() => {
     68      el.style.scrollSnapAlign = '';
     69    });
     70  });
     71  scroller.scrollTo(100, 100);
     72  await waitForNextFrame();
     73  const scrollPosition = scroller.scrollTop;
     74  // Elements no longer snap along the y-axis.
     75  document.querySelectorAll('.child').forEach(el => {
     76    el.style.scrollSnapAlign = 'none start';
     77    // Bump the position to verify that we don't stay pinned to the same element
     78    // after layout update.
     79    el.style.top = `${parseInt(el.style.top) + 100}px`;
     80  });
     81  await waitForNextFrame();
     82  assert_equals(scroller.scrollTop, scrollPosition);
     83  scroller.scrollTo(900, 900);
     84  assert_equals(scroller.scrollLeft, 900);
     85  assert_equals(scroller.scrollTop, 900);
     86 
     87 }, "No snapping occurs when last remaining valid snap point is no longer " +
     88   "valid.");
     89 </script>