fixed-position-out-of-view-positioning.html

<!DOCTYPE html>

<html>
<head>
  <script src="../../resources/js-test.js"></script>
  <script src="../../resources/run-after-layout-and-paint.js"></script>
  <style>
    .fixed {
      position: fixed;
      width: 50px;
      height: 50px;
      background-color: silver;
    }

    .positionedAndTransformed {
      left: 20px;
      top: -80px;
      transform: translateY(100px);
    }
  </style>

  <script type="text/javascript">
    window.jsTestIsAsync = true;

    function doTest() {
      if (!window.internals)
        return;

      document.getElementById("layertree1").innerText = internals.layerTreeAsText(document);
      window.scrollTo(0, 10);

      runAfterLayoutAndPaint(function() {
        layerTree = internals.layerTreeAsText(document);
        // Make sure the layer tree dump is stable.
        shouldBe('layerTree', 'internals.layerTreeAsText(document)');
        document.getElementById("layertree2").innerText = layerTree;
        finishJSTest();
      });
    }

    if (window.internals)
      internals.settings.setPreferCompositingToLCDTextEnabled(true);

    window.onload = doTest;
  </script>
</head>

<body>
  <!--
       https://code.google.com/p/chromium/issues/detail?id=293926

       This test reproduces a bug where fixed-position layers flickered.  Fixed
       position elements opt-out of compositing when they are out of view.
       However, the position of the layer was being computed differently when
       the layer was composited versus not composited.  In this scenario, the
       difference in positioning made the layer seem out-of-view when
       composited, and in-view when not composited.  Thus, every compositing
       update, the layer would flip its compositing state.  The flickering
       occurred because of a shortcut that avoids painting because it thought
       the layer is offscreen.
    -->

  <div style="width: 2000px; height: 2000px">
    The layer trees before and after should be the same, except for the position of the 50x50 sized composited fixed position layer.<br>
    BEFORE:
    <pre id="layertree1"></pre>
    AFTER:
    <pre id="layertree2"></pre>
  </div>

  <div class="positionedAndTransformed fixed"></div>
</body>
</html>
chromium/third_party/blink/web_tests/compositing/layer-creation/fixed-position-out-of-view-positioning.html
