scrollbar-width-004.html (6288B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Scrollbars: scrollbar-width with vertical 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 .vertical-lr { 31 writing-mode: vertical-lr; 32 } 33 34 .vertical-rl { 35 writing-mode: vertical-rl; 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 // vertical-lr 56 57 test(function () { 58 let container = document.getElementById('container_vlr_auto'); 59 let content = document.getElementById('content_vlr_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 }, "vertical-lr, scrollbar-width auto"); 66 67 test(function () { 68 let container = document.getElementById('container_vlr_thin'); 69 let content = document.getElementById('content_vlr_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 }, "vertical-lr, scrollbar-width thin"); 76 77 test(function () { 78 let container = document.getElementById('container_vlr_none'); 79 let content = document.getElementById('content_vlr_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 }, "vertical-lr, scrollbar-width none"); 86 87 // vertical-rl 88 89 test(function () { 90 let container = document.getElementById('container_vrl_auto'); 91 let content = document.getElementById('content_vrl_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 }, "vertical-rl, scrollbar-width auto"); 98 99 test(function () { 100 let container = document.getElementById('container_vrl_thin'); 101 let content = document.getElementById('content_vrl_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 }, "vertical-rl, scrollbar-width thin"); 108 109 test(function () { 110 let container = document.getElementById('container_vrl_none'); 111 let content = document.getElementById('content_vrl_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 }, "vertical-rl, scrollbar-width none"); 118 119 done(); 120 } 121 122 </script> 123 124 <body onload="performTest()"> 125 126 Test scrollbar-width: both scrollbars, vertical-lr 127 128 <div class="container vertical-lr auto" id="container_vlr_auto"> 129 <div class="content" id="content_vlr_auto">auto</div> 130 </div> 131 132 <div class="container vertical-lr thin" id="container_vlr_thin"> 133 <div class="content" id="content_vlr_thin">thin</div> 134 </div> 135 136 <div class="container vertical-lr none" id="container_vlr_none"> 137 <div class="content" id="content_vlr_none">none</div> 138 </div> 139 140 Test scrollbar-width: both scrollbars, vertical-rl 141 142 <div class="container vertical-rl auto" id="container_vrl_auto"> 143 <div class="content" id="content_vrl_auto">auto</div> 144 </div> 145 146 <div class="container vertical-rl thin" id="container_vrl_thin"> 147 <div class="content" id="content_vrl_thin">thin</div> 148 </div> 149 150 <div class="container vertical-rl none" id="container_vrl_none"> 151 <div class="content" id="content_vrl_none">none</div> 152 </div> 153 154 </body>