tor-browser

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

pull-background-animated-position-3.html (2201B)

      1 <!DOCTYPE html>
      2 <html lang="en" class="reftest-wait">
      3 <meta charset="utf-8">
      4 <title>This test fails - Layerization should respect overflow:hidden clips around things with animated position</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  position: relative;
     17 }
     18 
     19 .border {
     20  border: 1px solid black;
     21 }
     22 
     23 .underlap {
     24  border: 1px solid #088;
     25  margin-left: 120px;
     26  width: 80px;
     27  margin-bottom: -30px;
     28 }
     29 
     30 .clip {
     31  height: auto;
     32  overflow: hidden;
     33  padding: 10px 0 20px;
     34 }
     35 
     36 .animated-position {
     37  position: relative;
     38  left: 20px;
     39  margin-left: 220px;
     40  width: 100px;
     41  height: 100px;
     42  border-color: red;
     43 }
     44 
     45 body {
     46  margin: 0;
     47  padding: 0 100px;
     48  height: 3000px;
     49 }
     50 
     51 </style>
     52 
     53 <div class="first" reftest-assigned-layer="page-background">
     54  <!--
     55    This is just a regular box, it should end up in the page background layer.
     56  -->
     57 </div>
     58 
     59 <div class="underlap">
     60  <!--
     61    This item intersects with the scrollable box and is positioned below
     62    .scrollable, in z-order.
     63  -->
     64 </div>
     65 
     66 <div class="clip border">
     67  <div class="border animated-position reftest-no-paint">
     68    <!--
     69      This box starts out above solid white background, but it will move so
     70      that it intersects .underlap, so it shouldn't pull up a background
     71      color to begin with so that it doesn't need to invalidate.
     72    -->
     73  </div>
     74 </div>
     75 
     76 <div class="second" reftest-assigned-layer="page-background">
     77  <!--
     78    This should share a layer with .first and the page background.
     79    However, we don't take .animated-position's clip into account when
     80    layerizing, so .second will be pulled up into its own layer above
     81    .animated-position. So this test will fail.
     82  -->
     83 </div>
     84 
     85 <script>
     86 
     87 var animatedLeft = document.querySelector(".animated-position");
     88 
     89 function doTest() {
     90  animatedLeft.style.left = "-40px";
     91  document.documentElement.removeAttribute("class");
     92 }
     93 
     94 // Layerize #animatedLeft
     95 animatedLeft.offsetLeft;
     96 animatedLeft.style.left = "40px";
     97 animatedLeft.offsetLeft;
     98 animatedLeft.style.left = "60px";
     99 animatedLeft.offsetLeft;
    100 
    101 document.addEventListener("MozReftestInvalidate", doTest);
    102 setTimeout(doTest, 200);
    103 
    104 </script>