tor-browser

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

pull-background-animated-position-2.html (2416B)

      1 <!DOCTYPE html>
      2 <html lang="en" class="reftest-wait">
      3 <meta charset="utf-8">
      4 <title>Scrollboxes with non-uniform backgrounds should prevent their contents from pulling background colors, even if those contents start out above uniform backgrounds and 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 .underlap {
     24  border: 1px solid #088;
     25  margin-left: 120px;
     26  width: 80px;
     27  margin-bottom: -30px;
     28 }
     29 
     30 .scrollable {
     31  height: auto;
     32  overflow: auto;
     33 }
     34 
     35 .scrollarea {
     36  width: 5000px;
     37  border: none;
     38  padding: 10px 0 20px;
     39  height: auto;
     40 }
     41 
     42 .scrolled {
     43  margin-left: 220px;
     44  width: 100px;
     45  height: 100px;
     46  border-color: red;
     47 }
     48 
     49 .animated-position {
     50  position: relative;
     51  left: 20px;
     52 }
     53 
     54 body {
     55  margin: 0;
     56  padding: 0 100px;
     57  height: 3000px;
     58 }
     59 
     60 </style>
     61 
     62 <div class="first" reftest-assigned-layer="page-background">
     63  <!--
     64    This is just a regular box, it should end up in the page background layer.
     65  -->
     66 </div>
     67 
     68 <div class="underlap">
     69  <!--
     70    This item intersects with the scrollable box and is positioned below
     71    .scrollable, in z-order.
     72  -->
     73 </div>
     74 
     75 <div class="scrollable border">
     76  <div class="scrollarea">
     77    <div class="scrolled border animated-position reftest-no-paint">
     78      <!--
     79        This box starts out above solid white background, but it will move so
     80        that it intersects .underlap, so it shouldn't pull up a background
     81        color to begin with so that it doesn't need to invalidate.
     82      -->
     83    </div>
     84  </div>
     85 </div>
     86 
     87 <div class="second" reftest-assigned-layer="page-background">
     88  <!--
     89    This should share a layer with .first and the page background.
     90  -->
     91 </div>
     92 
     93 <script>
     94 
     95 var scrollable = document.querySelector(".scrollable");
     96 
     97 // Make .scrollable start out with active scrolling.
     98 scrollable.scrollLeft = 0;
     99 scrollable.scrollLeft = 20;
    100 
    101 
    102 var animatedLeft = document.querySelector(".animated-position");
    103 
    104 function doTest() {
    105  animatedLeft.style.left = "-40px";
    106  document.documentElement.removeAttribute("class");
    107 }
    108 
    109 // Layerize #animatedLeft
    110 animatedLeft.offsetLeft;
    111 animatedLeft.style.left = "40px";
    112 animatedLeft.offsetLeft;
    113 animatedLeft.style.left = "60px";
    114 animatedLeft.offsetLeft;
    115 
    116 document.addEventListener("MozReftestInvalidate", doTest);
    117 setTimeout(doTest, 200);
    118 
    119 </script>