scrollbar-width-016.html (3707B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Scrollbars: scrollbar-width on scrollable areas correctly interacts with ::-webkit-scrollbar on container</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 .container { 11 overflow: auto; 12 height: 200px; 13 width: 200px; 14 margin: 1px; 15 padding: 0px; 16 border: none; 17 background: deepskyblue; 18 } 19 20 .content { 21 height: 300px; 22 width: 100%; 23 background: lightsalmon; 24 } 25 26 .container.auto { 27 scrollbar-width: auto; 28 } 29 30 .container.auto::-webkit-scrollbar { 31 display: none; 32 } 33 34 /* This is so that browsers that don't implement the WebKit prefix still pass the test */ 35 @supports not selector(::-webkit-scrollbar) { 36 .container.auto { 37 overflow: hidden; 38 } 39 } 40 41 .container.thin { 42 scrollbar-width: thin; 43 } 44 45 .container.thin::-webkit-scrollbar { 46 display: none; 47 } 48 49 .container.none { 50 scrollbar-width: none; 51 } 52 53 .container.none::-webkit-scrollbar { 54 width: 20px; 55 background-color: lightgray; 56 } 57 </style> 58 <script> 59 function performTest() { 60 setup({ explicit_done: true }); 61 62 // ltr 63 64 test(function () { 65 let container = document.getElementById('container_auto'); 66 let content = document.getElementById('content_auto'); 67 assert_equals(container.scrollWidth, 200, "auto scrollWidth"); 68 assert_equals(container.clientWidth, 200, "auto clientWidth"); 69 assert_equals(container.offsetLeft, content.offsetLeft, "auto offsetLeft"); 70 assert_equals(container.clientWidth, content.clientWidth, "auto clientWidth"); 71 assert_equals(container.offsetWidth, content.offsetWidth, "auto offsetWidth"); 72 }, "scrollbar-width auto defers to ::-webkit-scrollbar"); 73 74 test(function () { 75 let container = document.getElementById('container_thin'); 76 let content = document.getElementById('content_thin'); 77 assert_less_than(container.scrollWidth, container.offsetWidth, "thin scrollWidth"); 78 assert_less_than(container.clientWidth, container.offsetWidth, "thin clientWidth"); 79 assert_equals(container.offsetLeft, content.offsetLeft, "thin offsetLeft"); 80 assert_equals(container.clientWidth, content.clientWidth, "thin clientWidth"); 81 assert_not_equals(container.offsetWidth, content.offsetWidth, "thin offsetWidth"); 82 }, "scrollbar-width thin overrides ::-webkit-scrollbar"); 83 84 test(function () { 85 let container = document.getElementById('container_none'); 86 let content = document.getElementById('content_none'); 87 assert_equals(container.scrollWidth, 200, "none scrollWidth"); 88 assert_equals(container.clientWidth, 200, "none clientWidth"); 89 assert_equals(container.offsetLeft, content.offsetLeft, "none offsetLeft"); 90 assert_equals(container.clientWidth, content.clientWidth, "none clientWidth"); 91 assert_equals(container.offsetWidth, content.offsetWidth, "none offsetWidth"); 92 }, "scrollbar-width none overrides ::-webkit-scrollbar"); 93 94 done(); 95 } 96 </script> 97 98 <body onload="performTest()"> 99 100 Test scrollbar-width: vertical scrollbar 101 102 <div class="container auto" id="container_auto"> 103 <div class="content" id="content_auto">auto</div> 104 </div> 105 106 <div class="container thin" id="container_thin"> 107 <div class="content" id="content_thin">thin</div> 108 </div> 109 110 <div class="container none" id="container_none"> 111 <div class="content" id="content_none">none</div> 112 </div> 113 114 </body>