src/third_party/WebKit/LayoutTests/compositing/repaint/fixed-pos-with-composited-child.html

   1 <!DOCTYPE html>
   2 <html>
   3
   4 <head>
   5 <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
   6 <style>
   7
   8 .fixedContainer {
   9   position: fixed;
  10   overflow:hidden;
  11   background-color: #a0a0a0;
  12   bottom: 0px;
  13   left: 0px;
  14   width:400px;
  15   height: 100px;
  16 }
  17
  18 #foo {
  19   width:200px;
  20   height: 100px;
  21   background-color: #00a0a0;
  22   -webkit-transform:translateZ(0);
  23 }
  24 </style>
  25
  26 <script>
  27     if (window.internals) {
  28         /* Note carefully, compositing for fixed position is _disabled_ here */
  29         internals.settings.setPreferCompositingToLCDTextEnabled(false);
  30     }
  31
  32     function repaintTest()
  33     {
  34         window.scrollTo(0, 100);
  35     }
  36 </script>
  37 </head>
  38
  39 <body style="height:4000px;" onload="runRepaintTest()">
  40   <!--
  41        Among other duplicate bugs: https://code.google.com/p/chromium/issues/detail?id=151734
  42
  43        In the current code, a layer may actually be composited, but not have its own backing store.
  44        In these cases, the layer paints into its composited ancestor with a backing store.
  45        For fixed-position elements, however, this goes wrong because no other code
  46        realizes that there is a software-painted fixed-position element.  As a result,
  47        the composited parent does not receive repaint invalidations, and the fixed-position
  48        element incorrectly appears to be fixed to the composited element rather than the viewport.
  49
  50        The scenario that reproduces this:  A fixed position element that has an overflow-clip with
  51        a composited child.  In this case, the fixed-position element needs to be composited.
  52        However, this is one of the few reasons that does not require that the composited layer needs
  53        its own backing store.
  54     -->
  55
  56   <!-- Scrolling should not cause either div to move around on the viewport. -->
  57   <div class="fixedContainer">
  58     <div id="foo"></div>
  59   </div>
  60 </body>
  61
  62 </html>