tor-browser

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

scroll-behavior-2.html (3103B)

      1 <!DOCTYPE HTML>
      2 <html class="reftest-wait">
      3 <head>
      4    <meta charset="utf-8">
      5    <title>Testcase for bug 1010538, smooth scrolling expected</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        }
     33 
     34        .scroll_box {
     35            width: 50px;
     36            height: 50px;
     37            overflow: scroll;
     38            will-change: scroll-position;
     39        }
     40 
     41        #scroll_1, #scroll_2, #scroll_3, #scroll_6 {
     42            scroll-behavior: smooth;
     43        }
     44 
     45        #scroll_4 {
     46            scroll-behavior: auto;
     47        }
     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    <div id="box1b" class="another_box"></div>
     56  </div>
     57  <div id="scroll_2" class="scroll_box">
     58    <div id="box2a" class="a_box"></div>
     59    <div id="box2b" class="another_box"></div>
     60  </div>
     61  <div id="scroll_3" class="scroll_box">
     62    <div id="box3a" class="a_box"></div>
     63    <div id="box3b" class="another_box"></div>
     64  </div>
     65  <div id="scroll_4" class="scroll_box">
     66    <div id="box4a" class="a_box"></div>
     67    <div id="box4b" class="another_box"></div>
     68  </div>
     69  <div id="scroll_5" class="scroll_box">
     70    <div id="box5a" class="a_box"></div>
     71    <div id="box5b" class="another_box"></div>
     72  </div>
     73  <div id="scroll_6" class="scroll_box">
     74    <div id="box6a" class="a_box"></div>
     75    <div id="box6b" class="another_box"></div>
     76  </div>
     77 <script>
     78  function doTest() {
     79    if (document.location.search != '?ref') {
     80      document.getElementById("box1b").scrollIntoView({block: "end"});
     81      document.getElementById("box2b").scrollIntoView({block: "end", behavior: "auto"});
     82      document.getElementById("box3b").scrollIntoView({block: "end", behavior: "smooth"});
     83      document.getElementById("box4b").scrollIntoView({block: "end", behavior: "smooth"});
     84      document.getElementById("box5b").scrollIntoView({block: "end", behavior: "smooth"});
     85      document.getElementById("box6b").scrollIntoView(false);
     86 
     87      // Interrupt any smooth scrolling
     88      for (var i=1; i <= 6; i++) {
     89        document.getElementById("scroll_" + i).scrollLeft
     90          = document.getElementById("scroll_" + i).scrollLeft;
     91        document.getElementById("scroll_" + i).scrollTop
     92          = document.getElementById("scroll_" + i).scrollTop;
     93      }
     94    }
     95    document.documentElement.removeAttribute("class");
     96  }
     97  for (var i=1; i <= 6; i++) {
     98    document.getElementById("box" + i + "a")
     99      .scrollIntoView({block: "start", behavior: "instant"});
    100  }
    101  window.addEventListener("MozReftestInvalidate", doTest);
    102 </script>
    103 </body>
    104 </html>