testing/web-platform/tests/css/css-scrollbars/scrollbar-width-011.html

   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/" />
   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>