scrollbar-width-001.html (7130B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Scrollbars: scrollbar-width with horizontal text and vertical scrollbar</title> 4 <link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" /> 5 <link rel="help" href="https://www.w3.org/TR/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 /* Use scrollbar-gutter to reserve space for the scrollbar. */ 11 .container { 12 scrollbar-gutter: stable; 13 writing-mode: horizontal-tb; 14 overflow: auto; 15 height: 200px; 16 width: 200px; 17 margin: 1px; 18 padding: 0px; 19 border: none; 20 background: deepskyblue; 21 } 22 23 .content { 24 height: 300px; 25 width: 100%; 26 background: lightsalmon; 27 } 28 29 /* writing directions */ 30 .ltr { 31 direction: ltr; 32 } 33 34 .rtl { 35 direction: rtl; 36 } 37 38 .container.auto { 39 scrollbar-width: auto; 40 } 41 42 .container.thin { 43 scrollbar-width: thin; 44 } 45 46 .container.none { 47 scrollbar-width: none; 48 } 49 </style> 50 <script type="text/javascript"> 51 52 function performTest() { 53 setup({ explicit_done: true }); 54 55 // ltr 56 57 test(function () { 58 let container = document.getElementById('container_ltr_auto'); 59 let content = document.getElementById('content_ltr_auto'); 60 assert_less_than(container.scrollWidth, container.offsetWidth, "ltr auto scrollWidth"); 61 assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth"); 62 assert_equals(container.offsetLeft, content.offsetLeft, "ltr auto offsetLeft"); 63 assert_equals(container.clientWidth, content.clientWidth, "ltr auto clientWidth"); 64 assert_not_equals(container.offsetWidth, content.offsetWidth, "ltr auto offsetWidth"); 65 }, "horizontal-tb, ltr, scrollbar-width auto"); 66 67 test(function () { 68 let container = document.getElementById('container_ltr_thin'); 69 let content = document.getElementById('content_ltr_thin'); 70 assert_less_than(container.scrollWidth, container.offsetWidth, "ltr thin scrollWidth"); 71 assert_less_than(container.clientWidth, container.offsetWidth, "ltr thin clientWidth"); 72 assert_equals(container.offsetLeft, content.offsetLeft, "ltr thin offsetLeft"); 73 assert_equals(container.clientWidth, content.clientWidth, "ltr thin clientWidth"); 74 assert_not_equals(container.offsetWidth, content.offsetWidth, "ltr thin offsetWidth"); 75 }, "horizontal-tb, ltr, scrollbar-width thin"); 76 77 test(function () { 78 let auto_scrollbar_width = 79 document.getElementById('container_ltr_auto').offsetWidth - 80 document.getElementById('container_ltr_auto').clientWidth; 81 let thin_scrollbar_width = 82 document.getElementById('container_ltr_thin').offsetWidth - 83 document.getElementById('container_ltr_thin').clientWidth; 84 assert_less_than_equal(thin_scrollbar_width, auto_scrollbar_width, "ltr, thin <= auto"); 85 }, 'horizontal-tb, ltr, scrollbar-width "thin" is same or thinner than "auto"'); 86 87 test(function () { 88 let container = document.getElementById('container_ltr_none'); 89 let content = document.getElementById('content_ltr_none'); 90 assert_equals(container.scrollWidth, 200, "ltr none scrollWidth"); 91 assert_equals(container.clientWidth, 200, "ltr none clientWidth"); 92 assert_equals(container.offsetLeft, content.offsetLeft, "ltr none offsetLeft"); 93 assert_equals(container.clientWidth, content.clientWidth, "ltr none clientWidth"); 94 assert_equals(container.offsetWidth, content.offsetWidth, "ltr none offsetWidth"); 95 }, "horizontal-tb, ltr, scrollbar-width none"); 96 97 // rtl 98 99 test(function () { 100 let container = document.getElementById('container_rtl_auto'); 101 let content = document.getElementById('content_rtl_auto'); 102 assert_less_than(container.scrollWidth, container.offsetWidth, "rtl auto scrollWidth"); 103 assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth"); 104 assert_less_than(container.offsetLeft, content.offsetLeft, "rtl auto offsetLeft"); 105 assert_equals(container.clientWidth, content.clientWidth, "rtl auto clientWidth"); 106 assert_not_equals(container.offsetWidth, content.offsetWidth, "rtl auto offsetWidth"); 107 }, "horizontal-tb, rtl, scrollbar-width auto"); 108 109 test(function () { 110 let container = document.getElementById('container_rtl_thin'); 111 let content = document.getElementById('content_rtl_thin'); 112 assert_less_than(container.scrollWidth, container.offsetWidth, "rtl thin scrollWidth"); 113 assert_less_than(container.clientWidth, container.offsetWidth, "rtl thin clientWidth"); 114 assert_less_than(container.offsetLeft, content.offsetLeft, "rtl thin offsetLeft"); 115 assert_equals(container.clientWidth, content.clientWidth, "rtl thin clientWidth"); 116 assert_not_equals(container.offsetWidth, content.offsetWidth, "rtl thin offsetWidth"); 117 }, "horizontal-tb, rtl, scrollbar-width thin"); 118 119 test(function () { 120 let auto_scrollbar_width = 121 document.getElementById('container_rtl_auto').offsetWidth - 122 document.getElementById('container_rtl_auto').clientWidth; 123 let thin_scrollbar_width = 124 document.getElementById('container_rtl_thin').offsetWidth - 125 document.getElementById('container_rtl_thin').clientWidth; 126 assert_less_than_equal(thin_scrollbar_width, auto_scrollbar_width, "rtl, thin < auto"); 127 }, 'horizontal-tb, rtl, scrollbar-width "thin" is same or thinner than "auto"'); 128 129 test(function () { 130 let container = document.getElementById('container_rtl_none'); 131 let content = document.getElementById('content_rtl_none'); 132 assert_equals(container.scrollWidth, 200, "rtl none scrollWidth"); 133 assert_equals(container.clientWidth, 200, "rtl none clientWidth"); 134 assert_equals(container.offsetLeft, content.offsetLeft, "rtl none offsetLeft"); 135 assert_equals(container.clientWidth, content.clientWidth, "rtl none clientWidth"); 136 assert_equals(container.offsetWidth, content.offsetWidth, "rtl none offsetWidth"); 137 }, "horizontal-tb, rtl, scrollbar-width none"); 138 139 done(); 140 } 141 142 </script> 143 144 <body onload="performTest()"> 145 146 Test scrollbar-width: vertical scrollbar, ltr direction 147 148 <div class="container ltr auto" id="container_ltr_auto"> 149 <div class="content" id="content_ltr_auto">auto</div> 150 </div> 151 152 <div class="container ltr thin" id="container_ltr_thin"> 153 <div class="content" id="content_ltr_thin">thin</div> 154 </div> 155 156 <div class="container ltr none" id="container_ltr_none"> 157 <div class="content" id="content_ltr_none">none</div> 158 </div> 159 160 Test scrollbar-width: vertical scrollbar, rtl direction 161 162 <div class="container rtl auto" id="container_rtl_auto"> 163 <div class="content" id="content_rtl_auto">auto</div> 164 </div> 165 166 <div class="container rtl thin" id="container_rtl_thin"> 167 <div class="content" id="content_rtl_thin">thin</div> 168 </div> 169 170 <div class="container rtl none" id="container_rtl_none"> 171 <div class="content" id="content_rtl_none">none</div> 172 </div> 173 174 </body>