blob: f45bdb125c1a2b78fc598eda025f505eca32723b [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
<html>
<style>
.testdiv {
display: inline-block;
box-sizing: border-box;
border: 2px solid blue;
position: relative;
height: 200px;
width: 200px;
will-change: transform;
}
.inner {
height: 200px;
width: 200px;
background-color: green;
}
.scroller {
overflow: scroll;
height: 50px;
width: 50px;
}
.scrollcontent {
height: 100px;
}
</style>
<script>
window.onload = function () {
if (!window.internals)
return;
if (window.testRunner)
testRunner.dumpAsText();
results.innerText = "Before:\n\n"
results.innerText += internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_EVENT_REGION);
test1.style.pointerEvents = "auto";
test2.style.pointerEvents = "auto";
test3.style.pointerEvents = "auto";
results.innerText += "After setting 'pointer-events:auto':\n\n"
results.innerText += internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_EVENT_REGION);
test1.style.pointerEvents = "none";
test2.style.pointerEvents = "none";
test3.style.pointerEvents = "none";
results.innerText += "After setting 'pointer-events:none':\n\n"
results.innerText += internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_EVENT_REGION);
}
</script>
<body>
<div class="testdiv" id="test1" style="pointer-events:none">
</div>
<div class="testdiv" style="pointer-events:none">
<div id="test2" class="inner"></div>
</div>
<div class="testdiv" style="pointer-events:none">
<div class="inner" style="position:relative">
<div id="test3" class="inner"></div>
</div>
</div>
<div class="scroller"><div class="scrollcontent"></div></div>
<pre id="results"></pre>
</body>
</html>