tor-browser

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

page_scroll_with_fixed_pos_window.html (4816B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no" />
      5  <title>Scrolling by pages with fixed-pos headers and footers</title>
      6  <style>
      7  .fp { position:fixed; left:0; width:100%; }
      8  .fp2 { position:fixed; left:0; width:100%; }
      9  </style>
     10 </head>
     11 <body onscroll="didScroll()" onload="test()">
     12 <div class="fp" id="top" style="top:0; height:10px; background:yellow;"></div>
     13 <div class="fp2" id="top2" style="top:10px; height:11px; background:blue;"></div>
     14 <div class="fp" style="top:50%; height:7px; background:cyan;"></div>
     15 <div class="fp2" id="bottom2" style="bottom:9px; height:12px; background:red;"></div>
     16 <div class="fp" id="bottom" style="bottom:0; height:13px; background:yellow;"></div>
     17 <p id="target">Something to click on to get focus
     18 <div style="height:3000px;"></div>
     19 <pre id="test">
     20 <script class="testbody">
     21 var SimpleTest = window.opener.SimpleTest;
     22 var SpecialPowers = window.opener.SpecialPowers;
     23 var is = window.opener.is;
     24 
     25 function showElements(show, classname) {
     26  var elements = document.getElementsByClassName(classname);
     27  for (var i = 0; i < elements.length; ++i) {
     28    elements[i].style.display = show ? '' : 'none';
     29  }
     30  document.documentElement.getBoundingClientRect();
     31 }
     32 function showFixedPosElements(show) {
     33  showElements(show, "fp");
     34 }
     35 function showFixedPosElements2(show) {
     36  showElements(show, "fp2");
     37 }
     38 
     39 var nextCont;
     40 function didScroll() {
     41  var c = nextCont;
     42  nextCont = null;
     43  if (c) {
     44    c();
     45  }
     46 }
     47 
     48 function resetScrollAndScrollDownOnePageWithContinuation(cont) {
     49  if (document.documentElement.scrollTop != 0) {
     50    document.documentElement.scrollTop = 0;
     51    nextCont = function() {
     52      setTimeout(function() { scrollDownOnePageWithContinuation(cont) }, 0);
     53    };
     54  } else {
     55    scrollDownOnePageWithContinuation(cont);
     56  }
     57 }
     58 
     59 function scrollDownOnePageWithContinuation(cont) {
     60  nextCont = cont;
     61  window.scrollByPages(1);
     62 }
     63 
     64 function test() {
     65  var smoothScrollPref = "general.smoothScroll";
     66  SpecialPowers.pushPrefEnv({"set":[[smoothScrollPref, false]]}, runTest);
     67 }
     68 
     69 function runTest() {
     70  showFixedPosElements(false);
     71  showFixedPosElements2(false);
     72  resetScrollAndScrollDownOnePageWithContinuation(function() {
     73    var fullPageScrollDown = document.documentElement.scrollTop;
     74 
     75    showFixedPosElements(true);
     76    resetScrollAndScrollDownOnePageWithContinuation(function() {
     77      var fullPageScrollDownWithHeaderAndFooter = document.documentElement.scrollTop;
     78      is(fullPageScrollDownWithHeaderAndFooter, fullPageScrollDown - (10 + 13),
     79         "Reduce scroll distance by size of small header and footer");
     80 
     81      document.getElementById("bottom").style.height = (window.innerHeight - 20) + "px";
     82      resetScrollAndScrollDownOnePageWithContinuation(function() {
     83        is(document.documentElement.scrollTop, fullPageScrollDown - 10,
     84           "Ignore really big elements when reducing scroll size");   
     85        document.getElementById("bottom").style.height = "13px";
     86 
     87        document.getElementById("top").style.width = "100px";
     88        resetScrollAndScrollDownOnePageWithContinuation(function() {
     89          is(document.documentElement.scrollTop, fullPageScrollDown - 13,
     90             "Ignore elements that don't span the entire viewport side");
     91          document.getElementById("top").style.width = "100%";
     92 
     93          showFixedPosElements2(true);
     94          resetScrollAndScrollDownOnePageWithContinuation(function() {
     95            is(document.documentElement.scrollTop, fullPageScrollDown - (10 + 11 + 9 + 12),
     96               "Combine multiple overlapping elements");
     97            showFixedPosElements2(false);
     98 
     99            document.getElementById("top").style.width = "400px";
    100            resetScrollAndScrollDownOnePageWithContinuation(function() {
    101              is(document.documentElement.scrollTop, fullPageScrollDown - (10 + 13),
    102                 "Don't ignore elements that span more than half the viewport side");
    103              document.getElementById("top").style.width = "100%";
    104 
    105              document.getElementById("top").style.top = "-40px";
    106              document.getElementById("top").style.transform = "translateY(38px)";
    107              resetScrollAndScrollDownOnePageWithContinuation(function() {
    108                is(document.documentElement.scrollTop,
    109                   fullPageScrollDown - (10 + 13 - 40 + 38),
    110                   "Account for offset and transform");
    111                document.getElementById("top").style.width = "100%";
    112 
    113                // Scroll back up so test results are visible
    114                document.documentElement.scrollTop = 0;
    115                SimpleTest.finish();
    116                window.close();
    117              });
    118            });
    119          });
    120        });
    121      });
    122    });
    123  });
    124 }
    125 </script>
    126 </pre>
    127 </body>
    128 </html>