<!DOCTYPE html> <meta charset="utf-8"> <title>CSS Overflow: Scrollable Overflow Transform Dynamic Position Change</title> <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" /> <meta name="assert" content="Checks that changes on an element's transform contribute to the scrollable overflow, even when some element has changed position too."> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> .container { position: absolute; width: 100px; height: 100px; overflow: auto; background: silver; border: solid thick; } .element { width: 50px; height: 50px; background: lime; } </style> <div id="container1" style="top: 100px;" class="container"> <div id="element1" style="transform: translateX(20px);" class="element"></div> </div> <div id="container2" style="top: 250px;" class="container"> <div id="element2" style="transform: translateY(30px);" class="element"></div> </div> <div id="container3" style="top: 400px;" class="container"> <div id="element3" style="transform: translate(20px, 30px);" class="element"></div> </div> <script> test(() => { assert_equals(container1.scrollWidth, 100); container1.style.top = "110px"; element1.style.transform = "translateX(200px)"; assert_equals(container1.scrollWidth, 250); }, "Check scrollWidth before and after position and transform chage"); test(() => { assert_equals(container2.scrollHeight, 100); container2.style.top = "260px"; element2.style.transform = "translateY(300px)"; assert_equals(container2.scrollHeight, 350); }, "Check scrollHeight before and after position and transform chage"); test(() => { assert_equals(container3.scrollWidth, 100); assert_equals(container3.scrollHeight, 100); container3.style.top = "410px"; element3.style.transform = "translate(200px, 300px)"; assert_equals(container3.scrollWidth, 250); assert_equals(container3.scrollHeight, 350); }, "Check scrollWidth and scrollHeight after position and transform chage"); </script>