<!DOCTYPE html>
<style>
td {
padding: 0;
}
table {
width: 10000px;
height: 10000px;
border-spacing: 0;
border-collapse: collapse;
}
col {
border: 2px solid blue;
}
::-webkit-scrollbar {
width: 0;
height: 0;
}
</style>
<div id="container" style="will-change: transform; overflow: scroll; width: 400px; height: 400px">
<table id="table">
<colgroup>
<col style="border-color: red">
<col style="border-color: gray">
<col style="border-color: magenta">
<col style="border-color: blue">
<col style="border-color: cyan">
<col style="border-color: yellow">
<col style="border-color: orange">
<col style="border-color: green">
</colgroup>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</div>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
// Under-invalidation checking for this test is slow.
if (window.internals) {
internals.runtimeFlags.paintUnderInvalidationCheckingEnabled = false;
}
runAfterLayoutAndPaint(function() {
container.scrollTop = 10000;
container.scrollLeft = 10000;
}, true);
</script>