tor-browser

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

move-current-target.html (3055B)

      1 <!DOCTYPE html>
      2 <title>
      3  Moving the current snap target should make the scroller resnap to it.
      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: relative;
     11  margin: 0;
     12 }
     13 
     14 #block {
     15  height: 100px;
     16  width: 100px;
     17 }
     18 
     19 #scroller {
     20  height: 500px;
     21  width: 500px;
     22  overflow: hidden;
     23  scroll-snap-type: both mandatory;
     24 }
     25 
     26 #initial-target {
     27  width: 300px;
     28  height: 300px;
     29  left: 100px;
     30  top: 0;
     31  transform: none;
     32  background-color: green;
     33  scroll-snap-align: start;
     34 }
     35 
     36 #other-target {
     37  width: 300px;
     38  height: 300px;
     39  left: 300px;
     40  background-color: red;
     41  scroll-snap-align: start;
     42 }
     43 
     44 .area {
     45  width: 2000px;
     46  height: 2000px;
     47 }
     48 </style>
     49 
     50 <div id="scroller">
     51  <div id="block"></div>
     52  <div id="initial-target"></div>
     53  <div id="other-target"></div>
     54  <div class="area"></div>
     55 </div>
     56 
     57 <script>
     58 const initial_target = document.getElementById("initial-target");
     59 const other_target = document.getElementById("other-target");
     60 const block = document.getElementById("block");
     61 const scroller = document.getElementById("scroller");
     62 
     63 function cleanup() {
     64  initial_target.style.setProperty("transform", "none");
     65  initial_target.style.setProperty("top", "0");
     66  block.style.setProperty("height", "100px");
     67 }
     68 
     69 test(t => {
     70  t.add_cleanup(cleanup);
     71  scroller.scrollTo(0,0);
     72  assert_equals(scroller.scrollTop, 100);
     73  assert_equals(scroller.scrollLeft, 100);
     74 
     75  initial_target.style.setProperty("top", "300px");
     76  assert_equals(scroller.scrollTop, 400);
     77  assert_equals(scroller.scrollLeft, 100);
     78 }, "Moving the current snap target should make the scroller resnap to it.");
     79 
     80 test(t => {
     81  t.add_cleanup(cleanup);
     82  scroller.scrollTo(0,0);
     83  assert_equals(scroller.scrollTop, 100);
     84  assert_equals(scroller.scrollLeft, 100);
     85 
     86  block.style.setProperty("height", "200px");
     87  assert_equals(scroller.scrollTop, 200);
     88  assert_equals(scroller.scrollLeft, 100);
     89 }, "Changing the layout of other elements should be able to cause resnapping to \
     90 the target.");
     91 
     92 test(t => {
     93  t.add_cleanup(cleanup);
     94  scroller.scrollTo(0,0);
     95  assert_equals(scroller.scrollTop, 100);
     96  assert_equals(scroller.scrollLeft, 100);
     97 
     98  initial_target.style.setProperty("transform", "translate(0,100px)");
     99  assert_equals(scroller.scrollTop, 200);
    100  assert_equals(scroller.scrollLeft, 100);
    101 }, "Transforming the current snap target should make the scroller resnap to it.");
    102 
    103 test(t => {
    104  t.add_cleanup(cleanup);
    105  initial_target.style.setProperty("top", "100px");
    106  scroller.scrollTo(0,0);
    107  assert_equals(scroller.scrollTop, 200);
    108  assert_equals(scroller.scrollLeft, 100);
    109 
    110  initial_target.style.setProperty("transform", "translate(0,100px)");
    111  initial_target.style.setProperty("top", "0");
    112  assert_equals(scroller.scrollTop, 200);
    113  assert_equals(scroller.scrollLeft, 100);
    114 }, "Applying two property changes that do not change the visual offset of the \
    115 target should not change the scroll offset.");
    116 </script>