<!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: 200px;
left: 200px;
background-color: magenta;
}
.top {
position: absolute;
z-index: 1;
top: 220px;
left: 220px;
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(210, 210);
}
function hoverOverTopDiv()
{
internals.setIsCursorVisible(document, true);
eventSender.mouseMoveTo(230, 230);
}
</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>