<style>
body {
margin: 0;
}
table {
background: red;
border-collapse: collapse;
}
td, th {
height: 50px;
width: 50px;
padding: 0;
}
th {
background: green;
}
.scroller {
will-change: transform;
overflow: auto;
width: 100px;
height: 200px;
outline: 2px solid black;
}
.sticky {
will-change: transform;
position: sticky;
top: 25px;
}
</style>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function finishTest() {
document.querySelector('.scroller').scrollTop = 200;
if (window.testRunner)
testRunner.notifyDone();
}
window.addEventListener('load', function() {
requestAnimationFrame(function() {
requestAnimationFrame(finishTest);
});
});
</script>
<div class="scroller">
<table>
<thead class="sticky">
<tr class="sticky">
<th class="sticky"></th>
</tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
</div>