grid-align-content-distribution.html (26668B)
1 <meta charset="utf-8"> 2 <title>CSS Grid Layout Test: aligned content distribution</title> 3 <link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> 5 <meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values."> 6 <meta name="flags" content="ahem"> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <link rel="stylesheet" href="/css/support/grid.css"> 9 <link rel="stylesheet" href="/css/support/alignment.css"> 10 11 <style> 12 13 .grid { 14 grid-auto-columns: 20px; 15 grid-auto-rows: 40px; 16 position: relative; 17 width: 200px; 18 height: 300px; 19 } 20 21 .stretchedGrid { 22 grid-auto-rows: auto; 23 } 24 25 .fourthRowFirstColumn { 26 background-color: deepskyblue; 27 grid-column: 1; 28 grid-row: 4; 29 } 30 31 .fourthRowSecondColumn { 32 background-color: maroon; 33 grid-column: 2; 34 grid-row: 4; 35 } 36 37 </style> 38 39 <script src="/resources/testharness.js"></script> 40 <script src="/resources/testharnessreport.js"></script> 41 <script src="/resources/check-layout-th.js"></script> 42 <script type="text/javascript"> 43 setup({ explicit_done: true }); 44 </script> 45 46 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 47 48 <p>This test checks that the align-content property is applied correctly when using content-distribution values.</p> 49 50 <div style="position: relative"> 51 <p>direction: LTR | align-content: 'space-between'</p> 52 <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300"> 53 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 54 <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 55 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> 56 <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> 57 </div> 58 </div> 59 60 <div style="position: relative"> 61 <p>direction: LTR | align-content: 'space-around'</p> 62 <div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300"> 63 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div> 64 <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div> 65 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div> 66 <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div> 67 </div> 68 </div> 69 70 <div style="position: relative"> 71 <p>direction: LTR | align-content: 'space-evenly'</p> 72 <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300"> 73 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div> 74 <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div> 75 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div> 76 <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div> 77 </div> 78 </div> 79 80 <div style="position: relative"> 81 <p>direction: LTR | align-content: 'stretch'</p> 82 <div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300"> 83 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div> 84 <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div> 85 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div> 86 <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div> 87 </div> 88 </div> 89 90 <div style="position: relative"> 91 <p>direction: LTR | align-content: 'space-between'</p> 92 <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300"> 93 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 94 <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 95 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 96 <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 97 <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> 98 <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> 99 </div> 100 </div> 101 102 <div style="position: relative"> 103 <p>direction: LTR | align-content: 'space-around'</p> 104 <div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300"> 105 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 106 <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 107 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 108 <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 109 <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div> 110 <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div> 111 </div> 112 </div> 113 114 <div style="position: relative"> 115 <p>direction: LTR | align-content: 'space-evenly'</p> 116 <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300"> 117 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div> 118 <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div> 119 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 120 <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 121 <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div> 122 <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div> 123 </div> 124 </div> 125 126 <div style="position: relative"> 127 <p>direction: LTR | align-content: 'stretch'</p> 128 <div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300"> 129 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div> 130 <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div> 131 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div> 132 <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div> 133 <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div> 134 <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div> 135 </div> 136 </div> 137 138 <div style="position: relative"> 139 <p>direction: LTR | align-content: 'space-between'</p> 140 <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300"> 141 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 142 <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 143 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div> 144 <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div> 145 <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div> 146 <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div> 147 <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> 148 <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> 149 </div> 150 </div> 151 152 <div style="position: relative"> 153 <p>direction: LTR | align-content: 'space-around'</p> 154 <div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300"> 155 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div> 156 <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div> 157 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div> 158 <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div> 159 <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div> 160 <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div> 161 <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div> 162 <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div> 163 </div> 164 </div> 165 166 <div style="position: relative"> 167 <p>direction: LTR | align-content: 'space-evenly'</p> 168 <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300"> 169 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div> 170 <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div> 171 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div> 172 <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div> 173 <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div> 174 <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div> 175 <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div> 176 <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div> 177 </div> 178 </div> 179 180 <div style="position: relative"> 181 <p>direction: LTR | align-content: 'stretch'</p> 182 <div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300"> 183 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div> 184 <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div> 185 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div> 186 <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div> 187 <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div> 188 <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div> 189 <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div> 190 <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div> 191 </div> 192 </div> 193 194 <!-- RTL direction. --> 195 <div style="position: relative"> 196 <p>direction: RTL | align-content: 'space-between'</p> 197 <div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300"> 198 <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 199 <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 200 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> 201 <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> 202 </div> 203 </div> 204 205 <div style="position: relative"> 206 <p>direction: RTL | align-content: 'space-around'</p> 207 <div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300"> 208 <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div> 209 <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div> 210 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div> 211 <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div> 212 </div> 213 </div> 214 215 <div style="position: relative"> 216 <p>direction: RTL | align-content: 'space-evenly'</p> 217 <div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300"> 218 <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div> 219 <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div> 220 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div> 221 <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div> 222 </div> 223 </div> 224 225 <div style="position: relative"> 226 <p>direction: RTL | align-content: 'stretch'</p> 227 <div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300"> 228 <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div> 229 <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div> 230 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div> 231 <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div> 232 </div> 233 </div> 234 235 <div style="position: relative"> 236 <p>direction: RTL | align-content: 'space-between'</p> 237 <div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300"> 238 <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 239 <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 240 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 241 <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 242 <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> 243 <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> 244 </div> 245 </div> 246 247 <div style="position: relative"> 248 <p>direction: RTL | align-content: 'space-around'</p> 249 <div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300"> 250 <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 251 <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 252 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 253 <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 254 <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div> 255 <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div> 256 </div> 257 </div> 258 259 <div style="position: relative"> 260 <p>direction: RTL | align-content: 'space-evenly'</p> 261 <div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300"> 262 <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div> 263 <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div> 264 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 265 <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 266 <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div> 267 <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div> 268 </div> 269 </div> 270 271 <div style="position: relative"> 272 <p>direction: RTL | align-content: 'stretch'</p> 273 <div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300"> 274 <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div> 275 <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div> 276 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div> 277 <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div> 278 <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div> 279 <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div> 280 </div> 281 </div> 282 283 <div style="position: relative"> 284 <p>direction: RTL | align-content: 'space-between'</p> 285 <div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300"> 286 <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 287 <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 288 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div> 289 <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div> 290 <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div> 291 <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div> 292 <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> 293 <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> 294 </div> 295 </div> 296 297 <div style="position: relative"> 298 <p>direction: RTL | align-content: 'space-around'</p> 299 <div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300"> 300 <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div> 301 <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div> 302 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div> 303 <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div> 304 <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div> 305 <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div> 306 <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div> 307 <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div> 308 </div> 309 </div> 310 311 <div style="position: relative"> 312 <p>direction: RTL | align-content: 'space-evenly'</p> 313 <div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300"> 314 <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div> 315 <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div> 316 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div> 317 <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div> 318 <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div> 319 <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div> 320 <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div> 321 <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div> 322 </div> 323 </div> 324 325 <div style="position: relative"> 326 <p>direction: RTL | align-content: 'stretch'</p> 327 <div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300"> 328 <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div> 329 <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div> 330 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div> 331 <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div> 332 <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div> 333 <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div> 334 <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div> 335 <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div> 336 </div> 337 </div> 338 </body>