scrollbar-width-keywords.html (1362B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <link rel="author" title="Xidorn Quan" href="mailto:me@upsuper.org"> 4 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-width"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 .area { 10 width: 100px; 11 height: 100px; 12 overflow: auto; 13 display: inline-block; 14 } 15 .area::before { 16 content: ""; 17 display: block; 18 width: 200px; 19 height: 200px; 20 } 21 </style> 22 <div id="scrollbar-none" class="area" style="scrollbar-width: none"></div> 23 <div id="scrollbar-thin" class="area" style="scrollbar-width: thin"></div> 24 <div id="scrollbar-auto" class="area" style="scrollbar-width: auto"></div> 25 <script> 26 test(function() { 27 let elem = document.getElementById("scrollbar-none"); 28 assert_equals(elem.clientWidth, 100); 29 assert_equals(elem.clientHeight, 100); 30 }, "scrollbar-width: none should have no scrollbar"); 31 32 test(function() { 33 let thin = document.getElementById("scrollbar-thin"); 34 let auto = document.getElementById("scrollbar-auto"); 35 assert_greater_than_equal(thin.clientWidth, auto.clientWidth); 36 assert_greater_than_equal(thin.clientHeight, auto.clientHeight); 37 }, "scrollbar-width: thin should have scrollbar no wider than auto"); 38 </script>