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