<!DOCTYPE html>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<style>
.container {
width: 100px;
height: 100px;
overflow: scroll;
direction: ltr;
}
.content {
width: 200px;
height: 200px;
}
</style>
<div id="target1" class="container">
<div class="content"></div>
</div>
<div id="target2" class="container" style="will-change: transform">
<div class="content"></div>
</div>
<script>
runAfterLayoutAndPaint(() => {
document.querySelectorAll('.container').forEach((e) => {
e.style.direction = 'rtl';
});
document.querySelectorAll('.content').forEach((e) => {
e.style.height = '300px';
});
}, true);
</script>