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