scrollbar-width-002.html (6950B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Scrollbars: scrollbar-width with vertical text and horizontal 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 overflow: auto; 14 height: 200px; 15 width: 200px; 16 margin: 1px; 17 padding: 0px; 18 border: none; 19 background: deepskyblue; 20 } 21 22 .content { 23 height: 100%; 24 width: 300px; 25 background: lightsalmon; 26 } 27 28 /* writing directions */ 29 .vertical-lr { 30 writing-mode: vertical-lr; 31 } 32 33 .vertical-rl { 34 writing-mode: vertical-rl; 35 } 36 37 .container.auto { 38 scrollbar-width: auto; 39 } 40 41 .container.thin { 42 scrollbar-width: thin; 43 } 44 45 .container.none { 46 scrollbar-width: none; 47 } 48 </style> 49 <script type="text/javascript"> 50 51 function performTest() { 52 setup({ explicit_done: true }); 53 54 // vertical-lr 55 56 test(function () { 57 let container = document.getElementById('container_vlr_auto'); 58 let content = document.getElementById('content_vlr_auto'); 59 assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-lr auto scrollHeight"); 60 assert_less_than(container.clientHeight, container.offsetHeight, "vertical-lr auto clientHeight"); 61 assert_equals(container.clientHeight, content.clientHeight, "vertical-lr auto clientHeight"); 62 assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-lr auto offsetHeight"); 63 }, "vertical-lr, scrollbar-width auto"); 64 65 test(function () { 66 let container = document.getElementById('container_vlr_thin'); 67 let content = document.getElementById('content_vlr_thin'); 68 assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-lr thin scrollHeight"); 69 assert_less_than(container.clientHeight, container.offsetHeight, "vertical-lr thin clientHeight"); 70 assert_equals(container.clientHeight, content.clientHeight, "vertical-lr thin clientHeight"); 71 assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-lr thin offsetHeight"); 72 }, "vertical-lr, scrollbar-width thin"); 73 74 test(function () { 75 let auto_scrollbar_height = 76 document.getElementById('container_vlr_auto').offsetHeight - 77 document.getElementById('container_vlr_auto').clientHeight; 78 let thin_scrollbar_height = 79 document.getElementById('container_vlr_thin').offsetHeight - 80 document.getElementById('container_vlr_thin').clientHeight; 81 assert_less_than_equal(thin_scrollbar_height, auto_scrollbar_height, "vertical-lr, thin <= auto"); 82 }, 'vertical-lr, scrollbar-width "thin" is same or thinner than "auto"'); 83 84 test(function () { 85 let container = document.getElementById('container_vlr_none'); 86 let content = document.getElementById('content_vlr_none'); 87 assert_equals(container.scrollHeight, 200, "vertical-lr none scrollHeight"); 88 assert_equals(container.clientHeight, 200, "vertical-lr none clientHeight"); 89 assert_equals(container.clientHeight, content.clientHeight, "vertical-lr none clientHeight"); 90 assert_equals(container.offsetHeight, content.offsetHeight, "vertical-lr none offsetHeight"); 91 }, "vertical-lr, scrollbar-width none"); 92 93 // vertical-rl 94 95 test(function () { 96 let container = document.getElementById('container_vrl_auto'); 97 let content = document.getElementById('content_vrl_auto'); 98 assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-rl auto scrollHeight"); 99 assert_less_than(container.clientHeight, container.offsetHeight, "vertical-rl auto clientHeight"); 100 assert_equals(container.clientHeight, content.clientHeight, "vertical-rl auto clientHeight"); 101 assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-rl auto offsetHeight"); 102 }, "vertical-rl, scrollbar-width auto"); 103 104 test(function () { 105 let container = document.getElementById('container_vrl_thin'); 106 let content = document.getElementById('content_vrl_thin'); 107 assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-rl thin scrollHeight"); 108 assert_less_than(container.clientHeight, container.offsetHeight, "vertical-rl thin clientHeight"); 109 assert_equals(container.clientHeight, content.clientHeight, "vertical-rl thin clientHeight"); 110 assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-rl thin offsetHeight"); 111 }, "vertical-rl, scrollbar-width thin"); 112 113 test(function () { 114 let auto_scrollbar_height = 115 document.getElementById('container_vrl_auto').offsetHeight - 116 document.getElementById('container_vrl_auto').clientHeight; 117 let thin_scrollbar_height = 118 document.getElementById('container_vrl_thin').offsetHeight - 119 document.getElementById('container_vrl_thin').clientHeight; 120 assert_less_than_equal(thin_scrollbar_height, auto_scrollbar_height, "vertical-rl, thin <= auto"); 121 }, 'vertical-rl, scrollbar-width "thin" is same or thinner than "auto"'); 122 123 test(function () { 124 let container = document.getElementById('container_vrl_none'); 125 let content = document.getElementById('content_vrl_none'); 126 assert_equals(container.scrollHeight, 200, "vertical-rl none scrollHeight"); 127 assert_equals(container.clientHeight, 200, "vertical-rl none clientHeight"); 128 assert_equals(container.clientHeight, content.clientHeight, "vertical-rl none clientHeight"); 129 assert_equals(container.offsetHeight, content.offsetHeight, "vertical-rl none offsetHeight"); 130 }, "vertical-rl, scrollbar-width none"); 131 132 done(); 133 } 134 135 </script> 136 137 <body onload="performTest()"> 138 139 Test scrollbar-width: horizontal scrollbar, vertical-lr direction 140 141 <div class="container vertical-lr auto" id="container_vlr_auto"> 142 <div class="content" id="content_vlr_auto">auto</div> 143 </div> 144 145 <div class="container vertical-lr thin" id="container_vlr_thin"> 146 <div class="content" id="content_vlr_thin">thin</div> 147 </div> 148 149 <div class="container vertical-lr none" id="container_vlr_none"> 150 <div class="content" id="content_vlr_none">none</div> 151 </div> 152 153 Test scrollbar-width: horizontal scrollbar, vertical-rl direction 154 155 <div class="container vertical-rl auto" id="container_vrl_auto"> 156 <div class="content" id="content_vrl_auto">auto</div> 157 </div> 158 159 <div class="container vertical-rl thin" id="container_vrl_thin"> 160 <div class="content" id="content_vrl_thin">thin</div> 161 </div> 162 163 <div class="container vertical-rl none" id="container_vrl_none"> 164 <div class="content" id="content_vrl_none">none</div> 165 </div> 166 167 </body>