grid-content-alignment-and-self-alignment-002.html (31372B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Grid Layout Test: content distribution alignment and self alignment.</title> 5 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks"> 8 <link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> 9 <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> 10 <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> 11 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=602670"> 12 <link rel="stylesheet" href="/css/support/alignment.css"> 13 <link rel="stylesheet" href="/css/support/grid.css"> 14 <meta name="assert" content="Test that content distribution alignment works fine in combination with self alignment and items spanning more than one track." /> 15 16 <style> 17 body { 18 margin: 0px; 19 } 20 21 .grid { 22 position: relative; 23 } 24 .spanningTwo { 25 grid-auto-columns: 20px; 26 grid-auto-rows: 40px; 27 grid-template-areas: "a a b" 28 "c d b"; 29 width: 300px; 30 height: 200px; 31 } 32 .spanningThree { 33 grid-auto-columns: 50px; 34 grid-auto-rows: 50px; 35 grid-template-areas: ". . . . . ." 36 ". b b b c ." 37 ". . . . c ." 38 ". . . . c ." 39 ". . . . . ."; 40 width: 550px; 41 height: 450px; 42 } 43 44 .gridRowColumnGaps { 45 grid-row-gap: 20px; 46 grid-column-gap: 10px; 47 } 48 49 .i1 { grid-row: 1; } 50 .i2 { grid-row: 2; } 51 .i3 { grid-row: 3; grid-column: 6; } 52 .i4 { grid-row: 4; grid-column: 6; } 53 .i5 { grid-row: 5; grid-column: 6; } 54 55 .a { 56 grid-area: a; 57 background-color: blue; 58 } 59 .b { 60 grid-area: b; 61 background-color: lime; 62 } 63 .c { 64 grid-area: c; 65 background-color: purple; 66 } 67 .d { 68 grid-area: d; 69 background-color: orange; 70 } 71 .stretchedGrid { 72 grid-auto-columns: minmax(20px, auto); 73 grid-auto-rows: minmax(40px, auto); 74 } 75 76 .cell { 77 width: 20px; 78 height: 40px; 79 } 80 .cell1 { 81 width: 20px; 82 height: 20px; 83 } 84 </style> 85 </head> 86 87 <script src="/resources/testharness.js"></script> 88 <script src="/resources/testharnessreport.js"></script> 89 <script src="/resources/check-layout-th.js"></script> 90 91 <body onload="checkLayout('.grid')"> 92 93 <div style="position: relative"> 94 <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p> 95 <div class="grid spanningTwo contentSpaceBetween" data-expected-width="300" data-expected-height="200"> 96 <div class="a cell justifySelfCenter" data-offset-x="70" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 97 <div class="b cell alignSelfCenter" data-offset-x="280" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 98 <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 99 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 100 </div> 101 </div> 102 103 <div style="position: relative"> 104 <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p> 105 <div class="grid spanningTwo contentSpaceBetween" data-expected-width="300" data-expected-height="200"> 106 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 107 <div class="b cell alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 108 <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 109 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 110 </div> 111 </div> 112 113 <div style="position: relative"> 114 <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p> 115 <div class="grid spanningTwo contentSpaceAround" data-expected-width="300" data-expected-height="200"> 116 <div class="a cell justifySelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 117 <div class="b cell alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 118 <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 119 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 120 </div> 121 </div> 122 123 <div style="position: relative"> 124 <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p> 125 <div class="grid spanningTwo contentSpaceAround" data-expected-width="300" data-expected-height="200"> 126 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 127 <div class="b cell alignSelfEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 128 <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 129 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 130 </div> 131 </div> 132 133 <div style="position: relative"> 134 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p> 135 <div class="grid spanningTwo contentSpaceEvenly" data-expected-width="300" data-expected-height="200"> 136 <div class="a cell justifySelfCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div> 137 <div class="b cell alignSelfCenter" data-offset-x="220" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 138 <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 139 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 140 </div> 141 </div> 142 143 <div style="position: relative"> 144 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p> 145 <div class="grid spanningTwo contentSpaceEvenly" data-expected-width="300" data-expected-height="200"> 146 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div> 147 <div class="b cell alignSelfEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 148 <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 149 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 150 </div> 151 </div> 152 153 <div style="position: relative"> 154 <p>direction: LTR | distribution: 'stretch' | self-alignment: center</p> 155 <div class="grid spanningTwo stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200"> 156 <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 157 <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 158 <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 159 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 160 </div> 161 </div> 162 163 <div style="position: relative"> 164 <p>direction: LTR | distribution: 'stretch' | self-alignment: end</p> 165 <div class="grid spanningTwo stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200"> 166 <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="180" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div> 167 <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 168 <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 169 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 170 </div> 171 </div> 172 173 <div style="position: relative"> 174 <p>direction: LTR | distribution: 'default' | self-alignment: center</p> 175 <div class="grid spanningThree"> 176 <div class="i1" style="background: blue"></div> 177 <div class="i1" style="background: red"></div> 178 <div class="i1" style="background: blue"></div> 179 <div class="i1" style="background: red"></div> 180 <div class="i1" style="background: blue"></div> 181 <div class="i1" style="background: red"></div> 182 <div class="i2" style="background: red"></div> 183 <div class="i2" style="background: blue"></div> 184 <div class="b cell1 justifySelfCenter" data-offset-x="115" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div> 185 <div class="c cell1 alignSelfCenter" data-offset-x="200" data-offset-y="115" data-expected-width="20" data-expected-height="20"></div> 186 <div class="i3" style="background: red"></div> 187 <div class="i4" style="background: blue"></div> 188 <div class="i5" style="background: red"></div> 189 </div> 190 </div> 191 192 <div style="position: relative"> 193 <p>direction: LTR | distribution: 'default' | self-alignment: end</p> 194 <div class="grid spanningThree"> 195 <div class="i1" style="background: blue"></div> 196 <div class="i1" style="background: red"></div> 197 <div class="i1" style="background: blue"></div> 198 <div class="i1" style="background: red"></div> 199 <div class="i1" style="background: blue"></div> 200 <div class="i1" style="background: red"></div> 201 <div class="i2" style="background: red"></div> 202 <div class="i2" style="background: blue"></div> 203 <div class="b cell1 justifySelfEnd" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div> 204 <div class="c cell1 alignSelfEnd" data-offset-x="200" data-offset-y="180" data-expected-width="20" data-expected-height="20"></div> 205 <div class="i3" style="background: red"></div> 206 <div class="i4" style="background: blue"></div> 207 <div class="i5" style="background: red"></div> 208 </div> 209 </div> 210 211 <div style="position: relative"> 212 <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p> 213 <div class="grid spanningThree contentSpaceBetween"> 214 <div class="i1" style="background: blue;"></div> 215 <div class="i1" style="background: red"></div> 216 <div class="i1" style="background: blue"></div> 217 <div class="i1" style="background: red"></div> 218 <div class="i1" style="background: blue"></div> 219 <div class="i1" style="background: red"></div> 220 <div class="i2" style="background: red"></div> 221 <div class="i2" style="background: blue"></div> 222 <div class="b cell1 justifySelfCenter" data-offset-x="215" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> 223 <div class="c cell1 alignSelfCenter" data-offset-x="400" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div> 224 <div class="i3" style="background: red"></div> 225 <div class="i4" style="background: blue"></div> 226 <div class="i5" style="background: red"></div> 227 </div> 228 </div> 229 230 <div style="position: relative"> 231 <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p> 232 <div class="grid spanningThree contentSpaceBetween"> 233 <div class="i1" style="background: blue;"></div> 234 <div class="i1" style="background: red"></div> 235 <div class="i1" style="background: blue"></div> 236 <div class="i1" style="background: red"></div> 237 <div class="i1" style="background: blue"></div> 238 <div class="i1" style="background: red"></div> 239 <div class="i2" style="background: red"></div> 240 <div class="i2" style="background: blue"></div> 241 <div class="b cell1 justifySelfEnd" data-offset-x="330" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> 242 <div class="c cell1 alignSelfEnd" data-offset-x="400" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div> 243 <div class="i3" style="background: red"></div> 244 <div class="i4" style="background: blue"></div> 245 <div class="i5" style="background: red"></div> 246 </div> 247 </div> 248 249 <div style="position: relative"> 250 <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: center</p> 251 <div class="grid spanningThree gridRowColumnGaps"> 252 <div class="i1" style="background: blue"></div> 253 <div class="i1" style="background: red"></div> 254 <div class="i1" style="background: blue"></div> 255 <div class="i1" style="background: red"></div> 256 <div class="i1" style="background: blue"></div> 257 <div class="i1" style="background: red"></div> 258 <div class="i2" style="background: red"></div> 259 <div class="i2" style="background: blue"></div> 260 <div class="b cell1 justifySelfCenter" data-offset-x="135" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div> 261 <div class="c cell1 alignSelfCenter" data-offset-x="240" data-offset-y="155" data-expected-width="20" data-expected-height="20"></div> 262 <div class="i3" style="background: red"></div> 263 <div class="i4" style="background: blue"></div> 264 <div class="i5" style="background: red"></div> 265 </div> 266 </div> 267 268 <div style="position: relative"> 269 <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: end</p> 270 <div class="grid spanningThree gridRowColumnGaps"> 271 <div class="i1" style="background: blue"></div> 272 <div class="i1" style="background: red"></div> 273 <div class="i1" style="background: blue"></div> 274 <div class="i1" style="background: red"></div> 275 <div class="i1" style="background: blue"></div> 276 <div class="i1" style="background: red"></div> 277 <div class="i2" style="background: red"></div> 278 <div class="i2" style="background: blue"></div> 279 <div class="b cell1 justifySelfEnd" data-offset-x="210" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div> 280 <div class="c cell1 alignSelfEnd" data-offset-x="240" data-offset-y="240" data-expected-width="20" data-expected-height="20"></div> 281 <div class="i3" style="background: red"></div> 282 <div class="i4" style="background: blue"></div> 283 <div class="i5" style="background: red"></div> 284 </div> 285 </div> 286 287 <!-- Same expected result than without gaps because space-between just use the remaining available space. --> 288 <div style="position: relative"> 289 <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: center</p> 290 <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps"> 291 <div class="i1" style="background: blue;"></div> 292 <div class="i1" style="background: red"></div> 293 <div class="i1" style="background: blue"></div> 294 <div class="i1" style="background: red"></div> 295 <div class="i1" style="background: blue"></div> 296 <div class="i1" style="background: red"></div> 297 <div class="i2" style="background: red"></div> 298 <div class="i2" style="background: blue"></div> 299 <div class="b cell1 justifySelfCenter" data-offset-x="215" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> 300 <div class="c cell1 alignSelfCenter" data-offset-x="400" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div> 301 <div class="i3" style="background: red"></div> 302 <div class="i4" style="background: blue"></div> 303 <div class="i5" style="background: red"></div> 304 </div> 305 </div> 306 307 <!-- Same expected result than without gaps because space-between just use the remaining available space. --> 308 <div style="position: relative"> 309 <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: end</p> 310 <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps"> 311 <div class="i1" style="background: blue;"></div> 312 <div class="i1" style="background: red"></div> 313 <div class="i1" style="background: blue"></div> 314 <div class="i1" style="background: red"></div> 315 <div class="i1" style="background: blue"></div> 316 <div class="i1" style="background: red"></div> 317 <div class="i2" style="background: red"></div> 318 <div class="i2" style="background: blue"></div> 319 <div class="b cell1 justifySelfEnd" data-offset-x="330" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> 320 <div class="c cell1 alignSelfEnd" data-offset-x="400" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div> 321 <div class="i3" style="background: red"></div> 322 <div class="i4" style="background: blue"></div> 323 <div class="i5" style="background: red"></div> 324 </div> 325 </div> 326 327 <!-- RTL direction. --> 328 <div style="position: relative"> 329 <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p> 330 <div class="grid spanningTwo contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200"> 331 <div class="a cell justifySelfCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 332 <div class="b cell alignSelfCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 333 <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 334 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 335 </div> 336 </div> 337 338 <div style="position: relative"> 339 <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p> 340 <div class="grid spanningTwo contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200"> 341 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 342 <div class="b cell alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 343 <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 344 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 345 </div> 346 </div> 347 348 <div style="position: relative"> 349 <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p> 350 <div class="grid spanningTwo contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200"> 351 <div class="a cell justifySelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 352 <div class="b cell alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 353 <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 354 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 355 </div> 356 </div> 357 358 <div style="position: relative"> 359 <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p> 360 <div class="grid spanningTwo contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200"> 361 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 362 <div class="b cell alignSelfEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 363 <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 364 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 365 </div> 366 </div> 367 368 <div style="position: relative"> 369 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p> 370 <div class="grid spanningTwo contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200"> 371 <div class="a cell justifySelfCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div> 372 <div class="b cell alignSelfCenter" data-offset-x="60" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 373 <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 374 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 375 </div> 376 </div> 377 378 <div style="position: relative"> 379 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p> 380 <div class="grid spanningTwo contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200"> 381 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div> 382 <div class="b cell alignSelfEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 383 <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 384 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 385 </div> 386 </div> 387 388 <div style="position: relative"> 389 <p>direction: RTL | distribution: 'stretch' | self-alignment: center</p> 390 <div class="grid spanningTwo stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200"> 391 <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 392 <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 393 <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 394 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 395 </div> 396 </div> 397 398 <div style="position: relative"> 399 <p>direction: RTL | distribution: 'stretch' | self-alignment: end</p> 400 <div class="grid spanningTwo stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200"> 401 <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="100" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div> 402 <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 403 <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 404 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 405 </div> 406 </div> 407 408 <div style="position: relative"> 409 <p>direction: RTL | distribution: 'default' | self-alignment: center</p> 410 <div class="grid spanningThree directionRTL"> 411 <div class="i1" style="background: blue"></div> 412 <div class="i1" style="background: red"></div> 413 <div class="i1" style="background: blue"></div> 414 <div class="i1" style="background: red"></div> 415 <div class="i1" style="background: blue"></div> 416 <div class="i1" style="background: red"></div> 417 <div class="i2" style="background: red"></div> 418 <div class="i2" style="background: blue"></div> 419 <div class="b cell1 justifySelfCenter" data-offset-x="415" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div> 420 <div class="c cell1 alignSelfCenter" data-offset-x="330" data-offset-y="115" data-expected-width="20" data-expected-height="20"></div> 421 <div class="i3" style="background: red"></div> 422 <div class="i4" style="background: blue"></div> 423 <div class="i5" style="background: red"></div> 424 </div> 425 </div> 426 427 <div style="position: relative"> 428 <p>direction: RTL | distribution: 'default' | self-alignment: end</p> 429 <div class="grid spanningThree directionRTL"> 430 <div class="i1" style="background: blue"></div> 431 <div class="i1" style="background: red"></div> 432 <div class="i1" style="background: blue"></div> 433 <div class="i1" style="background: red"></div> 434 <div class="i1" style="background: blue"></div> 435 <div class="i1" style="background: red"></div> 436 <div class="i2" style="background: red"></div> 437 <div class="i2" style="background: blue"></div> 438 <div class="b cell1 justifySelfEnd" data-offset-x="350" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div> 439 <div class="c cell1 alignSelfEnd" data-offset-x="330" data-offset-y="180" data-expected-width="20" data-expected-height="20"></div> 440 <div class="i3" style="background: red"></div> 441 <div class="i4" style="background: blue"></div> 442 <div class="i5" style="background: red"></div> 443 </div> 444 </div> 445 446 <div style="position: relative"> 447 <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p> 448 <div class="grid spanningThree contentSpaceBetween directionRTL"> 449 <div class="i1" style="background: blue;"></div> 450 <div class="i1" style="background: red"></div> 451 <div class="i1" style="background: blue"></div> 452 <div class="i1" style="background: red"></div> 453 <div class="i1" style="background: blue"></div> 454 <div class="i1" style="background: red"></div> 455 <div class="i2" style="background: red"></div> 456 <div class="i2" style="background: blue"></div> 457 <div class="b cell1 justifySelfCenter" data-offset-x="315" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> 458 <div class="c cell1 alignSelfCenter" data-offset-x="130" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div> 459 <div class="i3" style="background: red"></div> 460 <div class="i4" style="background: blue"></div> 461 <div class="i5" style="background: red"></div> 462 </div> 463 </div> 464 465 <div style="position: relative"> 466 <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p> 467 <div class="grid spanningThree contentSpaceBetween directionRTL"> 468 <div class="i1" style="background: blue;"></div> 469 <div class="i1" style="background: red"></div> 470 <div class="i1" style="background: blue"></div> 471 <div class="i1" style="background: red"></div> 472 <div class="i1" style="background: blue"></div> 473 <div class="i1" style="background: red"></div> 474 <div class="i2" style="background: red"></div> 475 <div class="i2" style="background: blue"></div> 476 <div class="b cell1 justifySelfEnd" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> 477 <div class="c cell1 alignSelfEnd" data-offset-x="130" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div> 478 <div class="i3" style="background: red"></div> 479 <div class="i4" style="background: blue"></div> 480 <div class="i5" style="background: red"></div> 481 </div> 482 </div> 483 484 <div style="position: relative"> 485 <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: center</p> 486 <div class="grid spanningThree gridRowColumnGaps directionRTL"> 487 <div class="i1" style="background: blue"></div> 488 <div class="i1" style="background: red"></div> 489 <div class="i1" style="background: blue"></div> 490 <div class="i1" style="background: red"></div> 491 <div class="i1" style="background: blue"></div> 492 <div class="i1" style="background: red"></div> 493 <div class="i2" style="background: red"></div> 494 <div class="i2" style="background: blue"></div> 495 <div class="b cell1 justifySelfCenter" data-offset-x="395" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div> 496 <div class="c cell1 alignSelfCenter" data-offset-x="290" data-offset-y="155" data-expected-width="20" data-expected-height="20"></div> 497 <div class="i3" style="background: red"></div> 498 <div class="i4" style="background: blue"></div> 499 <div class="i5" style="background: red"></div> 500 </div> 501 </div> 502 503 <div style="position: relative"> 504 <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: end</p> 505 <div class="grid spanningThree gridRowColumnGaps directionRTL"> 506 <div class="i1" style="background: blue"></div> 507 <div class="i1" style="background: red"></div> 508 <div class="i1" style="background: blue"></div> 509 <div class="i1" style="background: red"></div> 510 <div class="i1" style="background: blue"></div> 511 <div class="i1" style="background: red"></div> 512 <div class="i2" style="background: red"></div> 513 <div class="i2" style="background: blue"></div> 514 <div class="b cell1 justifySelfEnd" data-offset-x="320" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div> 515 <div class="c cell1 alignSelfEnd" data-offset-x="290" data-offset-y="240" data-expected-width="20" data-expected-height="20"></div> 516 <div class="i3" style="background: red"></div> 517 <div class="i4" style="background: blue"></div> 518 <div class="i5" style="background: red"></div> 519 </div> 520 </div> 521 522 <div style="position: relative"> 523 <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: center</p> 524 <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps directionRTL"> 525 <div class="i1" style="background: blue;"></div> 526 <div class="i1" style="background: red"></div> 527 <div class="i1" style="background: blue"></div> 528 <div class="i1" style="background: red"></div> 529 <div class="i1" style="background: blue"></div> 530 <div class="i1" style="background: red"></div> 531 <div class="i2" style="background: red"></div> 532 <div class="i2" style="background: blue"></div> 533 <div class="b cell1 justifySelfCenter" data-offset-x="315" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> 534 <div class="c cell1 alignSelfCenter" data-offset-x="130" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div> 535 <div class="i3" style="background: red"></div> 536 <div class="i4" style="background: blue"></div> 537 <div class="i5" style="background: red"></div> 538 </div> 539 </div> 540 541 <div style="position: relative"> 542 <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: end</p> 543 <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps directionRTL"> 544 <div class="i1" style="background: blue;"></div> 545 <div class="i1" style="background: red"></div> 546 <div class="i1" style="background: blue"></div> 547 <div class="i1" style="background: red"></div> 548 <div class="i1" style="background: blue"></div> 549 <div class="i1" style="background: red"></div> 550 <div class="i2" style="background: red"></div> 551 <div class="i2" style="background: blue"></div> 552 <div class="b cell1 justifySelfEnd" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> 553 <div class="c cell1 alignSelfEnd" data-offset-x="130" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div> 554 <div class="i3" style="background: red"></div> 555 <div class="i4" style="background: blue"></div> 556 <div class="i5" style="background: red"></div> 557 </div> 558 </div> 559 560 </body> 561 </html>