tor-browser

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

pull-background-3.html (2016B)

      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</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 }
     17 
     18 .border {
     19  border: 1px solid black;
     20 }
     21 
     22 .underlap {
     23  border: 1px solid #088;
     24  margin-left: 120px;
     25  width: 80px;
     26  margin-bottom: -30px;
     27 }
     28 
     29 .scrollable {
     30  height: auto;
     31  overflow: auto;
     32 }
     33 
     34 .scrollarea {
     35  width: 5000px;
     36  border: none;
     37  padding: 10px 0 20px;
     38  height: auto;
     39 }
     40 
     41 .scrolled {
     42  margin-left: 220px;
     43  width: 100px;
     44  height: 100px;
     45  border-color: red;
     46 }
     47 
     48 body {
     49  margin: 0;
     50  padding: 0 100px;
     51  height: 3000px;
     52 }
     53 
     54 </style>
     55 
     56 <div class="first" reftest-assigned-layer="page-background">
     57  <!--
     58    This is just a regular box, it should end up in the page background layer.
     59  -->
     60 </div>
     61 
     62 <div class="underlap">
     63  <!--
     64    This item intersects with the scrollable box and is positioned below
     65    .scrollable, in z-order.
     66  -->
     67 </div>
     68 
     69 <div class="scrollable border">
     70  <div class="scrollarea">
     71    <div class="scrolled border reftest-no-paint">
     72      <!--
     73        This box starts out above solid white background, but it will move so
     74        that it intersects .underlap, so it shouldn't pull up a background
     75        color to begin with so that it doesn't need to invalidate.
     76      -->
     77    </div>
     78  </div>
     79 </div>
     80 
     81 <div class="second" reftest-assigned-layer="page-background">
     82  <!--
     83    This should share a layer with .first and the page background.
     84  -->
     85 </div>
     86 
     87 <script>
     88 
     89 var scrollable = document.querySelector(".scrollable");
     90 
     91 function doTest() {
     92  scrollable.scrollLeft = 100;
     93  document.documentElement.removeAttribute("class");
     94 }
     95 
     96 // Make .scrollable start out with active scrolling.
     97 scrollable.scrollLeft = 0;
     98 scrollable.scrollLeft = 10;
     99 document.addEventListener("MozReftestInvalidate", doTest);
    100 
    101 </script>