<!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>