viewport-units-gutter-005.html (1335B)
1 <!doctype html> 2 <html style="overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin"> 3 <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> 4 <meta name="assert" content="There is no horizontal overflow when 100vw is reduced by thin gutter width."> 5 6 <!-- This test uses checkLayout instead of a reference because it's unclear how elements that overlap with the gutter should be laid out and painted. See https://github.com/w3c/csswg-drafts/issues/5253 --> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/check-layout-th.js"></script> 10 11 <body style="margin: 0; padding: 0;"> 12 <div style="width: 100vw; height: 100px; background: orange; box-sizing: border-box; border-left: 3px solid blue; border-right: 3px solid blue;" id="test-div"></div> 13 14 <!-- This div is only for measuring scrollbar size --> 15 <div id="measure" style="overflow: scroll; width: 200px; scrollbar-width: thin;"> 16 <div style="min-height: 100px;">measure</div> 17 </div> 18 19 <script> 20 const scrollbarWidth = measure.offsetWidth - measure.clientWidth; 21 let testDiv = document.getElementById('test-div'); 22 testDiv.setAttribute("data-expected-width", window.innerWidth - scrollbarWidth); 23 checkLayout("#test-div"); 24 </script> 25 26 </body> 27 </html>