scrollbar-width-008.html (1671B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Scrollbars: scrollbar-width on the body is not propagated</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 overflow: visible; 15 } 16 17 body { 18 /* overflow is propagated as well */ 19 overflow: scroll; 20 /* but CSS scrollbar properties applied to the body are not propagated */ 21 scrollbar-width: none; 22 } 23 24 :root, 25 body { 26 margin: 0; 27 padding: 0; 28 } 29 30 #content { 31 height: 10vh; 32 width: 100%; 33 background: lightsalmon; 34 } 35 36 #expander { 37 /* force vertical scroll */ 38 height: 200vh; 39 width: 300px; 40 background: gray; 41 } 42 </style> 43 44 <body> 45 46 <div id="content"></div> 47 48 <div id="expander"></div> 49 50 <script type="text/javascript"> 51 setup({ explicit_done: true }); 52 53 test(function () { 54 let root = document.documentElement; 55 let body = document.body; 56 let content = document.getElementById('content'); 57 58 assert_less_than(root.offsetWidth, window.innerWidth, "viewport has a scrollbar"); 59 assert_equals(body.offsetWidth, root.offsetWidth, "body matches root"); 60 assert_equals(content.offsetWidth, body.offsetWidth, "content matches body"); 61 }, "viewport displays a scrollbar"); 62 63 done(); 64 65 </script> 66 </body>