tor-browser

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

ancestor-change-heuristic.html (2028B)

      1 <!DOCTYPE html>
      2 <script src="/resources/testharness.js"></script>
      3 <script src="/resources/testharnessreport.js"></script>
      4 <style>
      5 
      6 #space { height: 4000px; }
      7 #ancestor { position: relative; }
      8 #before, #anchor { height: 100px; }
      9 #anchor { background-color: green; }
     10 
     11 .layout1 { padding-top: 20px; }
     12 .layout2 { margin-right: 20px; }
     13 .layout3 { max-width: 100px; }
     14 .layout4 { min-height: 400px; }
     15 .layout5 { position: static !important; }
     16 .layout6 { left: 20px; }
     17 .layout7 { transform: matrix(1, 0, 0, 1, 50, 50); }
     18 .nonLayout1 { color: red; }
     19 .nonLayout2 { font-size: 200%; }
     20 .nonLayout3 { box-shadow: 10px 10px 10px gray; }
     21 .nonLayout4 { opacity: 0.5; }
     22 .nonLayout5 { z-index: -1; }
     23 
     24 .scroller {
     25  overflow: scroll;
     26  width: 600px;
     27  height: 600px;
     28 }
     29 
     30 </style>
     31 <div id="maybeScroller">
     32  <div id="space">
     33    <div id="ancestor">
     34      <div id="before"></div>
     35      <div id="anchor"></div>
     36    </div>
     37  </div>
     38 </div>
     39 <script>
     40 
     41 // Tests that scroll anchoring is suppressed when one of the "layout-affecting"
     42 // properties is modified on an ancestor of the anchor node.
     43 
     44 var scroller;
     45 var ancestor = document.querySelector("#ancestor");
     46 var before = document.querySelector("#before");
     47 
     48 function runCase(classToApply, expectSuppression) {
     49  // Reset.
     50  scroller.scrollTop = 0;
     51  ancestor.className = "";
     52  before.style.height = "";
     53  scroller.scrollTop = 150;
     54 
     55  ancestor.className = classToApply;
     56  before.style.height = "150px";
     57 
     58  var expectedTop = expectSuppression ? 150 : 200;
     59  assert_equals(scroller.scrollTop, expectedTop);
     60 }
     61 
     62 function runAll() {
     63  for (var i = 1; i <= 7; i++)
     64    runCase("layout" + i, true);
     65  for (var i = 1; i <= 5; i++)
     66    runCase("nonLayout" + i, false);
     67 }
     68 
     69 test(() => {
     70  document.querySelector("#maybeScroller").className = "";
     71  scroller = document.scrollingElement;
     72  runAll();
     73 }, "Ancestor changes in document scroller.");
     74 
     75 test(() => {
     76  scroller = document.querySelector("#maybeScroller");
     77  scroller.className = "scroller";
     78  runAll();
     79 }, "Ancestor changes in scrollable <div>.");
     80 
     81 </script>