overflow-codependent-scrollbars.html (1229B)
1 <!DOCTYPE html> 2 <link rel="author" href="mailto:atotic@google.com"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable"> 6 <meta name="assert" content="What happens when appearance of one scrollbar triggers the other one?"> 7 <style> 8 .container { 9 width: 100px; 10 height: 100px; 11 overflow: auto; 12 background: #DDD; 13 --too-big: 120px; 14 --slightly-smaller: 95px; 15 } 16 .target { 17 width: 120px; 18 height: 95px; 19 background: rgba(0,255,0,0.3); 20 } 21 </style> 22 <!-- --> 23 <div class="container"> 24 <div class="target" style="width:var(--too-big);height:var(--slightly-smaller)" ></div> 25 </div> 26 <div class="container"> 27 <div class="target" style="height:var(--too-big);width:var(--slightly-smaller)" ></div> 28 </div> 29 30 <script> 31 test(() => { 32 Array.from(document.querySelectorAll(".container")).forEach( el => { 33 let verticalScrollbar = el.offsetWidth - el.clientWidth; 34 let horizontalScrollbar = el.offsetHeight - el.clientHeight; 35 assert_equals(verticalScrollbar, horizontalScrollbar, "both scrollbars are visible."); 36 }); 37 }, 'appearance of one scrollbar caused the other scrollbar to appear.'); 38 </script>