tor-browser

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

position-change-heuristic.html (1960B)

      1 <!DOCTYPE html>
      2 <script src="/resources/testharness.js"></script>
      3 <script src="/resources/testharnessreport.js"></script>
      4 <style>
      5 
      6 #space {
      7  height: 4000px;
      8 }
      9 #header {
     10  background-color: #F5B335;
     11  height: 50px;
     12  width: 100%;
     13 }
     14 #content {
     15  background-color: #D3D3D3;
     16  height: 400px;
     17 }
     18 .scroller {
     19  overflow: scroll;
     20  position: relative;
     21  width: 600px;
     22  height: 600px;
     23 }
     24 
     25 </style>
     26 <div id="maybeScroller">
     27  <div id="space">
     28    <div id="header"></div>
     29    <div id="before"></div>
     30    <div id="content"></div>
     31  </div>
     32 </div>
     33 <script>
     34 
     35 // Tests that scroll anchoring is suppressed when an element in the scroller
     36 // changes its in-flow state.
     37 
     38 var scroller;
     39 
     40 function runCase(oldPos, newPos, expectSuppression, skipInverse) {
     41  var header = document.querySelector("#header");
     42  var before = document.querySelector("#before");
     43 
     44  header.style.position = oldPos;
     45  before.style.height = "0";
     46  scroller.scrollTop = 200;
     47 
     48  header.style.position = newPos;
     49  before.style.height = "25px";
     50 
     51  var expectedTop = expectSuppression ? 200 : 225;
     52  assert_equals(scroller.scrollTop, expectedTop);
     53 
     54  if (!skipInverse)
     55    runCase(newPos, oldPos, expectSuppression, true);
     56 }
     57 
     58 test(() => {
     59  scroller = document.scrollingElement;
     60  document.querySelector("#maybeScroller").className = "";
     61 
     62  runCase("static", "fixed", true);
     63  runCase("static", "absolute", true);
     64  runCase("static", "relative", false);
     65  runCase("fixed", "absolute", false);
     66  runCase("fixed", "relative", true);
     67  runCase("absolute", "relative", true);
     68 }, "Position changes in document scroller.");
     69 
     70 test(() => {
     71  scroller = document.querySelector("#maybeScroller");
     72  scroller.className = "scroller";
     73 
     74  runCase("static", "fixed", true);
     75  runCase("static", "absolute", true);
     76  runCase("static", "relative", false);
     77  runCase("fixed", "absolute", false);
     78  runCase("fixed", "relative", true);
     79  runCase("absolute", "relative", true);
     80 }, "Position changes in scrollable <div>.");
     81 
     82 </script>