squash-above-fixed-2.html | Explore in Territory

<!DOCTYPE html>
<html id="htmlTag">

<head>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<style>
#fixed {
  backface-visibility: hidden;
  position: fixed;
  z-index: 1;
  width: 400px;
  height: 200px;
  background-color: blue;
}

#compositedInsideFixed {
  backface-visibility: hidden;
  width: 50px;
  height: 50px;
  background-color: red;
}

#container {
  position: absolute;
  z-index: 2;
  top: 50px;
  left: 100px;
  width: 200px;
  height: 4000px;
  background-color: cyan;
}

#description {
  position: absolute;
  top: 100px;
  left: 450px;
  width: 300px;
}

#testResults {
  display: none;
}

body {
  margin: 0;
}

</style>

<script>
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

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

        // Display the test results only after test is done so that it does not affect repaint rect results.
        document.getElementById('testResults').style.display = "block";
        // Case 1
        document.getElementById('Case1').textContent = internals.layerTreeAsText(document);

        // Case 2
        window.scrollTo(0, 80);
        runAfterLayoutAndPaint(function() {
          document.getElementById('Case2').textContent = internals.layerTreeAsText(document);
          if (window.testRunner) {
            testRunner.notifyDone();
          }
        });
    }
</script>
</head>

<body onload="runTest()">
  <div id="description">
    <p>
      This scenario verifies that the cyan "container" element scrolls properly with squashing enabled.
      The "container" element should not squash into a composited layer mapping owned by the fixed
      position layer or its descendant, since this would make it behave like a fixed position
      element during composited scrolling.
    </p>
  </div>

  <div id="fixed">
    <div id="compositedInsideFixed"></div>
  </div>

  <div id="container"></div>

  <div id="testResults">
    CASE 1, original layer tree:
    <pre id="Case1"></pre>

    CASE 2, scrolling y to 80, the "container" element should remain positioned with respect to the scrolled document, the fixed-pos layer compensates for the new scroll position:
    <pre id="Case2"></pre>
  </div>

</body>
</html>
chromium/third_party/blink/web_tests/compositing/squashing/squash-above-fixed-2.html
