scrollbar-width-009.html (1578B)
1 <meta charset="utf-8"> 2 <title>CSS Scrollbars: scrollbar-width on the body is not propagated quirks mode</title> 3 <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> 4 <link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/css/support/parsing-testcommon.js"></script> 8 <style> 9 :root { 10 /* CSS scrollbar properties applied to the root element 11 will be propagated to the viewport. */ 12 scrollbar-width: thin; 13 overflow: visible; 14 } 15 16 body { 17 /* overflow is propagated as well */ 18 overflow: scroll; 19 /* but CSS scrollbar properties applied to the body are not propagated */ 20 scrollbar-width: none; 21 } 22 23 :root, 24 body { 25 margin: 0; 26 padding: 0; 27 } 28 29 #content { 30 height: 10vh; 31 width: 100%; 32 background: lightsalmon; 33 } 34 35 #expander { 36 /* force vertical scroll */ 37 height: 200vh; 38 width: 300px; 39 background: gray; 40 } 41 </style> 42 43 <body> 44 45 <div id="content"></div> 46 47 <div id="expander"></div> 48 49 <script> 50 test(function () { 51 let root = document.documentElement; 52 let body = document.body; 53 let content = document.getElementById('content'); 54 55 assert_less_than(root.offsetWidth, window.innerWidth, "viewport has a scrollbar"); 56 assert_equals(body.offsetWidth, root.offsetWidth, "body matches root"); 57 assert_equals(content.offsetWidth, body.offsetWidth, "content matches body"); 58 }, "viewport displays a scrollbar"); 59 </script> 60 </body>