<!DOCTYPE html>
<style>
  #scroller {
    height: 100px;
    width: 100px;
    overflow: scroll;
    background-color: red;
  }

  #content {
    width: 100px;
    height: 100px;
    background: green;
  }
</style>

<div id="scroller">
  <div id="content"></div>
</div>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<script>
test(t => {
  var scroller = document.querySelector("#scroller");
  var content = document.querySelector("#content");

  content.style.transform = "translateX(400px)";
  assert_equals(scroller.scrollWidth, 500);

  scroller.scrollLeft = 300;
  assert_equals(scroller.scrollLeft, 300);

  // make a non-layout inducing change that updates the overflow
  content.style.transform = "translateX(100px)";
  assert_equals(scroller.scrollWidth, 200);
  assert_equals(scroller.scrollLeft, 200 - scroller.clientWidth /* max scroll offset */);
}, "Verify that scroll offset clamps correctly when overflow rect is changed " +
   " as a result of a transform (i.e., a non-layout inducing change)");
</script>