squash-transform-repainting-child.html

<!DOCTYPE html>
<head>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<style>
.composited {
will-change: transform;
}

.box {
  width: 100px;
  height: 100px;
}

.behind {
  position: absolute;
  z-index: 1;
  top: 100px;
  left: 100px;
  background-color: blue;
}

.middle {
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 20px;
  background-color: lime;
  transform: rotate(45deg);
}

.top {
  position: absolute;
  z-index: 1;
  top: 50px;
  left: 50px;
  background-color: cyan;
}

.smallbox {
  position: absolute;
  top: 25px;
  left: 20px;
  width: 50px;
  height: 50px;
  background-color: magenta;
}

div:hover {
  background-color: green;
}

.smallbox:hover {
  background-color: lime;
}

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

    function runTest()
    {
        runAfterLayoutAndPaint(executeTestCases);
    }

    function executeTestCases()
    {
        internals.startTrackingRepaints(document);
        document.getElementById('Case1').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
        internals.stopTrackingRepaints(document);

        eventSender.mouseMoveTo(0, 0);
        internals.startTrackingRepaints(document);
        hoverOverOuterDiv();
        document.getElementById('Case2').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
        internals.stopTrackingRepaints(document);

        eventSender.mouseMoveTo(0, 0);
        internals.startTrackingRepaints(document);
        hoverOverInnerDiv();
        document.getElementById('Case3').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";

        if (window.testRunner)
            testRunner.notifyDone();
    }

    function hoverOverOuterDiv()
    {
        internals.setIsCursorVisible(document, true);
        eventSender.mouseMoveTo(10, 65);

    }

    function hoverOverInnerDiv()
    {
        internals.setIsCursorVisible(document, true);
        eventSender.mouseMoveTo(40, 65);

    }
</script>
</head>
<body onload="runTest()">
  <div class="composited box behind"></div>

  <div class="box middle">
    <div class="smallbox"></div>
  </div>

  <div class="box top"></div>

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

    CASE 2, hovering over the outer div
    <pre id="Case2"></pre>

    CASE 3, hovering over the inner div
    <pre id="Case3"></pre>
  </div>
</body>
chromium/third_party/blink/web_tests/compositing/squashing/squash-transform-repainting-child.html
