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