third_party/WebKit/LayoutTests/compositing/repaint/fixed-pos-inside-composited-intermediate-layer.html

   1 <!DOCTYPE html>
   2 <html>
   3
   4 <head>
   5 <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
   6 <style>
   7
   8 .compositedBehind {
   9   width: 500px;
  10   height: 500px;
  11   transform: translatez(0);
  12   background-color: cyan;
  13 }
  14
  15 .containerOverlapsComposited {
  16   position: absolute;
  17   z-index: 2; /* Creates a stacking context so that the fixed-pos layer is contained instead of a sibling */
  18   top: 20px;
  19   left: 20px;
  20   width: 100px;
  21   height: 30000px;
  22   background-color: green;
  23 }
  24
  25 .fixed {
  26   position: fixed;
  27   top: 45px;
  28   left: 45px;
  29   background-color: lime;
  30   width: 50px;
  31   height: 50px;
  32 }
  33
  34 </style>
  35
  36 <script>
  37         if (window.internals) {
  38             /* Note carefully, compositing for fixed position is _disabled_ here */
  39             internals.settings.setPreferCompositingToLCDTextEnabled(false);
  40         }
  41
  42         function repaintTest() {
  43              window.scrollTo(0, 100);
  44         }
  45 </script>
  46
  47 </head>
  48
  49
  50
  51 <body onload="runRepaintTest()">
  52   <!--
  53        Among other duplicate bugs: https://code.google.com/p/chromium/issues/detail?id=128375
  54        A non-composited fixed-position element can get grouped into a composited container.
  55        In this case, repaint invalidations were incorrectly going to the LayoutView instead
  56        of the composited container.  The incorrect result was that the fixed-position element
  57        never repainted, and it appeared to scroll along with the composited container.
  58     -->
  59   <div class="compositedBehind"> </div>
  60
  61   <div class="containerOverlapsComposited">
  62     <div class="fixed"></div>
  63   </div>
  64 </body>
  65
  66 </html>