tor-browser

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

pull-background-displayport-3.html (2182B)

      1 <!DOCTYPE html>
      2 <html lang="en" class="reftest-wait" reftest-async-scroll>
      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    .scrolled, in z-order.
     66  -->
     67 </div>
     68 
     69 <div class="scrollable border"
     70     reftest-displayport-x="0" reftest-displayport-y="0"
     71     reftest-displayport-w="2000" reftest-displayport-h="200">
     72  <div class="scrollarea">
     73    <div class="scrolled border reftest-no-paint">
     74      <!--
     75        This box starts out above solid white background, but it will move so
     76        that it intersects .underlap, so it shouldn't pull up a background
     77        color to begin with so that it doesn't need to invalidate.
     78      -->
     79    </div>
     80  </div>
     81 </div>
     82 
     83 <div class="second" reftest-assigned-layer="page-background">
     84  <!--
     85    This should share a layer with .first and the page background.
     86  -->
     87 </div>
     88 
     89 <script>
     90 
     91 var scrollable = document.querySelector(".scrollable");
     92 
     93 function doTest() {
     94  scrollable.scrollLeft = 100;
     95  document.documentElement.removeAttribute("class");
     96 }
     97 
     98 // Make .scrollable start out with active scrolling.
     99 scrollable.scrollLeft = 0;
    100 scrollable.scrollLeft = 10;
    101 document.addEventListener("MozReftestInvalidate", doTest);
    102 // setTimeout(doTest, 500);
    103 
    104 </script>