tor-browser

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

scroll-behavior-8.html (2729B)

      1 <!DOCTYPE HTML>
      2 <html class="reftest-wait">
      3 <head>
      4    <meta charset="utf-8">
      5    <title>Testcase for bug 1010538 - Dynamically change scroll-behavior</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: 150px;
     36            height: 150px;
     37            overflow: scroll;
     38        }
     39 
     40        #scroll_2 {
     41            scroll-behavior: auto;
     42        }
     43 
     44        #scroll_3 {
     45            scroll-behavior: smooth;
     46        }
     47 
     48    </style>
     49 </head>
     50 <body>
     51  <div id="scroll_1" class="scroll_box">
     52    <div id="box1a" class="a_box"></div>
     53    <div id="box1b" class="another_box"></div>
     54  </div>
     55  <div id="scroll_2" class="scroll_box">
     56    <div id="box2a" class="a_box"></div>
     57    <div id="box2b" class="another_box"></div>
     58  </div>
     59  <div id="scroll_3" class="scroll_box">
     60    <div id="box3a" class="a_box"></div>
     61    <div id="box3b" class="another_box"></div>
     62  </div>
     63 <script>
     64  function doTest() {
     65    if (document.location.search != '?ref') {
     66      // Expect smooth scroll:
     67      document.getElementById("scroll_1").style.scrollBehavior = "smooth";
     68      document.getElementById("scroll_1").scrollTo({left: 0, top: 0});
     69      document.getElementById("scroll_2").style.scrollBehavior = "smooth";
     70      document.getElementById("scroll_2").scrollTo({left: 0, top: 0});
     71 
     72      // Expect instant scroll:
     73      document.getElementById("scroll_3").style.scrollBehavior = "auto";
     74      document.getElementById("scroll_3").scrollTo({left: 0, top: 0});
     75    } else {
     76      document.getElementById("scroll_1").scrollTo({left: 0, top: 0, behavior: "smooth"});
     77      document.getElementById("scroll_2").scrollTo({left: 0, top: 0, behavior: "smooth"});
     78      document.getElementById("scroll_3").scrollTo({left: 0, top: 0, behavior: "instant"});
     79    }
     80 
     81    // Interrupt any smooth scrolling
     82    for (var i=1; i <= 3; i++) {
     83      document.getElementById("scroll_" + i).scrollTo();
     84    }
     85 
     86    document.documentElement.removeAttribute("class");
     87  }
     88 
     89  for (var i=1; i <= 3; i++) {
     90    document.getElementById("box" + i + "b")
     91      .scrollIntoView({block: "start", behavior: "instant"});
     92  }
     93 
     94  window.addEventListener("MozReftestInvalidate", doTest);
     95 </script>
     96 </body>
     97 </html>