scrollbar-width-012.html (1437B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Scrollbars: scrollbar-width none on the root overrides ::-webkit-scrollbar on the root</title> 4 <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> 5 <link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#width-compat" /> 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 scrollbar-width: none; 12 } 13 14 :root::-webkit-scrollbar { 15 width: 20px; 16 background-color: lightgray; 17 } 18 19 :root, 20 body { 21 margin: 0; 22 padding: 0; 23 } 24 25 #content { 26 height: 10vh; 27 width: 100%; 28 background: lightsalmon; 29 } 30 31 #expander { 32 /* force vertical scroll */ 33 height: 200vh; 34 width: 300px; 35 background: gray; 36 } 37 </style> 38 39 <body> 40 41 <div id="content"></div> 42 43 <div id="expander"></div> 44 45 <script> 46 test(function () { 47 let root = document.documentElement; 48 let body = document.body; 49 let content = document.getElementById('content'); 50 51 assert_equals(root.offsetWidth, window.innerWidth, "viewport does not show a scrollbar"); 52 assert_equals(body.offsetWidth, root.offsetWidth, "body matches root"); 53 assert_equals(content.offsetWidth, body.offsetWidth, "content matches body"); 54 }, "scrollbar-width none on the root overrides ::-webkit-scrollbar"); 55 </script> 56 </body>