<!DOCTYPE html>
<style>
html, body { margin: 0; }
#tests {
font-size: 10px;
width: 400px;
background: lightgreen;
}
.scroll {
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid lightgrey;
height: 100px;
width: 300px;
/* translucent to prevent compositing. */
background: rgba(0, 0, 255, 0.5);
}
.overflowwithhandler {
height: 25px;
width: 200px;
}
</style>
<div id="tests">
<div class="scroll">
<div style='height: 50px;'></div>
<div id="notclipped" class="testcase overflowwithhandler"></div>
<div style='height: 100px;'></div>
<div id="clipped" class="testcase overflowwithhandler"></div>
</div>
</div>
<div id="console"></div>
<script src="resources/compositor-touch-hit-rects.js"></script>