tor-browser

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

pull-background-displayport-4.html (2376B)

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