tor-browser

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

scroll-behavior-4.html (2743B)

      1 <!DOCTYPE HTML>
      2 <html class="reftest-wait">
      3 <head>
      4    <meta charset="utf-8">
      5    <title>Testcase for bug 1010538 - Anchor Link Scrolling</title>
      6    <style type="text/css">
      7 
      8        html,body {
      9            color: black;
     10            background-color: white;
     11            font-size: 16px;
     12            padding: 0;
     13            margin: 0;
     14        }
     15 
     16        .a_box {
     17            position: relative;
     18            left: 0px;
     19            top: 0px;
     20            width: 20px;
     21            height: 20px;
     22            background: blue;
     23        }
     24 
     25        .another_box {
     26            position: relative;
     27            left: 2000px;
     28            top: 2000px;
     29            width: 20px;
     30            height: 20px;
     31            background: green;
     32            display: inline-block;
     33        }
     34 
     35        .scroll_box {
     36            width: 50px;
     37            height: 50px;
     38            overflow: scroll;
     39            will-change: scroll-position;
     40        }
     41 
     42        #scroll_1 {
     43            scroll-behavior: auto;
     44        }
     45 
     46        #scroll_3 {
     47            scroll-behavior: smooth;
     48        }
     49 
     50    </style>
     51 </head>
     52 <body>
     53  <div id="scroll_1" class="scroll_box">
     54    <div id="box1a" class="a_box"></div>
     55    <a name="test_anchor_1" id="box1b" class="another_box"></a>
     56  </div>
     57  <div id="scroll_2" class="scroll_box">
     58    <div id="box2a" class="a_box"></div>
     59    <a name="test_anchor_2" id="box2b" class="another_box"></a>
     60  </div>
     61  <div id="scroll_3" class="scroll_box">
     62    <div id="box3a" class="a_box"></div>
     63    <a name="test_anchor_3" id="box3b" class="another_box"></a>
     64  </div>
     65 <script>
     66  function doTest() {
     67    if (document.location.search != '?ref') {
     68      // Scroll_1 to Scroll_2 are expected to scroll instantly
     69      window.location.hash = "test_anchor_1";
     70      window.location.hash = "test_anchor_2";
     71 
     72      // Scroll_3 is expected to scroll smoothly
     73      document.getElementById("box3b").scrollIntoView({block: "end", behavior: "smooth"});
     74 
     75      // Interrupt any smooth scrolling
     76      for (var i=1; i <= 3; i++) {
     77        document.getElementById("scroll_" + i).scrollLeft
     78          = document.getElementById("scroll_" + i).scrollLeft;
     79        document.getElementById("scroll_" + i).scrollTop
     80          = document.getElementById("scroll_" + i).scrollTop;
     81      }
     82    } else {
     83      // Scroll all boxes except for Scroll_3
     84      for (var i=1; i <= 2; i++) {
     85        document.getElementById("box" + i + "b").scrollIntoView({block: "end", behavior: "instant"});
     86      }
     87    }
     88    document.documentElement.removeAttribute("class");
     89  }
     90 
     91  for (var i=1; i <= 3; i++) {
     92    document.getElementById("box" + i + "a")
     93      .scrollIntoView({block: "start", behavior: "instant"});
     94  }
     95 
     96  window.addEventListener("MozReftestInvalidate", doTest);
     97 </script>
     98 </body>
     99 </html>