<!DOCTYPE html> <link rel="author" href="mailto:atotic@google.com"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable"> <meta name="assert" content="What happens when appearance of one scrollbar triggers the other one?"> <style> .container { width: 100px; height: 100px; overflow: auto; background: #DDD; --too-big: 120px; --slightly-smaller: 95px; } .target { width: 120px; height: 95px; background: rgba(0,255,0,0.3); } </style> <!-- --> <div class="container"> <div class="target" style="width:var(--too-big);height:var(--slightly-smaller)" ></div> </div> <div class="container"> <div class="target" style="height:var(--too-big);width:var(--slightly-smaller)" ></div> </div> <script> test(() => { Array.from(document.querySelectorAll(".container")).forEach( el => { let verticalScrollbar = el.offsetWidth - el.clientWidth; let horizontalScrollbar = el.offsetHeight - el.clientHeight; assert_equals(verticalScrollbar, horizontalScrollbar, "both scrollbars are visible."); }); }, 'appearance of one scrollbar caused the other scrollbar to appear.'); </script>