tor-browser

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

pull-background-animated-position-1.html (2043B)

      1 <!DOCTYPE html>
      2 <html lang="en" class="reftest-wait">
      3 <meta charset="utf-8">
      4 <title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if those contents have an animated position</title>
      5 
      6 <style>
      7 
      8 div {
      9  min-height: 50px;
     10  box-model: border-box;
     11 }
     12 
     13 .first, .second {
     14  border: 1px solid blue;
     15  margin: 50px 0;
     16  position: relative;
     17 }
     18 
     19 .border {
     20  border: 1px solid black;
     21 }
     22 
     23 .scrollable {
     24  height: auto;
     25  overflow: auto;
     26 }
     27 
     28 .scrollarea {
     29  width: 5000px;
     30  border: none;
     31  padding: 10px 0 20px;
     32  height: auto;
     33 }
     34 
     35 .scrolled {
     36  margin-left: 220px;
     37  width: 100px;
     38  height: 100px;
     39  border-color: red;
     40 }
     41 
     42 .animated-position {
     43  position: relative;
     44  left: 20px;
     45 }
     46 
     47 body {
     48  margin: 0;
     49  padding: 0 100px;
     50  height: 3000px;
     51 }
     52 
     53 </style>
     54 
     55 <div class="first" reftest-assigned-layer="page-background">
     56  <!--
     57    This is just a regular box, it should end up in the page background layer.
     58  -->
     59 </div>
     60 
     61 <div class="scrollable border">
     62  <div class="scrollarea">
     63    <div class="scrolled border animated-position reftest-no-paint reftest-opaque-layer">
     64      <!--
     65        The background of .scrollable is uniform and opaque,
     66        .scrolled should be able to pull up that background color and become
     67        opaque itself.
     68      -->
     69    </div>
     70  </div>
     71 </div>
     72 
     73 <div class="second" reftest-assigned-layer="page-background">
     74  <!--
     75    This should share a layer with .first and the page background.
     76  -->
     77 </div>
     78 
     79 <script>
     80 
     81 var scrollable = document.querySelector(".scrollable");
     82 
     83 // Make .scrollable start out with active scrolling.
     84 scrollable.scrollLeft = 0;
     85 scrollable.scrollLeft = 20;
     86 
     87 
     88 var animatedLeft = document.querySelector(".animated-position");
     89 
     90 function doTest() {
     91  animatedLeft.style.left = "100px";
     92  document.documentElement.removeAttribute("class");
     93 }
     94 
     95 // Layerize #animatedLeft
     96 animatedLeft.offsetLeft;
     97 animatedLeft.style.left = "40px";
     98 animatedLeft.offsetLeft;
     99 animatedLeft.style.left = "60px";
    100 animatedLeft.offsetLeft;
    101 
    102 document.addEventListener("MozReftestInvalidate", doTest);
    103 
    104 </script>