auto-scrollbar-inline-children.html (1151B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> 3 <link rel="help" href="https://www.w3.org/TR/CSS22/visufx.html#propdef-overflow"> 4 <style> 5 /* Avoid auto scrollbars on the viewport, because that might trigger re-layout 6 (and thus hide bugs). */ 7 body { overflow:hidden; } 8 9 .container { width:100px; } 10 </style> 11 <p>There should be a blue rectangle below, and possibly a scrollbar (depending 12 on OS / browser), that should not obscure any parts of the rectangle. The 13 word "FAIL" should not be seen.</p> 14 <div class="container" style="overflow:auto; height:200px;"> 15 <div id="child" style="display:inline-block; box-sizing:border-box; width:100%; height:100%; border:10px solid blue;"></div> 16 <br>FAIL 17 </div> 18 19 <div class="container" style="visibility:hidden; overflow:scroll;"> 20 <div id="ref"></div> 21 </div> 22 23 <script src="/resources/testharness.js"></script> 24 <script src="/resources/testharnessreport.js"></script> 25 <script> 26 test(()=> { 27 var child = document.getElementById("child"); 28 assert_equals(child.offsetWidth, ref.offsetWidth); 29 }, "Auto scrollbar affects size of children"); 30 </script>