<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="resources/compositor-touch-hit-rects.css">
<style>
.scroll {
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid lightgrey;
height: 50px;
}
#overflowwithborder {
border: 6px solid lightblue;
padding: 4px;
}
#transformed {
transform: translate3d(10px, 10px, 0);
will-change: transform;
}
.relative {
position: relative;
/* ensure it doesn't interfere with subsequent layer promotions */
z-index: -1;
}
</style>
</head>
<body>
<p id="description">
This test verifies the hit test regions given to the compositor specifically around composited
overflow scroll elements.
</p>
<div id="tests">
<div id="scroll1" class="scroll">
<div style='height: 13px;'></div>
<div class="testcase" id="scrollContent">Scroll content</div>
<div style='height: 50px;'></div>
</div>
<div id="scroll5" class="scroll">
<div>
<div style='height: 13px;'></div>
<div class="testcase" id="scrollContent5">Scroll content 5</div>
<div id="scroll5spacer" style='height: 50px;'></div>
</div>
</div>
<div id="scroll6" class="scroll">
<div>
<div style='height: 13px;'></div>
<div class="testcase relative" id="scrollContent6">Scroll content 6</div>
<div id="scroll6spacer" style='height: 50px;'></div>
</div>
</div>
<div id="scroll2" class="scroll">
<div style='height: 10px;'></div>
<div id="scroll2b" class="scroll">
<div style='height: 30px;'></div>
<div class="testcase" id="nestedContent">Nested content</div>
<div style='height: 30px;'></div>
</div>
<div style='height: 50px;'></div>
</div>
<div id="scroll4" class="scroll">
<div style='height: 10px;'></div>
<div id="overflowwithhandler" class="scroll testcase">
<div style='height: 30px;'></div>
<div>overflow div with a touch handler</div>
<div style='height: 60px;'></div>
</div>
<div style='height: 50px;'></div>
</div>
<div id="overflowwithborder" class="scroll testcase">
<div style='height: 30px;'></div>
<div>overflow div with a touch handler and large border</div>
<div style='height: 60px;'></div>
</div>
<!-- Note this case needs to be last because the transform can disable
accelerated overflow scrolling of any following elements -->
<div id="scroll3" class="scroll">
<div style='height: 13px;'></div>
<div class="testcase" id="withTransform">
<div id="transformed">Transformed</div>
</div>
<div style='height: 50px;'></div>
</div>
</div>
<div id="console"></div>
<script src="resources/compositor-touch-hit-rects.js"></script>
<script>
// Scroll after layout has finished.
preRunHandlerForTest['scrollContent'] = function(e) {
// Scroll so the rect is visible but slightly clipped.
document.getElementById('scroll1').scrollTop = 15;
};
preRunHandlerForTest['scrollContent5'] = function(e) {
document.getElementById('scroll5').scrollTop = 5;
// force layout after scroll position changed
document.getElementById('scroll5spacer').style.height="60px";
};
preRunHandlerForTest['scrollContent6'] = function(e) {
document.getElementById('scroll6').scrollTop = 5;
// force layout after scroll position changed
document.getElementById('scroll6spacer').style.height="60px";
};
preRunHandlerForTest['nestedContent'] = function(e) {
document.getElementById('scroll2').scrollTop = 20;
document.getElementById('scroll2b').scrollTop = 18;
};
preRunHandlerForTest['withTransform'] = function(e) {
document.getElementById('scroll3').scrollTop = 20;
};
preRunHandlerForTest['overflowWithHandler'] = function(e) {
document.getElementById('scroll4').scrollTop = 20;
document.getElementById('overflowWithHandler').scrollTop = 18;
};
preRunHandlerForTest['overflowwithborder'] = function(e) {
document.getElementById('overflowwithborder').scrollTop = 18;
};
if (window.internals) {
internals.settings.setPreferCompositingToLCDTextEnabled(true);
}
</script>
</body>
Codebase Browser
chromium