<!DOCTYPE html>
<head>
<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: 180px;
  left: 180px;
  background-color: lime;
}

.middle2 {
  position: absolute;
  z-index: 1;
  top: 260px;
  left: 260px;
  background-color: magenta;
}

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

div:hover {
  background-color: green;
  will-change: transform;
}

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

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

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

        hoverOverMiddleDiv();
        document.getElementById('Case2').textContent = internals.layerTreeAsText(document);

        hoverOverMiddle2Div();
        document.getElementById('Case3').textContent = internals.layerTreeAsText(document);

        hoverOverTopDiv();
        document.getElementById('Case4').textContent = internals.layerTreeAsText(document);

        hoverAtZero();
        document.getElementById('Case5').textContent = internals.layerTreeAsText(document);

        document.getElementById('testTitle').style.display = '';
        document.getElementById('testResults').style.display = '';
    }

    function hoverAtZero()
    {
        internals.setIsCursorVisible(document, true);
        eventSender.mouseMoveTo(0, 0);
    }

    function hoverOverMiddleDiv()
    {
        internals.setIsCursorVisible(document, true);
        eventSender.mouseMoveTo(190, 190);
    }

    function hoverOverMiddle2Div()
    {
        internals.setIsCursorVisible(document, true);
        eventSender.mouseMoveTo(270, 270);
    }

    function hoverOverTopDiv()
    {
        internals.setIsCursorVisible(document, true);
        eventSender.mouseMoveTo(350, 350);
    }
</script>
</head>
<body onload="runTest()">
  <div class="composited box behind"></div>
  <div class="box middle"></div>
  <div class="box middle2"></div>
  <div class="box top"></div>

  <p id="testTitle" style="display:none">Test overlap is rendered correctly when hovering over elements</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" style="display:none">
    Case 1, original layer tree:
    <pre id="Case1"></pre>
    Case 2: hovering over the "middle" element (causes that div to become its own composited layer)
    <pre id="Case2"></pre>
    Case 3: hovering over the "middle2" element (causes that div to become its own composited layer)
    <pre id="Case3"></pre>
    Case 4: hovering over the "top" element (causes that div to become its own composited layer)
    <pre id="Case4"></pre>
    Case 5: back to situation in case 1
    <pre id="Case5"></pre>
  </div>

</body>
</body>