scrollbar-width-010.html (1593B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Scrollbars: scrollbar-width auto on the root defers to ::-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: auto; 12 } 13 14 :root::-webkit-scrollbar { 15 display: none; 16 } 17 18 /* This is so that browsers that don't implement the WebKit prefix still pass the test */ 19 @supports not selector(::-webkit-scrollbar) { 20 :root { 21 overflow: hidden; 22 } 23 } 24 25 :root, 26 body { 27 margin: 0; 28 padding: 0; 29 } 30 31 #content { 32 height: 10vh; 33 width: 100%; 34 background: lightsalmon; 35 } 36 37 #expander { 38 /* force vertical scroll */ 39 height: 200vh; 40 width: 300px; 41 background: gray; 42 } 43 </style> 44 45 <body> 46 47 <div id="content"></div> 48 49 <div id="expander"></div> 50 51 <script> 52 test(function () { 53 let root = document.documentElement; 54 let body = document.body; 55 let content = document.getElementById('content'); 56 57 assert_equals(root.offsetWidth, window.innerWidth, "viewport does not show a scrollbar"); 58 assert_equals(body.offsetWidth, root.offsetWidth, "body matches root"); 59 assert_equals(content.offsetWidth, body.offsetWidth, "content matches body"); 60 }, "scrollbar-width auto on the root defers to ::-webkit-scrollbar"); 61 </script> 62 </body>