overflow-alignment-flex-row-wrap-overflow-001.html (44216B)
1 <!DOCTYPE html> 2 <!-- No, you should not convert this test to testharness.js. --> 3 <html class="reftest-wait"> 4 <title>Scrollable Area of Multiline Row Flex Containers with Overflow 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 margin: -24px; 30 } 31 .indicator > div { 32 width: 24px; 33 height: 24px; 34 } 35 .indicator > .tl { background: teal; float: left; } 36 .indicator > .tc { background: lightblue; float: left; } 37 .indicator > .tr { background: aqua; float: right; } 38 .indicator > .cl { background: gold; float: left; clear: both; } 39 .indicator > .cc { background: orange; float: left; } 40 .indicator > .cr { background: yellow; float: right; } 41 .indicator > .bl { background: fuchsia; float: left; clear: both; } 42 .indicator > .bc { background: thistle; float: left; } 43 .indicator > .br { background: purple; float: right; } 44 .indicator > [class] { xbackground: red; } /* Remove for debugging */ 45 46 /* Create a test box containing a smaller box containing the overflowing indicator */ 47 .test { /* Expand for debugging */ 48 width: 24px; 49 height: 24px; 50 overflow: scroll; 51 display: flex; 52 flex-flow: row wrap; 53 } 54 .test > div { 55 width: 24px; 56 height: 24px; 57 flex: none; 58 } 59 .align-start .test { place-content: start; } 60 .align-center .test { place-content: center; } 61 .align-end .test { place-content: end; } 62 .align-safe-center .test { place-content: safe center; } 63 .align-safe-end .test { place-content: safe end; } 64 .align-unsafe-center .test { place-content: unsafe center; } 65 .align-unsafe-end .test { place-content: unsafe end; } 66 .ltr { direction: ltr; } 67 .rtl { direction: rtl; } 68 .htb { writing-mode: horizontal-tb; } 69 .vrl { writing-mode: vertical-rl; } 70 .vlr { writing-mode: vertical-lr; } 71 .no-scroll { overflow: hidden; } 72 73 /* Pass Conditions */ /* Remove for debugging */ 74 .no-scroll .cc { background: green; } 75 76 .scroll-TL.ltr.htb .cc { background: green; } 77 .scroll-TL.ltr.vrl .cl { background: green; } 78 .scroll-TL.ltr.vlr .cc { background: green; } 79 .scroll-TL.rtl.htb .cl { background: green; } 80 .scroll-TL.rtl.vrl .tl { background: green; } 81 .scroll-TL.rtl.vlr .tc { background: green; } 82 83 .scroll-BR.ltr.htb .br { background: green; } 84 .scroll-BR.ltr.vrl .bc { background: green; } 85 .scroll-BR.ltr.vlr .br { background: green; } 86 .scroll-BR.rtl.htb .bc { background: green; } 87 .scroll-BR.rtl.vrl .cc { background: green; } 88 .scroll-BR.rtl.vlr .cr { 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="align-start"> 112 <td> 113 <div class="test ltr htb no-scroll"><div class="container"><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></div> 114 <td> 115 <div class="test ltr vrl no-scroll"><div class="container"><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></div> 116 <td> 117 <div class="test ltr vlr no-scroll"><div class="container"><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></div> 118 <td> 119 <div class="test rtl htb no-scroll"><div class="container"><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></div> 120 <td> 121 <div class="test rtl vrl no-scroll"><div class="container"><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></div> 122 <td> 123 <div class="test rtl vlr no-scroll"><div class="container"><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></div> 124 <th scope=row> 125 start 126 127 128 <tr class="align-safe-center"> 129 <td> 130 <div class="test ltr htb no-scroll"><div class="container"><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></div> 131 <td> 132 <div class="test ltr vrl no-scroll"><div class="container"><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></div> 133 <td> 134 <div class="test ltr vlr no-scroll"><div class="container"><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></div> 135 <td> 136 <div class="test rtl htb no-scroll"><div class="container"><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></div> 137 <td> 138 <div class="test rtl vrl no-scroll"><div class="container"><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></div> 139 <td> 140 <div class="test rtl vlr no-scroll"><div class="container"><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></div> 141 <th scope=row> 142 safe center 143 144 145 <tr class="align-safe-end"> 146 <td> 147 <div class="test ltr htb no-scroll"><div class="container"><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></div> 148 <td> 149 <div class="test ltr vrl no-scroll"><div class="container"><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></div> 150 <td> 151 <div class="test ltr vlr no-scroll"><div class="container"><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></div> 152 <td> 153 <div class="test rtl htb no-scroll"><div class="container"><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></div> 154 <td> 155 <div class="test rtl vrl no-scroll"><div class="container"><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></div> 156 <td> 157 <div class="test rtl vlr no-scroll"><div class="container"><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></div> 158 <th scope=row> 159 safe end 160 161 <tr class="align-center"> 162 <td> 163 <div class="test ltr htb no-scroll"><div class="container"><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></div> 164 <td> 165 <div class="test ltr vrl no-scroll"><div class="container"><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></div> 166 <td> 167 <div class="test ltr vlr no-scroll"><div class="container"><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></div> 168 <td> 169 <div class="test rtl htb no-scroll"><div class="container"><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></div> 170 <td> 171 <div class="test rtl vrl no-scroll"><div class="container"><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></div> 172 <td> 173 <div class="test rtl vlr no-scroll"><div class="container"><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></div> 174 <th scope=row> 175 center 176 177 178 <tr class="align-end"> 179 <td> 180 <div class="test ltr htb no-scroll"><div class="container"><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></div> 181 <td> 182 <div class="test ltr vrl no-scroll"><div class="container"><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></div> 183 <td> 184 <div class="test ltr vlr no-scroll"><div class="container"><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></div> 185 <td> 186 <div class="test rtl htb no-scroll"><div class="container"><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></div> 187 <td> 188 <div class="test rtl vrl no-scroll"><div class="container"><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></div> 189 <td> 190 <div class="test rtl vlr no-scroll"><div class="container"><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></div> 191 <th scope=row> 192 end 193 194 <tr class="align-unsafe-center"> 195 <td> 196 <div class="test ltr htb no-scroll"><div class="container"><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></div> 197 <td> 198 <div class="test ltr vrl no-scroll"><div class="container"><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></div> 199 <td> 200 <div class="test ltr vlr no-scroll"><div class="container"><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></div> 201 <td> 202 <div class="test rtl htb no-scroll"><div class="container"><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></div> 203 <td> 204 <div class="test rtl vrl no-scroll"><div class="container"><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></div> 205 <td> 206 <div class="test rtl vlr no-scroll"><div class="container"><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></div> 207 <th scope=row> 208 unsafe center 209 210 <tr class="align-unsafe-end"> 211 <td> 212 <div class="test ltr htb no-scroll"><div class="container"><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></div> 213 <td> 214 <div class="test ltr vrl no-scroll"><div class="container"><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></div> 215 <td> 216 <div class="test ltr vlr no-scroll"><div class="container"><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></div> 217 <td> 218 <div class="test rtl htb no-scroll"><div class="container"><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></div> 219 <td> 220 <div class="test rtl vrl no-scroll"><div class="container"><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></div> 221 <td> 222 <div class="test rtl vlr no-scroll"><div class="container"><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></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="align-start"> 232 <td> 233 <div class="test ltr htb scroll-TL"><div class="container"><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></div> 234 <td> 235 <div class="test ltr vrl scroll-TL"><div class="container"><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></div> 236 <td> 237 <div class="test ltr vlr scroll-TL"><div class="container"><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></div> 238 <td> 239 <div class="test rtl htb scroll-TL"><div class="container"><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></div> 240 <td> 241 <div class="test rtl vrl scroll-TL"><div class="container"><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></div> 242 <td> 243 <div class="test rtl vlr scroll-TL"><div class="container"><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></div> 244 <th scope=row> 245 start 246 247 248 <tr class="align-safe-center"> 249 <td> 250 <div class="test ltr htb scroll-TL"><div class="container"><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></div> 251 <td> 252 <div class="test ltr vrl scroll-TL"><div class="container"><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></div> 253 <td> 254 <div class="test ltr vlr scroll-TL"><div class="container"><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></div> 255 <td> 256 <div class="test rtl htb scroll-TL"><div class="container"><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></div> 257 <td> 258 <div class="test rtl vrl scroll-TL"><div class="container"><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></div> 259 <td> 260 <div class="test rtl vlr scroll-TL"><div class="container"><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></div> 261 <th scope=row> 262 safe center 263 264 265 <tr class="align-safe-end"> 266 <td> 267 <div class="test ltr htb scroll-TL"><div class="container"><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></div> 268 <td> 269 <div class="test ltr vrl scroll-TL"><div class="container"><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></div> 270 <td> 271 <div class="test ltr vlr scroll-TL"><div class="container"><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></div> 272 <td> 273 <div class="test rtl htb scroll-TL"><div class="container"><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></div> 274 <td> 275 <div class="test rtl vrl scroll-TL"><div class="container"><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></div> 276 <td> 277 <div class="test rtl vlr scroll-TL"><div class="container"><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></div> 278 <th scope=row> 279 safe end 280 281 <tr class="align-center"> 282 <td> 283 <div class="test ltr htb scroll-TL"><div class="container"><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></div> 284 <td> 285 <div class="test ltr vrl scroll-TL"><div class="container"><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></div> 286 <td> 287 <div class="test ltr vlr scroll-TL"><div class="container"><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></div> 288 <td> 289 <div class="test rtl htb scroll-TL"><div class="container"><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></div> 290 <td> 291 <div class="test rtl vrl scroll-TL"><div class="container"><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></div> 292 <td> 293 <div class="test rtl vlr scroll-TL"><div class="container"><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></div> 294 <th scope=row> 295 center 296 297 298 <tr class="align-end"> 299 <td> 300 <div class="test ltr htb scroll-TL"><div class="container"><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></div> 301 <td> 302 <div class="test ltr vrl scroll-TL"><div class="container"><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></div> 303 <td> 304 <div class="test ltr vlr scroll-TL"><div class="container"><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></div> 305 <td> 306 <div class="test rtl htb scroll-TL"><div class="container"><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></div> 307 <td> 308 <div class="test rtl vrl scroll-TL"><div class="container"><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></div> 309 <td> 310 <div class="test rtl vlr scroll-TL"><div class="container"><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></div> 311 <th scope=row> 312 end 313 314 <tr class="align-unsafe-center"> 315 <td> 316 <div class="test ltr htb scroll-TL"><div class="container"><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></div> 317 <td> 318 <div class="test ltr vrl scroll-TL"><div class="container"><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></div> 319 <td> 320 <div class="test ltr vlr scroll-TL"><div class="container"><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></div> 321 <td> 322 <div class="test rtl htb scroll-TL"><div class="container"><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></div> 323 <td> 324 <div class="test rtl vrl scroll-TL"><div class="container"><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></div> 325 <td> 326 <div class="test rtl vlr scroll-TL"><div class="container"><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></div> 327 <th scope=row> 328 unsafe center 329 330 <tr class="align-unsafe-end"> 331 <td> 332 <div class="test ltr htb scroll-TL"><div class="container"><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></div> 333 <td> 334 <div class="test ltr vrl scroll-TL"><div class="container"><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></div> 335 <td> 336 <div class="test ltr vlr scroll-TL"><div class="container"><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></div> 337 <td> 338 <div class="test rtl htb scroll-TL"><div class="container"><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></div> 339 <td> 340 <div class="test rtl vrl scroll-TL"><div class="container"><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></div> 341 <td> 342 <div class="test rtl vlr scroll-TL"><div class="container"><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></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="align-start"> 353 <td> 354 <div class="test ltr htb scroll-BR"><div class="container"><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></div> 355 <td> 356 <div class="test ltr vrl scroll-BR"><div class="container"><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></div> 357 <td> 358 <div class="test ltr vlr scroll-BR"><div class="container"><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></div> 359 <td> 360 <div class="test rtl htb scroll-BR"><div class="container"><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></div> 361 <td> 362 <div class="test rtl vrl scroll-BR"><div class="container"><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></div> 363 <td> 364 <div class="test rtl vlr scroll-BR"><div class="container"><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></div> 365 <th scope=row> 366 start 367 368 369 <tr class="align-safe-center"> 370 <td> 371 <div class="test ltr htb scroll-BR"><div class="container"><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></div> 372 <td> 373 <div class="test ltr vrl scroll-BR"><div class="container"><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></div> 374 <td> 375 <div class="test ltr vlr scroll-BR"><div class="container"><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></div> 376 <td> 377 <div class="test rtl htb scroll-BR"><div class="container"><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></div> 378 <td> 379 <div class="test rtl vrl scroll-BR"><div class="container"><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></div> 380 <td> 381 <div class="test rtl vlr scroll-BR"><div class="container"><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></div> 382 <th scope=row> 383 safe center 384 385 386 <tr class="align-safe-end"> 387 <td> 388 <div class="test ltr htb scroll-BR"><div class="container"><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></div> 389 <td> 390 <div class="test ltr vrl scroll-BR"><div class="container"><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></div> 391 <td> 392 <div class="test ltr vlr scroll-BR"><div class="container"><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></div> 393 <td> 394 <div class="test rtl htb scroll-BR"><div class="container"><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></div> 395 <td> 396 <div class="test rtl vrl scroll-BR"><div class="container"><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></div> 397 <td> 398 <div class="test rtl vlr scroll-BR"><div class="container"><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></div> 399 <th scope=row> 400 safe end 401 402 <tr class="align-center"> 403 <td> 404 <div class="test ltr htb scroll-BR"><div class="container"><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></div> 405 <td> 406 <div class="test ltr vrl scroll-BR"><div class="container"><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></div> 407 <td> 408 <div class="test ltr vlr scroll-BR"><div class="container"><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></div> 409 <td> 410 <div class="test rtl htb scroll-BR"><div class="container"><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></div> 411 <td> 412 <div class="test rtl vrl scroll-BR"><div class="container"><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></div> 413 <td> 414 <div class="test rtl vlr scroll-BR"><div class="container"><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></div> 415 <th scope=row> 416 center 417 418 419 <tr class="align-end"> 420 <td> 421 <div class="test ltr htb scroll-BR"><div class="container"><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></div> 422 <td> 423 <div class="test ltr vrl scroll-BR"><div class="container"><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></div> 424 <td> 425 <div class="test ltr vlr scroll-BR"><div class="container"><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></div> 426 <td> 427 <div class="test rtl htb scroll-BR"><div class="container"><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></div> 428 <td> 429 <div class="test rtl vrl scroll-BR"><div class="container"><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></div> 430 <td> 431 <div class="test rtl vlr scroll-BR"><div class="container"><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></div> 432 <th scope=row> 433 end 434 435 <tr class="align-unsafe-center"> 436 <td> 437 <div class="test ltr htb scroll-BR"><div class="container"><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></div> 438 <td> 439 <div class="test ltr vrl scroll-BR"><div class="container"><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></div> 440 <td> 441 <div class="test ltr vlr scroll-BR"><div class="container"><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></div> 442 <td> 443 <div class="test rtl htb scroll-BR"><div class="container"><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></div> 444 <td> 445 <div class="test rtl vrl scroll-BR"><div class="container"><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></div> 446 <td> 447 <div class="test rtl vlr scroll-BR"><div class="container"><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></div> 448 <th scope=row> 449 unsafe center 450 451 <tr class="align-unsafe-end"> 452 <td> 453 <div class="test ltr htb scroll-BR"><div class="container"><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></div> 454 <td> 455 <div class="test ltr vrl scroll-BR"><div class="container"><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></div> 456 <td> 457 <div class="test ltr vlr scroll-BR"><div class="container"><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></div> 458 <td> 459 <div class="test rtl htb scroll-BR"><div class="container"><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></div> 460 <td> 461 <div class="test rtl vrl scroll-BR"><div class="container"><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></div> 462 <td> 463 <div class="test rtl vlr scroll-BR"><div class="container"><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></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>