tor-browser

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

pull-background-animated-position-5.html (2145B)

      1 <!DOCTYPE html>
      2 <html lang="en" class="reftest-wait">
      3 <meta charset="utf-8">
      4 <title>This test fails - Opacity containers should anticipate animations of the contents when deciding whether to pull a background color</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 .opacity {
     31  opacity: 0.9;
     32  height: auto;
     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="border">
     67  <div class="opacity">
     68    <div class="border animated-position reftest-no-paint">
     69      <!--
     70        This item start out above solid white background but will move to
     71        intersect .underlap, so it shouldn't pull up the background color.
     72        However, the opacity item that wraps this item only looks at the
     73        current bounds of its contents, so this test will fail.
     74      -->
     75    </div>
     76  </div>
     77 </div>
     78 
     79 <div class="second" reftest-assigned-layer="page-background">
     80  <!--
     81    This should share a layer with .first and the page background.
     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>