scrollbar-gutter-vertical-rl-001.html (10554B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: test scrollbar-gutter with vertical right to left 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-rl; 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 138 setup({ explicit_done: true }); 139 140 // scrollbar-gutter: auto 141 142 test(function () { 143 let container = document.getElementById('container_auto_auto'); 144 let content = document.getElementById('content_auto_auto'); 145 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 146 assert_equals(container.offsetTop, content.offsetTop, "content position"); 147 }, "overflow auto, scrollbar-gutter auto"); 148 149 test(function () { 150 let container = document.getElementById('container_scroll_auto'); 151 let content = document.getElementById('content_scroll_auto'); 152 assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); 153 assert_equals(container.offsetTop, content.offsetTop, "content position"); 154 }, "overflow scroll, scrollbar-gutter auto"); 155 156 test(function () { 157 let container = document.getElementById('container_visible_auto'); 158 let content = document.getElementById('content_visible_auto'); 159 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 160 assert_equals(container.offsetTop, content.offsetTop, "content position"); 161 }, "overflow visible, scrollbar-gutter auto"); 162 163 test(function () { 164 let container = document.getElementById('container_hidden_auto'); 165 let content = document.getElementById('content_hidden_auto'); 166 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 167 assert_equals(container.offsetTop, content.offsetTop, "content position"); 168 }, "overflow hidden, scrollbar-gutter auto"); 169 170 test(function () { 171 let container = document.getElementById('container_clip_auto'); 172 let content = document.getElementById('content_clip_auto'); 173 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 174 assert_equals(container.offsetTop, content.offsetTop, "content position"); 175 }, "overflow clip, scrollbar-gutter auto"); 176 177 // scrollbar-gutter: stable 178 179 test(function () { 180 let container = document.getElementById('container_auto_stable'); 181 let content = document.getElementById('content_auto_stable'); 182 assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); 183 assert_equals(container.offsetTop, content.offsetTop, "content position"); 184 }, "overflow auto, scrollbar-gutter stable"); 185 186 test(function () { 187 let container = document.getElementById('container_scroll_stable'); 188 let content = document.getElementById('content_scroll_stable'); 189 assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); 190 assert_equals(container.offsetTop, content.offsetTop, "content position"); 191 }, "overflow scroll, scrollbar-gutter stable"); 192 193 test(function () { 194 let container = document.getElementById('container_visible_stable'); 195 let content = document.getElementById('content_visible_stable'); 196 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 197 assert_equals(container.offsetTop, content.offsetTop, "content position"); 198 }, "overflow visible, scrollbar-gutter stable"); 199 200 test(function () { 201 let container = document.getElementById('container_hidden_stable'); 202 let content = document.getElementById('content_hidden_stable'); 203 assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); 204 assert_equals(container.offsetTop, content.offsetTop, "content position"); 205 }, "overflow hidden, scrollbar-gutter stable"); 206 207 test(function () { 208 let container = document.getElementById('container_clip_stable'); 209 let content = document.getElementById('content_clip_stable'); 210 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 211 assert_equals(container.offsetTop, content.offsetTop, "content position"); 212 }, "overflow clip, scrollbar-gutter stable"); 213 214 // scrollbar-gutter: stable both-edges 215 216 test(function () { 217 let container = document.getElementById('container_auto_stable_mirror'); 218 let content = document.getElementById('content_auto_stable_mirror'); 219 assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); 220 assert_less_than(container.offsetTop, content.offsetTop, "content position"); 221 let reference = document.getElementById('content_auto_stable'); 222 assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\""); 223 }, "overflow auto, scrollbar-gutter stable both-edges"); 224 225 test(function () { 226 let container = document.getElementById('container_scroll_stable_mirror'); 227 let content = document.getElementById('content_scroll_stable_mirror'); 228 assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); 229 assert_less_than(container.offsetTop, content.offsetTop, "content position"); 230 let reference = document.getElementById('content_auto_stable'); 231 assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\""); 232 }, "overflow scroll, scrollbar-gutter stable both-edges"); 233 234 test(function () { 235 let container = document.getElementById('container_visible_stable_mirror'); 236 let content = document.getElementById('content_visible_stable_mirror'); 237 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 238 assert_equals(container.offsetTop, content.offsetTop, "content position"); 239 }, "overflow visible, scrollbar-gutter stable both-edges"); 240 241 test(function () { 242 let container = document.getElementById('container_hidden_stable_mirror'); 243 let content = document.getElementById('content_hidden_stable_mirror'); 244 assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); 245 assert_less_than(container.offsetTop, content.offsetTop, "content position"); 246 let reference = document.getElementById('content_auto_stable'); 247 assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\""); 248 }, "overflow hidden, scrollbar-gutter stable both-edges"); 249 250 test(function () { 251 let container = document.getElementById('container_clip_stable_mirror'); 252 let content = document.getElementById('content_clip_stable_mirror'); 253 assert_equals(container.offsetHeight, content.offsetHeight, "content height"); 254 assert_equals(container.offsetTop, content.offsetTop, "content position"); 255 }, "overflow clip, scrollbar-gutter stable both-edges"); 256 257 done(); 258 259 </script> 260 </body>