scrollbar-width-011.html (1399B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Scrollbars: scrollbar-width thin 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: thin; 12 } 13 14 :root::-webkit-scrollbar { 15 display: none; 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> 45 test(function () { 46 let root = document.documentElement; 47 let body = document.body; 48 let content = document.getElementById('content'); 49 50 assert_less_than(root.offsetWidth, window.innerWidth, "viewport has a scrollbar"); 51 assert_equals(body.offsetWidth, root.offsetWidth, "body matches root"); 52 assert_equals(content.offsetWidth, body.offsetWidth, "content matches body"); 53 }, "scrollbar-width thin on the root overrides ::-webkit-scrollbar"); 54 </script> 55 </body>