tor-browser

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

layer-splitting-5.html (2321B)

      1 <!DOCTYPE html>
      2 <html lang="en" class="reftest-wait"
      3      reftest-displayport-x="0"
      4      reftest-displayport-y="0"
      5      reftest-displayport-w="800"
      6      reftest-displayport-h="1000">
      7 <meta charset="utf-8">
      8 <title>Things overlapping active scrollboxes should be in a layer on top of the scrolled contents.</title>
      9 
     10 <style>
     11 
     12 div {
     13  height: 50px;
     14  border: 1px solid;
     15  box-model: border-box;
     16 }
     17 
     18 .first, .second {
     19  border-color: blue;
     20  margin: 50px 0;
     21 }
     22 
     23 .overlap {
     24  border-color: #088;
     25  margin-left: 100px;
     26  width: 80px;
     27  margin-bottom: -30px;
     28  position: relative;
     29 }
     30 
     31 .scrollable {
     32  height: auto;
     33  overflow: auto;
     34 }
     35 
     36 .scrollarea {
     37  width: 5000px;
     38  border: none;
     39  padding: 10px 0 20px;
     40  height: auto;
     41 }
     42 
     43 .scrolled {
     44  margin-left: 220px;
     45  width: 100px;
     46  height: 100px;
     47  border-color: red;
     48 }
     49 
     50 body {
     51  margin: 0;
     52  padding: 0 100px;
     53  height: 3000px;
     54 }
     55 
     56 </style>
     57 
     58 <div class="first" reftest-assigned-layer="page-background">
     59  <!--
     60    This is just a regular box, it should end up in the page background layer.
     61  -->
     62 </div>
     63 
     64 <div class="overlap reftest-no-paint">
     65  <!--
     66    This item intersects with the scrollable box and is positioned above
     67    .scrolled, in z-order, so it should be split into its own layer as soon
     68    as the scrollbox gets active scrolling. The splitting should not wait for
     69    .scrolled to move under .overlap.
     70  -->
     71 </div>
     72 
     73 <div class="scrollable">
     74  <div class="scrollarea">
     75    <div class="scrolled reftest-opaque-layer">
     76      <!--
     77        This will move under .overlap by .scrollable being scrolled. This
     78        action should not invalidate .overlap.
     79 
     80        Furthermore, since the background of .scrollable is uniform and opaque,
     81        .scrolled should be able to pull up that background color and become
     82        opaque itself.
     83      -->
     84    </div>
     85  </div>
     86 </div>
     87 
     88 <div class="second" reftest-assigned-layer="page-background">
     89  <!--
     90    This should share a layer with .first and the page background.
     91  -->
     92 </div>
     93 
     94 <script>
     95 
     96 var scrollable = document.querySelector(".scrollable");
     97 
     98 function doTest() {
     99  scrollable.scrollLeft = 100;
    100  document.documentElement.removeAttribute("class");
    101 }
    102 
    103 // Make .scrollable start out with active scrolling.
    104 scrollable.scrollLeft = 0;
    105 scrollable.scrollLeft = 20;
    106 document.addEventListener("MozReftestInvalidate", doTest);
    107 
    108 </script>