tor-browser

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

pull-background-animated-position-4.html (2074B)

      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 .clip {
     24  height: auto;
     25  overflow: hidden;
     26  padding: 10px 0 20px;
     27 }
     28 
     29 .animated-position {
     30  position: relative;
     31  left: 20px;
     32  margin-left: 220px;
     33  width: 100px;
     34  height: 100px;
     35  border-color: red;
     36 }
     37 
     38 body {
     39  margin: 0;
     40  padding: 0 100px;
     41  height: 3000px;
     42 }
     43 
     44 </style>
     45 
     46 <div class="first" reftest-assigned-layer="page-background">
     47  <!--
     48    This is just a regular box, it should end up in the page background layer.
     49  -->
     50 </div>
     51 
     52 <div class="clip border">
     53  <div class="border animated-position reftest-no-paint reftest-opaque-layer">
     54    <!--
     55      The background of .clip is uniform and opaque,
     56      .animated-position should be able to pull up that background color and
     57      become opaque itself.
     58      However, since this clip is not created by an animated geometry root that
     59      is a scrollable frame, we currently fail to recognize it, so this test
     60      will fail.
     61    -->
     62  </div>
     63 </div>
     64 
     65 <div class="second" reftest-assigned-layer="page-background">
     66  <!--
     67    This should share a layer with .first and the page background.
     68    However, since we don't recognize that .animated-position is contained in
     69    a clip, .second gets its own layer above .animated-position, so this test
     70    will fail.
     71  -->
     72 </div>
     73 
     74 <script>
     75 
     76 var animatedLeft = document.querySelector(".animated-position");
     77 
     78 function doTest() {
     79  animatedLeft.style.left = "-40px";
     80  document.documentElement.removeAttribute("class");
     81 }
     82 
     83 // Layerize #animatedLeft
     84 animatedLeft.offsetLeft;
     85 animatedLeft.style.left = "40px";
     86 animatedLeft.offsetLeft;
     87 animatedLeft.style.left = "60px";
     88 animatedLeft.offsetLeft;
     89 
     90 document.addEventListener("MozReftestInvalidate", doTest);
     91 setTimeout(doTest, 200);
     92 
     93 </script>