third_party/WebKit/LayoutTests/paint/invalidation/spv2/fixed-pos-inside-composited-intermediate-layer.html

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