grid-content-alignment-and-self-alignment-001.html (27258B)
1 <!DOCTYPE html> 2 <title>CSS Grid Layout Test: content distribution alignment and self alignment.</title> 3 <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> 5 <link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> 6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> 7 <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> 8 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451"> 9 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823"> 10 <link rel="stylesheet" href="/fonts/ahem.css"> 11 <link rel="stylesheet" href="/css/support/alignment.css"> 12 <link rel="stylesheet" href="/css/support/grid.css"> 13 <meta name="assert" content="Test that content distribution alignment works fine in combination with self alignment and items in just one cell." /> 14 15 <style> 16 .grid { 17 grid-template-columns: 200px 100px; 18 grid-template-rows: 100px 50px; 19 width: 500px; 20 height: 350px; 21 position: relative; 22 font: 10px/1 Ahem; 23 } 24 25 .gridGaps { 26 grid-gap: 10px 20px; 27 } 28 </style> 29 30 <script src="/resources/testharness.js"></script> 31 <script src="/resources/testharnessreport.js"></script> 32 <script src="/resources/check-layout-th.js"></script> 33 <script type="text/javascript"> 34 setup({ explicit_done: true }); 35 </script> 36 37 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 38 39 <div id="log"></div> 40 41 <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p> 42 <div class="grid contentSpaceBetween itemsCenter"> 43 <!-- Dummy DIVs to help checking the result visually. --> 44 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 45 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 46 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 47 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 48 49 <div class="firstRowFirstColumn" data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> 50 <div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> 51 <div class="secondRowFirstColumn" data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> 52 <div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> 53 </div> 54 55 <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p> 56 <div class="grid contentSpaceBetween itemsEnd"> 57 <!-- Dummy DIVs to help checking the result visually. --> 58 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 59 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 60 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 61 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 62 63 <div class="firstRowFirstColumn" data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> 64 <div class="firstRowSecondColumn" data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> 65 <div class="secondRowFirstColumn" data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> 66 <div class="secondRowSecondColumn" data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> 67 </div> 68 69 <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p> 70 <div class="grid contentSpaceAround itemsCenter"> 71 <!-- Dummy DIVs to help checking the result visually. --> 72 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 73 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 74 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 75 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 76 77 <div class="firstRowFirstColumn" data-offset-x="145" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div> 78 <div class="firstRowSecondColumn" data-offset-x="395" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div> 79 <div class="secondRowFirstColumn" data-offset-x="145" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div> 80 <div class="secondRowSecondColumn" data-offset-x="395" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div> 81 </div> 82 83 <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p> 84 <div class="grid contentSpaceAround itemsEnd"> 85 <!-- Dummy DIVs to help checking the result visually. --> 86 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 87 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 88 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 89 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 90 91 <div class="firstRowFirstColumn" data-offset-x="240" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div> 92 <div class="firstRowSecondColumn" data-offset-x="440" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div> 93 <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div> 94 <div class="secondRowSecondColumn" data-offset-x="440" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div> 95 </div> 96 97 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p> 98 <div class="grid contentSpaceEvenly itemsCenter"> 99 <!-- Dummy DIVs to help checking the result visually. --> 100 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 101 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 102 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 103 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 104 105 <div class="firstRowFirstColumn" data-offset-x="162" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div> 106 <div class="firstRowSecondColumn" data-offset-x="378" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div> 107 <div class="secondRowFirstColumn" data-offset-x="162" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div> 108 <div class="secondRowSecondColumn" data-offset-x="378" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div> 109 </div> 110 111 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p> 112 <div class="grid contentSpaceEvenly itemsEnd"> 113 <!-- Dummy DIVs to help checking the result visually. --> 114 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 115 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 116 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 117 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 118 119 <div class="firstRowFirstColumn" data-offset-x="257" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div> 120 <div class="firstRowSecondColumn" data-offset-x="423" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div> 121 <div class="secondRowFirstColumn" data-offset-x="257" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> 122 <div class="secondRowSecondColumn" data-offset-x="423" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> 123 </div> 124 125 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p> 126 <div class="grid gridGaps contentSpaceBetween itemsCenter"> 127 <!-- Dummy DIVs to help checking the result visually. --> 128 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 129 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 130 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 131 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 132 133 <div class="firstRowFirstColumn" data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> 134 <div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> 135 <div class="secondRowFirstColumn" data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> 136 <div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> 137 </div> 138 139 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p> 140 <div class="grid gridGaps contentSpaceBetween itemsEnd"> 141 <!-- Dummy DIVs to help checking the result visually. --> 142 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 143 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 144 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 145 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 146 147 <div class="firstRowFirstColumn" data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> 148 <div class="firstRowSecondColumn" data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> 149 <div class="secondRowFirstColumn" data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> 150 <div class="secondRowSecondColumn" data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> 151 </div> 152 153 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p> 154 <div class="grid gridGaps contentSpaceAround itemsCenter"> 155 <!-- Dummy DIVs to help checking the result visually. --> 156 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 157 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 158 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 159 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 160 161 <div class="firstRowFirstColumn" data-offset-x="140" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div> 162 <div class="firstRowSecondColumn" data-offset-x="400" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div> 163 <div class="secondRowFirstColumn" data-offset-x="140" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> 164 <div class="secondRowSecondColumn" data-offset-x="400" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> 165 </div> 166 167 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p> 168 <div class="grid gridGaps contentSpaceAround itemsEnd"> 169 <!-- Dummy DIVs to help checking the result visually. --> 170 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 171 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 172 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 173 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 174 175 <div class="firstRowFirstColumn" data-offset-x="235" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div> 176 <div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div> 177 <div class="secondRowFirstColumn" data-offset-x="235" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div> 178 <div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div> 179 </div> 180 181 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p> 182 <div class="grid gridGaps contentSpaceEvenly itemsCenter"> 183 <!-- Dummy DIVs to help checking the result visually. --> 184 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 185 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 186 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 187 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 188 189 <div class="firstRowFirstColumn" data-offset-x="155" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div> 190 <div class="firstRowSecondColumn" data-offset-x="385" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div> 191 <div class="secondRowFirstColumn" data-offset-x="155" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div> 192 <div class="secondRowSecondColumn" data-offset-x="385" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div> 193 </div> 194 195 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p> 196 <div class="grid gridGaps contentSpaceEvenly itemsEnd"> 197 <!-- Dummy DIVs to help checking the result visually. --> 198 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 199 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 200 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 201 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 202 203 <div class="firstRowFirstColumn" data-offset-x="250" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div> 204 <div class="firstRowSecondColumn" data-offset-x="430" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div> 205 <div class="secondRowFirstColumn" data-offset-x="250" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div> 206 <div class="secondRowSecondColumn" data-offset-x="430" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div> 207 </div> 208 209 <!-- RTL direction. --> 210 211 <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p> 212 <div class="grid directionRTL contentSpaceBetween itemsCenter"> 213 <!-- Dummy DIVs to help checking the result visually. --> 214 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 215 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 216 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 217 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 218 219 <div class="firstRowFirstColumn" data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> 220 <div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> 221 <div class="secondRowFirstColumn" data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> 222 <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> 223 </div> 224 225 <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p> 226 <div class="grid directionRTL contentSpaceBetween itemsEnd"> 227 <!-- Dummy DIVs to help checking the result visually. --> 228 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 229 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 230 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 231 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 232 233 <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> 234 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> 235 <div class="secondRowFirstColumn" data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> 236 <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> 237 </div> 238 239 <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p> 240 <div class="grid directionRTL contentSpaceAround itemsCenter"> 241 <!-- Dummy DIVs to help checking the result visually. --> 242 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 243 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 244 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 245 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 246 247 <div class="firstRowFirstColumn" data-offset-x="345" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div> 248 <div class="firstRowSecondColumn" data-offset-x="95" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div> 249 <div class="secondRowFirstColumn" data-offset-x="345" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div> 250 <div class="secondRowSecondColumn" data-offset-x="95" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div> 251 </div> 252 253 <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p> 254 <div class="grid directionRTL contentSpaceAround itemsEnd"> 255 <!-- Dummy DIVs to help checking the result visually. --> 256 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 257 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 258 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 259 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 260 261 <div class="firstRowFirstColumn" data-offset-x="250" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div> 262 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div> 263 <div class="secondRowFirstColumn" data-offset-x="250" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div> 264 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div> 265 </div> 266 267 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p> 268 <div class="grid directionRTL contentSpaceEvenly itemsCenter"> 269 <!-- Dummy DIVs to help checking the result visually. --> 270 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 271 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 272 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 273 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 274 275 <div class="firstRowFirstColumn" data-offset-x="328" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div> 276 <div class="firstRowSecondColumn" data-offset-x="112" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div> 277 <div class="secondRowFirstColumn" data-offset-x="328" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div> 278 <div class="secondRowSecondColumn" data-offset-x="112" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div> 279 </div> 280 281 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p> 282 <div class="grid directionRTL contentSpaceEvenly itemsEnd"> 283 <!-- Dummy DIVs to help checking the result visually. --> 284 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 285 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 286 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 287 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 288 289 <div class="firstRowFirstColumn" data-offset-x="233" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div> 290 <div class="firstRowSecondColumn" data-offset-x="67" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div> 291 <div class="secondRowFirstColumn" data-offset-x="233" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> 292 <div class="secondRowSecondColumn" data-offset-x="67" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> 293 </div> 294 295 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p> 296 <div class="grid directionRTL gridGaps contentSpaceBetween itemsCenter"> 297 <!-- Dummy DIVs to help checking the result visually. --> 298 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 299 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 300 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 301 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 302 303 <div class="firstRowFirstColumn" data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> 304 <div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> 305 <div class="secondRowFirstColumn" data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> 306 <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> 307 </div> 308 309 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p> 310 <div class="grid directionRTL gridGaps contentSpaceBetween itemsEnd"> 311 <!-- Dummy DIVs to help checking the result visually. --> 312 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 313 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 314 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 315 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 316 317 <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> 318 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> 319 <div class="secondRowFirstColumn" data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> 320 <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> 321 </div> 322 323 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p> 324 <div class="grid directionRTL gridGaps contentSpaceAround itemsCenter"> 325 <!-- Dummy DIVs to help checking the result visually. --> 326 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 327 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 328 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 329 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 330 331 <div class="firstRowFirstColumn" data-offset-x="350" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div> 332 <div class="firstRowSecondColumn" data-offset-x="90" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div> 333 <div class="secondRowFirstColumn" data-offset-x="350" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> 334 <div class="secondRowSecondColumn" data-offset-x="90" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> 335 </div> 336 337 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p> 338 <div class="grid directionRTL gridGaps contentSpaceAround itemsEnd"> 339 <!-- Dummy DIVs to help checking the result visually. --> 340 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 341 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 342 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 343 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 344 345 <div class="firstRowFirstColumn" data-offset-x="255" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div> 346 <div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div> 347 <div class="secondRowFirstColumn" data-offset-x="255" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div> 348 <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div> 349 </div> 350 351 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p> 352 <div class="grid directionRTL gridGaps contentSpaceEvenly itemsCenter"> 353 <!-- Dummy DIVs to help checking the result visually. --> 354 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 355 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 356 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 357 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 358 359 <div class="firstRowFirstColumn" data-offset-x="335" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div> 360 <div class="firstRowSecondColumn" data-offset-x="105" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div> 361 <div class="secondRowFirstColumn" data-offset-x="335" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div> 362 <div class="secondRowSecondColumn" data-offset-x="105" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div> 363 </div> 364 365 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p> 366 <div class="grid directionRTL gridGaps contentSpaceEvenly itemsEnd"> 367 <!-- Dummy DIVs to help checking the result visually. --> 368 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> 369 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> 370 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> 371 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> 372 373 <div class="firstRowFirstColumn" data-offset-x="240" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div> 374 <div class="firstRowSecondColumn" data-offset-x="60" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div> 375 <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div> 376 <div class="secondRowSecondColumn" data-offset-x="60" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div> 377 </div> 378 379 </body>