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