layout/reftests/invalidation/paintedlayer-recycling-1.html

   1 <!DOCTYPE html>
   2 <html lang="en" class="reftest-wait">
   3 <meta charset="utf-8">
   4 <title>Switching the transform to animate shouldn't invalidate the fixed layer</title>
   5
   6 <style>
   7
   8 .content {
   9   box-sizing: border-box;
  10   width: 200px;
  11   height: 200px;
  12   border: 1px solid black;
  13 }
  14
  15 .fixed {
  16   position: fixed;
  17   background-color: white;
  18   top: 20px;
  19   left: 240px;
  20 }
  21
  22 .reftest-no-paint {
  23   border-color: lime;
  24 }
  25
  26 .transform {
  27   transform: translateY(0.1px);
  28 }
  29
  30 .aboveTransform {
  31   margin-top: 20px;
  32   border-color: blue;
  33   position: relative;
  34 }
  35
  36 body {
  37   margin: 0;
  38   padding: 20px;
  39   height: 3000px;
  40 }
  41
  42 </style>
  43
  44 <div class="transform content" id="aboutToAnimate">
  45   <!--
  46     This transform starts out inactive and is going to turn active + prerendered.
  47   -->
  48 </div>
  49
  50 <div class="aboveTransform content">
  51   <!--
  52     This content is on top of .transform in z-order but starts out in the
  53     same layer as .transform (and the canvas background). Once the transform
  54     turns active, this needs its own PaintedLayer because the prerendered
  55     transform might asynchronously move underneath it.
  56   -->
  57 </div>
  58
  59 <div class="fixed reftest-no-paint content">
  60   <!--
  61     This fixed layer gets its own PaintedLayer above the rest.
  62     When .aboveTransform requires its own PaintedLayer, it should not cause
  63     .fixed to change layers.
  64   -->
  65 </div>
  66
  67 <script>
  68
  69 function doTest() {
  70   document.querySelector("#aboutToAnimate").style.willChange = "transform";
  71   document.documentElement.removeAttribute("class");
  72 }
  73 document.addEventListener("MozReftestInvalidate", doTest);
  74
  75 </script>