scrollbar-width-003.html (6236B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Scrollbars: scrollbar-width with horizontal text, and vertical and horizontal scrollbars</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: 300px; 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.offsetWidth, container.scrollWidth, "ltr auto scrollWidth"); 61 assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight"); 62 assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth"); 63 assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight"); 64 assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft"); 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.offsetWidth, container.scrollWidth, "ltr auto scrollWidth"); 71 assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight"); 72 assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth"); 73 assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight"); 74 assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft"); 75 }, "horizontal-tb, ltr, scrollbar-width thin"); 76 77 test(function () { 78 let container = document.getElementById('container_ltr_none'); 79 let content = document.getElementById('content_ltr_none'); 80 assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth"); 81 assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight"); 82 assert_equals(container.clientWidth, container.offsetWidth, "ltr auto clientWidth"); 83 assert_equals(container.clientHeight, container.offsetHeight, "ltr auto clientHeight"); 84 assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft"); 85 }, "horizontal-tb, ltr, scrollbar-width none"); 86 87 // rtl 88 89 test(function () { 90 let container = document.getElementById('container_rtl_auto'); 91 let content = document.getElementById('content_rtl_auto'); 92 assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth"); 93 assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight"); 94 assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth"); 95 assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight"); 96 assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft"); 97 }, "horizontal-tb, rtl, scrollbar-width auto"); 98 99 test(function () { 100 let container = document.getElementById('container_rtl_thin'); 101 let content = document.getElementById('content_rtl_thin'); 102 assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth"); 103 assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight"); 104 assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth"); 105 assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight"); 106 assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft"); 107 }, "horizontal-tb, rtl, scrollbar-width thin"); 108 109 test(function () { 110 let container = document.getElementById('container_rtl_none'); 111 let content = document.getElementById('content_rtl_none'); 112 assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth"); 113 assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight"); 114 assert_equals(container.clientWidth, container.offsetWidth, "rtl auto clientWidth"); 115 assert_equals(container.clientHeight, container.offsetHeight, "rtl auto clientHeight"); 116 assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft"); 117 }, "horizontal-tb, rtl, scrollbar-width none"); 118 119 done(); 120 } 121 122 </script> 123 124 <body onload="performTest()"> 125 126 Test scrollbar-width: both scrollbars, horizontal ltr 127 128 <div class="container ltr auto" id="container_ltr_auto"> 129 <div class="content" id="content_ltr_auto">auto</div> 130 </div> 131 132 <div class="container ltr thin" id="container_ltr_thin"> 133 <div class="content" id="content_ltr_thin">thin</div> 134 </div> 135 136 <div class="container ltr none" id="container_ltr_none"> 137 <div class="content" id="content_ltr_none">none</div> 138 </div> 139 140 Test scrollbar-width: both scrollbars, horizontal rtl 141 142 <div class="container rtl auto" id="container_rtl_auto"> 143 <div class="content" id="content_rtl_auto">auto</div> 144 </div> 145 146 <div class="container rtl thin" id="container_rtl_thin"> 147 <div class="content" id="content_rtl_thin">thin</div> 148 </div> 149 150 <div class="container rtl none" id="container_rtl_none"> 151 <div class="content" id="content_rtl_none">none</div> 152 </div> 153 154 </body>