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