src/third_party/WebKit/LayoutTests/compositing/layer-creation/fixed-position-out-of-view-positioning.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <script src="../../resources/run-after-display.js"></script>
   6   <style>
   7     .fixed {
   8       position: fixed;
   9       width: 50px;
  10       height: 50px;
  11       background-color: silver;
  12     }
  13
  14     .positionedAndTransformed {
  15       left: 20px;
  16       top: -80px;
  17       -webkit-transform: translateY(100px);
  18     }
  19   </style>
  20
  21   <script type="text/javascript">
  22     function doTest() {
  23       if (!window.testRunner)
  24         return;
  25
  26       testRunner.dumpAsText();
  27       testRunner.waitUntilDone();
  28
  29       document.getElementById("layertree1").innerText = window.internals.layerTreeAsText(document);
  30       window.scrollTo(0, 10);
  31
  32       runAfterDisplay(function() {
  33         document.getElementById("layertree2").innerText = window.internals.layerTreeAsText(document);
  34         testRunner.notifyDone();
  35       });
  36     }
  37
  38     if (window.internals)
  39       window.internals.settings.setAcceleratedCompositingForFixedPositionEnabled(true);
  40
  41     window.onload = doTest;
  42   </script>
  43 </head>
  44
  45 <body>
  46   <!--
  47        https://code.google.com/p/chromium/issues/detail?id=293926
  48
  49        This test reproduces a bug where fixed-position layers flickered.  Fixed
  50        position elements opt-out of compositing when they are out of view.
  51        However, the position of the layer was being computed differently when
  52        the layer was composited versus not composited.  In this scenario, the
  53        difference in positioning made the layer seem out-of-view when
  54        composited, and in-view when not composited.  Thus, every compositing
  55        update, the layer would flip its compositing state.  The flickering
  56        occurred because of a shortcut that avoids painting because it thought
  57        the layer is offscreen.
  58     -->
  59
  60   <div style="width: 2000px; height: 2000px">
  61     The layer trees before and after should be the same, except for the position of the 50x50 sized composited fixed position layer.<br>
  62     BEFORE:
  63     <pre id="layertree1"></pre>
  64     AFTER:
  65     <pre id="layertree2"></pre>
  66   </div>
  67
  68   <div class="positionedAndTransformed fixed"></div>
  69 </body>
  70 </html>
  71