scrollbar-gutter-vertical-lr-001.html (10553B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: test scrollbar-gutter with vertical left to right content</title> 4 <link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" /> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" /> 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 .line { 11 display: flex; 12 } 13 14 .container { 15 writing-mode: vertical-lr; 16 17 height: 200px; 18 width: 200px; 19 margin: 10px; 20 padding: 0px; 21 border: none; 22 overflow-y: auto; 23 background: deepskyblue; 24 } 25 26 .content { 27 width: 100%; 28 height: 100%; 29 padding: 0px; 30 border: none; 31 background: lightsalmon; 32 } 33 34 /* scrollbar-gutter */ 35 .sg_auto { 36 scrollbar-gutter: auto; 37 } 38 39 .sg_stable { 40 scrollbar-gutter: stable; 41 } 42 43 .sg_stable_mirror { 44 scrollbar-gutter: stable both-edges; 45 } 46 47 /* overflow */ 48 .container.ov_auto { 49 overflow-x: auto; 50 } 51 52 .container.ov_scroll { 53 overflow-x: scroll; 54 } 55 56 .container.ov_visible { 57 overflow: visible; 58 } 59 60 .container.ov_hidden { 61 overflow-x: hidden; 62 } 63 64 .container.ov_clip { 65 overflow: clip; 66 } 67 </style> 68 <body> 69 70 <div class="line"> 71 <div class="container ov_auto sg_auto" id="container_auto_auto"> 72 <div class="content" id="content_auto_auto">auto/auto</div> 73 </div> 74 75 <div class="container ov_scroll sg_auto" id="container_scroll_auto"> 76 <div class="content" id="content_scroll_auto">scroll/auto</div> 77 </div> 78 79 <div class="container ov_visible sg_auto" id="container_visible_auto"> 80 <div class="content" id="content_visible_auto">visible/auto</div> 81 </div> 82 83 <div class="container ov_hidden sg_auto" id="container_hidden_auto"> 84 <div class="content" id="content_hidden_auto">hidden/auto</div> 85 </div> 86 87 <div class="container ov_clip sg_auto" id="container_clip_auto"> 88 <div class="content" id="content_clip_auto">clip/auto</div> 89 </div> 90 </div> 91 92 <div class="line"> 93 <div class="container ov_auto sg_stable" id="container_auto_stable"> 94 <div class="content" id="content_auto_stable">auto/stable</div> 95 </div> 96 97 <div class="container ov_scroll sg_stable" id="container_scroll_stable"> 98 <div class="content" id="content_scroll_stable">scroll/stable</div> 99 </div> 100 101 <div class="container ov_visible sg_stable" id="container_visible_stable"> 102 <div class="content" id="content_visible_stable">visible/stable</div> 103 </div> 104 105 <div class="container ov_hidden sg_stable" id="container_hidden_stable"> 106 <div class="content" id="content_hidden_stable">hidden/stable</div> 107 </div> 108 109 <div class="container ov_clip sg_stable" id="container_clip_stable"> 110 <div class="content" id="content_clip_stable">clip/stable</div> 111 </div> 112 </div> 113 114 <div class="line"> 115 <div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror"> 116 <div class="content" id="content_auto_stable_mirror">auto/stable both-edges</div> 117 </div> 118 119 <div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror"> 120 <div class="content" id="content_scroll_stable_mirror">scroll/stable both-edges</div> 121 </div> 122 123 <div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror"> 124 <div class="content" id="content_visible_stable_mirror">visible/stable both-edges</div> 125 </div> 126 127 <div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror"> 128 <div class="content" id="content_hidden_stable_mirror">hidden/stable both-edges</div> 129 </div> 130 131 <div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror"> 132 <div class="content" id="content_clip_stable_mirror">clip/stable both-edges</div> 133 </div> 134 </div> 135 136 <script type="text/javascript"> 137 setup({ explicit_done: true }); 138 139 // scrollbar-gutter: auto 140 141 test(function () { 142 let container = document.getElementById('container_auto_auto'); 143 let content = document.getElementById('content_auto_auto'); 144 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 145 assert_equals(container.offsetTop, content.offsetTop, "content position"); 146 }, "overflow auto, scrollbar-gutter auto"); 147 148 test(function () { 149 let container = document.getElementById('container_scroll_auto'); 150 let content = document.getElementById('content_scroll_auto'); 151 assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); 152 assert_equals(container.offsetTop, content.offsetTop, "content position"); 153 }, "overflow scroll, scrollbar-gutter auto"); 154 155 test(function () { 156 let container = document.getElementById('container_visible_auto'); 157 let content = document.getElementById('content_visible_auto'); 158 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 159 assert_equals(container.offsetTop, content.offsetTop, "content position"); 160 }, "overflow visible, scrollbar-gutter auto"); 161 162 test(function () { 163 let container = document.getElementById('container_hidden_auto'); 164 let content = document.getElementById('content_hidden_auto'); 165 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 166 assert_equals(container.offsetTop, content.offsetTop, "content position"); 167 }, "overflow hidden, scrollbar-gutter auto"); 168 169 test(function () { 170 let container = document.getElementById('container_clip_auto'); 171 let content = document.getElementById('content_clip_auto'); 172 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 173 assert_equals(container.offsetTop, content.offsetTop, "content position"); 174 }, "overflow clip, scrollbar-gutter auto"); 175 176 // scrollbar-gutter: stable 177 178 test(function () { 179 let container = document.getElementById('container_auto_stable'); 180 let content = document.getElementById('content_auto_stable'); 181 assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); 182 assert_equals(container.offsetTop, content.offsetTop, "content position"); 183 }, "overflow auto, scrollbar-gutter stable"); 184 185 test(function () { 186 let container = document.getElementById('container_scroll_stable'); 187 let content = document.getElementById('content_scroll_stable'); 188 assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); 189 assert_equals(container.offsetTop, content.offsetTop, "content position"); 190 }, "overflow scroll, scrollbar-gutter stable"); 191 192 test(function () { 193 let container = document.getElementById('container_visible_stable'); 194 let content = document.getElementById('content_visible_stable'); 195 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 196 assert_equals(container.offsetTop, content.offsetTop, "content position"); 197 }, "overflow visible, scrollbar-gutter stable"); 198 199 test(function () { 200 let container = document.getElementById('container_hidden_stable'); 201 let content = document.getElementById('content_hidden_stable'); 202 assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); 203 assert_equals(container.offsetTop, content.offsetTop, "content position"); 204 }, "overflow hidden, scrollbar-gutter stable"); 205 206 test(function () { 207 let container = document.getElementById('container_clip_stable'); 208 let content = document.getElementById('content_clip_stable'); 209 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 210 assert_equals(container.offsetTop, content.offsetTop, "content position"); 211 }, "overflow clip, scrollbar-gutter stable"); 212 213 // scrollbar-gutter: stable both-edges 214 215 test(function () { 216 let container = document.getElementById('container_auto_stable_mirror'); 217 let content = document.getElementById('content_auto_stable_mirror'); 218 assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); 219 assert_less_than(container.offsetTop, content.offsetTop, "content position"); 220 let reference = document.getElementById('content_auto_stable'); 221 assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\""); 222 }, "overflow auto, scrollbar-gutter stable both-edges"); 223 224 test(function () { 225 let container = document.getElementById('container_scroll_stable_mirror'); 226 let content = document.getElementById('content_scroll_stable_mirror'); 227 assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); 228 assert_less_than(container.offsetTop, content.offsetTop, "content position"); 229 let reference = document.getElementById('content_auto_stable'); 230 assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\""); 231 }, "overflow scroll, scrollbar-gutter stable both-edges"); 232 233 test(function () { 234 let container = document.getElementById('container_visible_stable_mirror'); 235 let content = document.getElementById('content_visible_stable_mirror'); 236 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 237 assert_equals(container.offsetTop, content.offsetTop, "content position"); 238 }, "overflow visible, scrollbar-gutter stable both-edges"); 239 240 test(function () { 241 let container = document.getElementById('container_hidden_stable_mirror'); 242 let content = document.getElementById('content_hidden_stable_mirror'); 243 assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); 244 assert_less_than(container.offsetTop, content.offsetTop, "content position"); 245 let reference = document.getElementById('content_auto_stable'); 246 assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\""); 247 }, "overflow hidden, scrollbar-gutter stable both-edges"); 248 249 test(function () { 250 let container = document.getElementById('container_clip_stable_mirror'); 251 let content = document.getElementById('content_clip_stable_mirror'); 252 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 253 assert_equals(container.offsetTop, content.offsetTop, "content position"); 254 }, "overflow clip, scrollbar-gutter stable both-edges"); 255 256 done(); 257 258 </script> 259 </body>