| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <link rel="author" title="Xidorn Quan" href="mailto:me@upsuper.org"> |
| <link rel="author" title="Mozilla" href="https://www.mozilla.org"> |
| <link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-width"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| .area { |
| width: 100px; |
| height: 100px; |
| overflow: auto; |
| display: inline-block; |
| } |
| .area::before { |
| content: ""; |
| display: block; |
| width: 200px; |
| height: 200px; |
| } |
| </style> |
| <div id="scrollbar-none" class="area" style="scrollbar-width: none"></div> |
| <div id="scrollbar-thin" class="area" style="scrollbar-width: thin"></div> |
| <div id="scrollbar-auto" class="area" style="scrollbar-width: auto"></div> |
| <script> |
| test(function() { |
| let elem = document.getElementById("scrollbar-none"); |
| assert_equals(elem.clientWidth, 100); |
| assert_equals(elem.clientHeight, 100); |
| }, "scrollbar-width: none should have no scrollbar"); |
| |
| test(function() { |
| let thin = document.getElementById("scrollbar-thin"); |
| let auto = document.getElementById("scrollbar-auto"); |
| assert_greater_than_equal(thin.clientWidth, auto.clientWidth); |
| assert_greater_than_equal(thin.clientHeight, auto.clientHeight); |
| }, "scrollbar-width: thin should have scrollbar no wider than auto"); |
| </script> |
