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