tor-browser

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

position-change-heuristic-in-nested-scroll-box.html (2100B)

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