add-remove-squashed-layers.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<style>
div {
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
}

.composited {
  will-change: transform;
  top: 60px;
  left: 60px;
  width: 400px;
  height: 400px;
  background-color: gray;
}

.overlap1 {
  top: 140px;
  left: 140px;
  background-color: blue;
}

.overlap2 {
  top: 160px;
  left: 160px;
  background-color: lime;
}

.overlap3 {
  top: 180px;
  left: 180px;
  background-color: magenta;
}

div:hover {
  background-color: green;
}

.green {
  background-color: green;
}

#C {
  display: none;
}

#testResults {
  display: none;
}

</style>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();

    var isInteractive = true;

    if (window.internals)
        isInteractive = false;

    function resetLayers()
    {
        document.getElementById("A").style.display = "block";
        document.getElementById("B").style.display = "block";
        document.getElementById("C").style.display = "none";
        if (isInteractive) {
            document.removeEventListener("click", resetLayers);
            document.addEventListener("click", addOverlap3);
        }
    }

    function addOverlap2()
    {
        document.getElementById("B").style.display = "block";
        if (isInteractive) {
            document.removeEventListener("click", addOverlap2);
            document.addEventListener("click", resetLayers);
        }
    }

    function removeOverlap1()
    {
        document.getElementById("A").style.display = "none";
        if (isInteractive) {
            document.removeEventListener("click", removeOverlap1);
            document.addEventListener("click", addOverlap2);
        }
    }


    function removeOverlap2()
    {
        document.getElementById("B").style.display = "none";
        if (isInteractive) {
            document.removeEventListener("click", removeOverlap2);
            document.addEventListener("click", removeOverlap1);
        }
    }

    function addOverlap3()
    {
        document.getElementById("C").style.display = "block";
        if (isInteractive) {
            document.removeEventListener("click", addOverlap3);
            document.addEventListener("click", removeOverlap2);
        }
    }

    document.addEventListener("click", addOverlap3);

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

        // Case 1
        document.getElementById('Case1').textContent = internals.layerTreeAsText(document);

        // Case 2
        internals.startTrackingRepaints(document);
        addOverlap3();
        document.getElementById('Case2').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
        internals.stopTrackingRepaints(document);

        // Case 3
        internals.startTrackingRepaints(document);
        removeOverlap2();
        document.getElementById('Case3').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
        internals.stopTrackingRepaints(document);

        // Case 4
        internals.startTrackingRepaints(document);
        removeOverlap1();
        document.getElementById('Case4').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
        internals.stopTrackingRepaints(document);

        // Case 5
        internals.startTrackingRepaints(document);
        addOverlap2();
        document.getElementById('Case5').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
        internals.stopTrackingRepaints(document);

        // Case 6
        internals.startTrackingRepaints(document);
        resetLayers();
        document.getElementById('Case6').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
        internals.stopTrackingRepaints(document);

        // Display the test results only after test is done so that it does not affect repaint rect results.
        document.getElementById('testResults').style.display = "block";
    }
</script>
</head>

<body onload="runTest()">

  <p>Test that layers can be nicely added or removed from a squashed layer, without unnecessary repaints on any layer.
     Click anywhere to test interactively; keep clicking to proceed through the test.</p>

  <div class="composited"></div>
  <div id="A" class="overlap1"></div>
  <div id="B" class="overlap2"></div>
  <div id="C" class="overlap3"></div>

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

    CASE 2, overlap3 gets added:
    <pre id="Case2"></pre>

    CASE 3, overlap2 gets removed.  Since this does not resize the layer, there should only be a repaint of overlap2:
    <pre id="Case3"></pre>

    CASE 4, overlap1 gets removed:
    <pre id="Case4"></pre>

    CASE 5, overlap2 gets added back:
    <pre id="Case5"></pre>

    CASE 6, overlap1 gets added back, and overlap3 gets removed:
    <pre id="Case6"></pre>
  </div>

</body>

</html>
chromium/third_party/blink/web_tests/compositing/squashing/add-remove-squashed-layers.html
