tor-browser

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

pull-background-4.html (2194B)

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