tor-browser

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

scroll-behavior-5.html (3072B)


      1 <!DOCTYPE HTML>
      2 <html class="reftest-wait">
      3 <head>
      4    <meta charset="utf-8">
      5    <title>Testcase for bug 1010538 - Element.ScrollLeft and Element.ScrollTop 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: 50px;
     36            height: 50px;
     37            overflow: scroll;
     38        }
     39 
     40        #scroll_2, #scroll_4 {
     41            scroll-behavior: auto;
     42        }
     43 
     44        #scroll_5, #scroll_6 {
     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  <div id="scroll_4" class="scroll_box">
     64    <div id="box4a" class="a_box"></div>
     65    <div id="box4b" class="another_box"></div>
     66  </div>
     67  <div id="scroll_5" class="scroll_box">
     68    <div id="box5a" class="a_box"></div>
     69    <div id="box5b" class="another_box"></div>
     70  </div>
     71  <div id="scroll_6" class="scroll_box">
     72    <div id="box6a" class="a_box"></div>
     73   <div id="box6b" class="another_box"></div>
     74  </div>
     75 <script>
     76  function doTest() {
     77    if (document.location.search != '?ref') {
     78      // Expect instantaneous scroll:
     79      document.getElementById("scroll_1").scrollTo({left: 0, top: 0});
     80      document.getElementById("scroll_2").scrollTo({left: 0, top: 0});
     81      document.getElementById("scroll_3").scrollTo(0, 0);
     82      document.getElementById("scroll_4").scrollTo(0, 0);
     83 
     84      // Expect smooth scroll:
     85      document.getElementById("scroll_5").scrollTo({left: 0, top: 0});
     86      document.getElementById("scroll_6").scrollTo(0, 0);
     87 
     88      // Interrupt any smooth scrolling
     89      for (var i=1; i <= 6; i++) {
     90        document.getElementById("scroll_" + i).scrollTo();
     91      }
     92    } else {
     93      // Scroll all boxes except for box5a and box6a
     94      for (var i=1; i <= 4; i++) {
     95        document.getElementById("box" + i + "a").scrollIntoView({block: "end", behavior: "instant"});
     96      }
     97    }
     98    document.documentElement.removeAttribute("class");
     99  }
    100 
    101  for (var i=1; i <= 6; i++) {
    102    document.getElementById("box" + i + "b")
    103      .scrollIntoView({block: "start", behavior: "instant"});
    104  }
    105 
    106  window.addEventListener("MozReftestInvalidate", doTest);
    107 </script>
    108 </body>
    109 </html>