layout/reftests/invalidation/layer-splitting-3.html

   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>Scrolling shouldn't invalidate the fixed items</title>
   9
  10 <style>
  11
  12 .content {
  13   box-sizing: border-box;
  14   width: 200px;
  15   height: 200px;
  16   border: 1px solid black;
  17 }
  18
  19 .fixed {
  20   position: fixed;
  21   top: 20px;
  22   left: 20px;
  23 }
  24
  25 .reftest-no-paint {
  26   border-color: lime;
  27 }
  28
  29 .distanceFromTop {
  30   margin-top: 240px;
  31 }
  32
  33 .clip {
  34   width: 200px;
  35   height: 200px;
  36   overflow: hidden;
  37 }
  38
  39 .transform {
  40   position: relative;
  41   will-change: transform;
  42 }
  43
  44 body {
  45   margin: 0;
  46   padding: 20px;
  47   height: 3000px;
  48 }
  49
  50
  51 </style>
  52
  53 <div class="fixed reftest-no-paint content">
  54   <!--
  55     This fixed layer gets its own PaintedLayer above the page.
  56   -->
  57 </div>
  58
  59 <div class="distanceFromTop clip">
  60   <!--
  61     This clip determines the potential pixels that can be affected by the
  62     animated transform, *in relation to the scrolled page*. If the page
  63     is scrolled, the clip moves relative to the fixed items, so the fixed
  64     items need to anticipate the transform getting between them.
  65   -->
  66
  67   <div class="transform content">
  68     <!--
  69       This is an animated transform item. It can move freely but will be
  70       clipped by the .clip element.
  71     -->
  72   </div>
  73
  74 </div>
  75
  76 <div class="fixed reftest-no-paint content">
  77   <!--
  78     This fixed layer is above the animated transform, in z-order. The
  79     transform is clipped in such a way that initially, the clip doesn't
  80     intersect the fixed items, but once the page is scrolled, it does.
  81     So this fixed item must not share a layer with the lower fixed item.
  82   -->
  83 </div>
  84
  85 <script>
  86
  87 function doTest() {
  88   document.documentElement.scrollTop = 100;
  89   document.documentElement.removeAttribute("class");
  90 }
  91 document.documentElement.scrollTop = 0;
  92 document.addEventListener("MozReftestInvalidate", doTest);
  93 // setTimeout(doTest, 500);
  94
  95 </script>