scrollbar-width-006.html (1558B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Scrollbars: scrollbar-width:thin on the root element</title> 4 <link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" /> 5 <link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/css/support/parsing-testcommon.js"></script> 9 <style> 10 :root { 11 /* CSS scrollbar properties applied to the root element 12 will be propagated to the viewport. */ 13 scrollbar-width: thin; 14 /* Use scrollbar-gutter to reserve space for the scrollbar. */ 15 scrollbar-gutter: stable; 16 } 17 18 :root, 19 body { 20 margin: 0; 21 padding: 0; 22 } 23 24 #content { 25 height: 10vh; 26 width: 100%; 27 background: lightsalmon; 28 } 29 30 #expander { 31 /* force vertical scroll */ 32 height: 200vh; 33 width: 300px; 34 background: gray; 35 } 36 </style> 37 38 <body> 39 40 <div id="content"></div> 41 42 <div id="expander"></div> 43 44 <script type="text/javascript"> 45 setup({ explicit_done: true }); 46 47 test(function () { 48 let root = document.documentElement; 49 let body = document.body; 50 let content = document.getElementById('content'); 51 52 assert_less_than(root.offsetWidth, window.innerWidth, "viewport has a scrollbar"); 53 assert_equals(body.offsetWidth, root.offsetWidth, "body matches root"); 54 assert_equals(content.offsetWidth, body.offsetWidth, "content matches body"); 55 }, "viewport displays a scrollbar"); 56 57 done(); 58 59 </script> 60 </body>