third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution.html

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