overflow-alignment-grid-001.html (40613B)
1 <!DOCTYPE html> 2 <!-- No, you should not convert this test to testharness.js. --> 3 <html class="reftest-wait"> 4 <title>Scrollable Area of Grid Containers with Content Alignment Start/Center/End</title> 5 <link rel="help" href="https://www.w3.org/TR/css-align/#overflow-scroll-position"> 6 <link rel="help" href="https://www.w3.org/TR/css-overflow/#scrollable"> 7 <link rel="help" href="https://www.w3.org/TR/css-writing-modes/"> 8 <link rel="author" href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad"> 9 10 <style> 11 /* Cram Tests */ 12 body { height: 600px; border-bottom: solid orange; } /* Reftest Max Size. Do not exceed this line. */ 13 html { font-size: 10px; } 14 th, td { padding: 0; } 15 16 /* Styling/Readability */ 17 abbr, th[scope=row] { font-variant: small-caps; text-transform: lowercase; color: gray; } 18 thead { display: table-footer-group; } 19 caption { font-weight: bold; caption-side: bottom; } 20 /* Note: Annotations are at the bottom / right to avoid using up checked reftest area. */ 21 22 /* Create an overflowing box with a 9-grid of colors */ 23 .indicator { 24 width: 72px; 25 height: 72px; 26 writing-mode: horizontal-tb; 27 direction: ltr; 28 } 29 .indicator > div { 30 width: 24px; 31 height: 24px; 32 } 33 .indicator > .tl { background: teal; float: left; } 34 .indicator > .tc { background: lightblue; float: left; } 35 .indicator > .tr { background: aqua; float: right; } 36 .indicator > .cl { background: gold; float: left; clear: both; } 37 .indicator > .cc { background: orange; float: left; } 38 .indicator > .cr { background: yellow; float: right; } 39 .indicator > .bl { background: fuchsia; float: left; clear: both; } 40 .indicator > .bc { background: thistle; float: left; } 41 .indicator > .br { background: purple; float: right; } 42 .indicator > [class] { background: red; } /* Remove for debugging */ 43 44 /* Create a test box containing the overflowing indicator */ 45 .test { /* Expand for debugging */ 46 width: 24px; 47 height: 24px; 48 overflow: scroll; 49 display: grid; 50 } 51 .align-start .test { place-content: start; } 52 .align-center .test { place-content: center; } 53 .align-end .test { place-content: end; } 54 .align-safe-center .test { place-content: safe center; } 55 .align-safe-end .test { place-content: safe end; } 56 .align-unsafe-center .test { place-content: unsafe center; } 57 .align-unsafe-end .test { place-content: unsafe end; } 58 .ltr { direction: ltr; } 59 .rtl { direction: rtl; } 60 .htb { writing-mode: horizontal-tb; } 61 .vrl { writing-mode: vertical-rl; } 62 .vlr { writing-mode: vertical-lr; } 63 .no-scroll { overflow: hidden; } 64 65 /* Pass Conditions */ /* Remove for debugging */ 66 .scroll-TL .tl { background: green; } 67 .scroll-BR .br { background: green; } 68 69 .start .no-scroll.ltr.htb .tl, 70 .start .no-scroll.ltr.vrl .tr, 71 .start .no-scroll.ltr.vlr .tl, 72 .start .no-scroll.rtl.htb .tr, 73 .start .no-scroll.rtl.vrl .br, 74 .start .no-scroll.rtl.vlr .bl { background: green; } 75 76 .center .no-scroll.ltr.htb .cc, 77 .center .no-scroll.ltr.vrl .cc, 78 .center .no-scroll.ltr.vlr .cc, 79 .center .no-scroll.rtl.htb .cc, 80 .center .no-scroll.rtl.vrl .cc, 81 .center .no-scroll.rtl.vlr .cc { background: green; } 82 83 .end .no-scroll.ltr.htb .br, 84 .end .no-scroll.ltr.vrl .bl, 85 .end .no-scroll.ltr.vlr .br, 86 .end .no-scroll.rtl.htb .bl, 87 .end .no-scroll.rtl.vrl .tl, 88 .end .no-scroll.rtl.vlr .tr { background: green; } 89 </style> 90 91 <table> 92 <caption>Each box must be completely green.</caption> 93 <thead> 94 <tr> 95 <th colspan=3><abbr title="direction: ltr">LTR</abbr> 96 <th colspan=3><abbr title="direction: rtl">RTL</abbr> 97 <tr> 98 <th><abbr title="writing-mode: horizontal-tb">HTB</abbr> 99 <th><abbr title="writing-mode: vertical-rl">VRL</abbr> 100 <th><abbr title="writing-mode: vertical-lr">VLR</abbr> 101 102 <th><abbr title="writing-mode: horizontal-tb">HTB</abbr> 103 <th><abbr title="writing-mode: vertical-rl">VRL</abbr> 104 <th><abbr title="writing-mode: vertical-lr">VLR</abbr> 105 106 107 <tbody> 108 <tr> 109 <th colspan=6 scope=rowgroup>Do not scroll any box below. 110 111 <tr class="start align-start"> 112 <td> 113 <div class="test ltr htb no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 114 <td> 115 <div class="test ltr vrl no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 116 <td> 117 <div class="test ltr vlr no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 118 <td> 119 <div class="test rtl htb no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 120 <td> 121 <div class="test rtl vrl no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 122 <td> 123 <div class="test rtl vlr no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 124 <th scope=row> 125 start 126 127 128 <tr class="start align-safe-center"> 129 <td> 130 <div class="test ltr htb no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 131 <td> 132 <div class="test ltr vrl no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 133 <td> 134 <div class="test ltr vlr no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 135 <td> 136 <div class="test rtl htb no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 137 <td> 138 <div class="test rtl vrl no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 139 <td> 140 <div class="test rtl vlr no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 141 <th scope=row> 142 safe center 143 144 145 <tr class="start align-safe-end"> 146 <td> 147 <div class="test ltr htb no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 148 <td> 149 <div class="test ltr vrl no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 150 <td> 151 <div class="test ltr vlr no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 152 <td> 153 <div class="test rtl htb no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 154 <td> 155 <div class="test rtl vrl no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 156 <td> 157 <div class="test rtl vlr no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 158 <th scope=row> 159 safe end 160 161 <tr class="center align-center"> 162 <td> 163 <div class="test ltr htb no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 164 <td> 165 <div class="test ltr vrl no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 166 <td> 167 <div class="test ltr vlr no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 168 <td> 169 <div class="test rtl htb no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 170 <td> 171 <div class="test rtl vrl no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 172 <td> 173 <div class="test rtl vlr no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 174 <th scope=row> 175 center 176 177 178 <tr class="end align-end"> 179 <td> 180 <div class="test ltr htb no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 181 <td> 182 <div class="test ltr vrl no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 183 <td> 184 <div class="test ltr vlr no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 185 <td> 186 <div class="test rtl htb no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 187 <td> 188 <div class="test rtl vrl no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 189 <td> 190 <div class="test rtl vlr no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 191 <th scope=row> 192 end 193 194 <tr class="center align-unsafe-center"> 195 <td> 196 <div class="test ltr htb no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 197 <td> 198 <div class="test ltr vrl no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 199 <td> 200 <div class="test ltr vlr no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 201 <td> 202 <div class="test rtl htb no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 203 <td> 204 <div class="test rtl vrl no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 205 <td> 206 <div class="test rtl vlr no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 207 <th scope=row> 208 unsafe center 209 210 <tr class="end align-unsafe-end"> 211 <td> 212 <div class="test ltr htb no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 213 <td> 214 <div class="test ltr vrl no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 215 <td> 216 <div class="test ltr vlr no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 217 <td> 218 <div class="test rtl htb no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 219 <td> 220 <div class="test rtl vrl no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 221 <td> 222 <div class="test rtl vlr no-scroll"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 223 <th scope=row> 224 unsafe end 225 226 <tbody> 227 <tr> 228 <th colspan=6 scope=rowgroup>Scroll each box below to the top left. 229 <th> 230 231 <tr class="start align-start"> 232 <td> 233 <div class="test ltr htb scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 234 <td> 235 <div class="test ltr vrl scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 236 <td> 237 <div class="test ltr vlr scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 238 <td> 239 <div class="test rtl htb scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 240 <td> 241 <div class="test rtl vrl scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 242 <td> 243 <div class="test rtl vlr scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 244 <th scope=row> 245 start 246 247 248 <tr class="start align-safe-center"> 249 <td> 250 <div class="test ltr htb scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 251 <td> 252 <div class="test ltr vrl scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 253 <td> 254 <div class="test ltr vlr scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 255 <td> 256 <div class="test rtl htb scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 257 <td> 258 <div class="test rtl vrl scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 259 <td> 260 <div class="test rtl vlr scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 261 <th scope=row> 262 safe center 263 264 265 <tr class="start align-safe-end"> 266 <td> 267 <div class="test ltr htb scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 268 <td> 269 <div class="test ltr vrl scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 270 <td> 271 <div class="test ltr vlr scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 272 <td> 273 <div class="test rtl htb scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 274 <td> 275 <div class="test rtl vrl scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 276 <td> 277 <div class="test rtl vlr scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 278 <th scope=row> 279 safe end 280 281 <tr class="center align-center"> 282 <td> 283 <div class="test ltr htb scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 284 <td> 285 <div class="test ltr vrl scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 286 <td> 287 <div class="test ltr vlr scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 288 <td> 289 <div class="test rtl htb scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 290 <td> 291 <div class="test rtl vrl scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 292 <td> 293 <div class="test rtl vlr scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 294 <th scope=row> 295 center 296 297 298 <tr class="end align-end"> 299 <td> 300 <div class="test ltr htb scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 301 <td> 302 <div class="test ltr vrl scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 303 <td> 304 <div class="test ltr vlr scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 305 <td> 306 <div class="test rtl htb scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 307 <td> 308 <div class="test rtl vrl scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 309 <td> 310 <div class="test rtl vlr scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 311 <th scope=row> 312 end 313 314 <tr class="center align-unsafe-center"> 315 <td> 316 <div class="test ltr htb scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 317 <td> 318 <div class="test ltr vrl scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 319 <td> 320 <div class="test ltr vlr scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 321 <td> 322 <div class="test rtl htb scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 323 <td> 324 <div class="test rtl vrl scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 325 <td> 326 <div class="test rtl vlr scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 327 <th scope=row> 328 unsafe center 329 330 <tr class="end align-unsafe-end"> 331 <td> 332 <div class="test ltr htb scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 333 <td> 334 <div class="test ltr vrl scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 335 <td> 336 <div class="test ltr vlr scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 337 <td> 338 <div class="test rtl htb scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 339 <td> 340 <div class="test rtl vrl scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 341 <td> 342 <div class="test rtl vlr scroll-TL"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 343 <th scope=row> 344 unsafe end 345 346 347 <tbody> 348 <tr> 349 <th colspan=6 scope=rowgroup>Scroll each box below to the bottom right. 350 <th> 351 352 <tr class="start align-start"> 353 <td> 354 <div class="test ltr htb scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 355 <td> 356 <div class="test ltr vrl scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 357 <td> 358 <div class="test ltr vlr scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 359 <td> 360 <div class="test rtl htb scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 361 <td> 362 <div class="test rtl vrl scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 363 <td> 364 <div class="test rtl vlr scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 365 <th scope=row> 366 start 367 368 369 <tr class="start align-safe-center"> 370 <td> 371 <div class="test ltr htb scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 372 <td> 373 <div class="test ltr vrl scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 374 <td> 375 <div class="test ltr vlr scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 376 <td> 377 <div class="test rtl htb scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 378 <td> 379 <div class="test rtl vrl scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 380 <td> 381 <div class="test rtl vlr scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 382 <th scope=row> 383 safe center 384 385 386 <tr class="start align-safe-end"> 387 <td> 388 <div class="test ltr htb scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 389 <td> 390 <div class="test ltr vrl scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 391 <td> 392 <div class="test ltr vlr scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 393 <td> 394 <div class="test rtl htb scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 395 <td> 396 <div class="test rtl vrl scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 397 <td> 398 <div class="test rtl vlr scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 399 <th scope=row> 400 safe end 401 402 <tr class="center align-center"> 403 <td> 404 <div class="test ltr htb scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 405 <td> 406 <div class="test ltr vrl scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 407 <td> 408 <div class="test ltr vlr scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 409 <td> 410 <div class="test rtl htb scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 411 <td> 412 <div class="test rtl vrl scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 413 <td> 414 <div class="test rtl vlr scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 415 <th scope=row> 416 center 417 418 419 <tr class="end align-end"> 420 <td> 421 <div class="test ltr htb scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 422 <td> 423 <div class="test ltr vrl scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 424 <td> 425 <div class="test ltr vlr scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 426 <td> 427 <div class="test rtl htb scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 428 <td> 429 <div class="test rtl vrl scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 430 <td> 431 <div class="test rtl vlr scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 432 <th scope=row> 433 end 434 435 <tr class="center align-unsafe-center"> 436 <td> 437 <div class="test ltr htb scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 438 <td> 439 <div class="test ltr vrl scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 440 <td> 441 <div class="test ltr vlr scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 442 <td> 443 <div class="test rtl htb scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 444 <td> 445 <div class="test rtl vrl scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 446 <td> 447 <div class="test rtl vlr scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 448 <th scope=row> 449 unsafe center 450 451 <tr class="end align-unsafe-end"> 452 <td> 453 <div class="test ltr htb scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 454 <td> 455 <div class="test ltr vrl scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 456 <td> 457 <div class="test ltr vlr scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 458 <td> 459 <div class="test rtl htb scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 460 <td> 461 <div class="test rtl vrl scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 462 <td> 463 <div class="test rtl vlr scroll-BR"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div> 464 <th scope=row> 465 unsafe end 466 </table> 467 468 <script> 469 function test(isReftest) 470 { 471 // Simplify reftest reference by removing scrollbars 472 if (isReftest) { 473 scrollers = document.getElementsByClassName('test'); 474 for (let s of scrollers) { 475 s.style.overflow = "hidden"; 476 } 477 } 478 479 // Trigger layout 480 document.body.offsetHeight; 481 482 // Scroll to the top left 483 var scrollers = document.getElementsByClassName('scroll-TL'); 484 for (let s of scrollers) { 485 s.scrollTop = -1000; 486 s.scrollLeft = -1000; 487 } 488 489 // Scroll to the bottom right 490 scrollers = document.getElementsByClassName('scroll-BR'); 491 for (let s of scrollers) { 492 s.scrollTop = 1000; 493 s.scrollLeft = 1000; 494 } 495 496 document.body.offsetHeight; // trigger layout 497 498 document.documentElement.removeAttribute("class"); 499 }; 500 document.addEventListener("TestRendered", function(){ test(true); }); 501 window.addEventListener("load", function(){ test(false); }); // for manual inspection 502 </script>